design for detail vue is finished

src/pages/Detail.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { Card, CardTitle, CardDescription } from '@/components/ui/card';
 import { entries, getDifferenceToToday } from '@/data/entries';
+import { ArrowBigLeft, MenuIcon, TrashIcon } from 'lucide-vue-next';
+import {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuItem,
+	DropdownMenuContent
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
 import { ref } from 'vue';
 
 const probs = defineProps<{ name: string }>()
@@ -9,22 +17,40 @@ const entry = ref(entries.value.find(entry => entry.name === probs.name))
 </script>
 
 <template>
-    <div id="container" class="flex w-full justify-center p-10">
-        <main class="">
-            <header>
-                <Card v-if="entry" class="p-10">
-                    <CardTitle>{{ getDifferenceToToday(entry.last_reset) }} days</CardTitle>
-                    <CardDescription v-if="entry.text">
-                        text is defined
-                        {{ entry.text }}
-                    </CardDescription>
-                    <CardDescription v-else>
-                        text is not defined
-                    </CardDescription>
-                </Card>
-            </header>
-        </main>
-    </div>
+	<main v-if="entry" id="container-entry-defined" class="flex w-full h-screen items-center p-10 flex-col">
+		<header class="h-2/4 flex justify-center items-center">
+			<Card class="p-10 flex justify-center items-center flex-col gap-3">
+				<CardTitle class="text-5xl">{{ getDifferenceToToday(entry.last_reset) }} days</CardTitle>
+				<CardDescription class="text-xl" v-if="entry.text">
+					{{ entry.text }}
+				</CardDescription>
+				<CardDescription class="text-xl" v-else>
+					since last {{ entry.name }}
+				</CardDescription>
+			</Card>
+		</header>
+		<nav class="w-full flex flex-row justify-between my-4">
+			<a><ArrowBigLeft class="cursor-pointer"/></a>
+			<a>{{entry.name}}</a>
+
+			<DropdownMenu>
+				<DropdownMenuTrigger>
+					<a><MenuIcon/></a>
+				</DropdownMenuTrigger>
+
+				<DropdownMenuContent class="mr-2">
+					<DropdownMenuItem>
+						<TrashIcon color="#ef4444"/>
+						<span color="#ef4444">Delete</span>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</nav>
+		<div id="content" class="w-full flex flex-col gap-5 items-center mt-20">
+			<Button class="w-full">Edit</Button>
+			<Button class="w-full" variant="destructive">Reset</Button>
+		</div>
+	</main>
 </template>
 
-<style scoped></style>
+<style scoped></style>