68 lines
1.2 KiB
Vue
68 lines
1.2 KiB
Vue
<template>
|
|
<div class="description">
|
|
<nav>
|
|
<a v-if="star.core.id >= 1" :href="`/visit/${star.core.id - 1}`"
|
|
>previous</a
|
|
>
|
|
<button @click="copy">
|
|
<span v-if="!copied">share</span><span v-else>link copied</span>
|
|
</button>
|
|
<a
|
|
v-if="star.core.id < store.stars.length"
|
|
:href="`/visit/${star.core.id + 1}`"
|
|
>next</a
|
|
>
|
|
</nav>
|
|
<h1>{{ star.name }}</h1>
|
|
<p>{{ star.description }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PropType, ref } from "vue";
|
|
import { Star } from "@/swagger";
|
|
import { useChartStore } from "@/state/stars";
|
|
|
|
defineProps({
|
|
star: { type: Object as PropType<Star>, required: true },
|
|
});
|
|
|
|
const store = useChartStore();
|
|
|
|
const copied = ref(false);
|
|
|
|
const copy = async () => {
|
|
await navigator.clipboard.writeText(window.location.href);
|
|
copied.value = true;
|
|
};
|
|
|
|
store.fetchChart();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.description {
|
|
padding: 1em;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
background: none;
|
|
border-style: none;
|
|
color: #aaf0d1;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-size: medium;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
h1,
|
|
p {
|
|
color: #f0d1aa;
|
|
}
|
|
</style>
|