removing entries works extracted formular into component

src/components/EntryForm.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Input } from '@/components/ui/input';
+import { Form, FormItem, FormLabel, FormField, FormControl, FormMessage, FormDescription } from '@/components/ui/form';
+import { Button } from './ui/button';
+import { Textarea } from '@/components/ui/textarea';
+
+const emit = defineEmits<{
+  submit: [value: CreateEntrySchema]
+}>()
+
+const props = defineProps<{
+	action: 'create' | 'edit'
+}>()
+
+
+const createEntryZodSchema = z.object({
+	name: z.string(),
+	text: z.string().optional()
+})
+
+export type CreateEntrySchema = z.infer<typeof createEntryZodSchema>
+
+const createEntrySchema = toTypedSchema(createEntryZodSchema)
+
+</script>
+
+<template>
+	<Form :validation-schema="createEntrySchema" @submit="(val) => emit('submit', val as CreateEntrySchema)">
+		<FormField v-slot="{ componentField }" name="name">
+			<FormItem>
+				<FormControl>
+					<Input placeholder="Name" v-bind="componentField" />
+				</FormControl>
+				<FormMessage />
+			</FormItem>
+		</FormField>
+		<FormField v-slot="{ componentField }" name="text">
+			<FormItem>
+				<FormLabel></FormLabel>
+				<FormControl>
+					<Textarea placeholder="Text" v-bind="componentField" />
+				</FormControl>
+				<FormDescription />
+				<FormMessage />
+			</FormItem>
+		</FormField>
+		<Button type="submit" class="w-full" v-if="props.action === 'create'">Create</Button>
+		<Button type="submit" class="w-full" v-else>Edit</Button>
+	</Form>
+</template>
+
+<style scoped></style>

src/pages/Detail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Card, CardTitle, CardDescription } from '@/components/ui/card';
-import { entries, getDifferenceToToday } from '@/data/entries';
+import { Entry, entries, getDifferenceToToday, save } from '@/data/entries';
 import { ArrowBigLeft, MenuIcon, TrashIcon } from 'lucide-vue-next';
 import {
 	DropdownMenu,
@@ -11,11 +11,26 @@ import {
 import { Button } from '@/components/ui/button';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { toast } from 'vue-sonner';
 
 const probs = defineProps<{ name: string }>()
 const router = useRouter()
 const entry = ref(entries.value.find(entry => entry.name === probs.name))
 
+
+function deleteEntry(entry: Entry) {
+	const index = entries.value.indexOf(entry)
+
+	if (index === undefined) {
+		toast('Deletion failed')
+		return
+	}
+
+	entries.value.splice(index, 1)
+	save()
+	router.back()
+}
+
 </script>
 
 <template>
@@ -41,12 +56,13 @@ const entry = ref(entries.value.find(entry => entry.name === probs.name))
 				</DropdownMenuTrigger>
 
 				<DropdownMenuContent class="mr-2">
-					<DropdownMenuItem>
+					<DropdownMenuItem @click="() => deleteEntry(entry)">
 						<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>

src/pages/Home.vue

@@ -2,31 +2,21 @@
 import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-vue-next';
 import { entries, save } from '@/data/entries';
-import { Drawer, DrawerHeader, DrawerTitle, DrawerTrigger, DrawerContent, DrawerFooter, DrawerClose } from '@/components/ui/drawer';
+import { Drawer, DrawerHeader, DrawerTitle, DrawerContent, DrawerClose } from '@/components/ui/drawer';
-import { Form, FormItem, FormLabel, FormField, FormControl, FormMessage, FormDescription } from '@/components/ui/form';
 import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import EntryForm from '@/components/EntryForm.vue'
+import { CreateEntrySchema } from '@/components/EntryForm.vue'
 import { getDifferenceToToday } from '@/data/entries';
-import { toTypedSchema } from '@vee-validate/zod';
-import * as z from 'zod'
 import { useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 import moment from 'moment';
+import { ref } from 'vue';
 
+const createDrawerState = ref(false)
 const router = useRouter()
-const createEntryZodSchema = z.object({
-    name: z.string(),
-    text: z.string().optional()
-})
 
-type CreateEntrySchema = z.infer<typeof createEntryZodSchema>
+async function createEntry(value: CreateEntrySchema) {
-
-const createEntrySchema = toTypedSchema(createEntryZodSchema)
-
-
-function createEntry(value: CreateEntrySchema) {
 	if (entries.value.map(entry => entry.name).includes(value.name)) {
 		toast('Accident Entry allready exists', {
 			important: true,
@@ -44,6 +34,7 @@ function createEntry(value: CreateEntrySchema) {
 	})
 
 	save()
+	createDrawerState.value = false
 }
 
 function openDetailWithName(name: string) {
@@ -69,45 +60,22 @@ function openDetailWithName(name: string) {
 		</div>
 	</ScrollArea>
 
-    <Drawer>
+
-        <DrawerTrigger as-child>
+	<div id="placeholder" class="h-32"></div>
-            <div class="fixed bottom-0 w-full h-28 flex justify-center items-center">
+
-                <Button size="icon" class="h-20  sm:w-3/4 w-11/12">
+	<div class="fixed bottom-0 w-full h-28 flex justify-center items-center shadow-2xl shadow-black bg-white">
+		<Button size="icon" class="h-20  sm:w-3/4 w-11/12" @click="createDrawerState = true">
 			<Plus />
 		</Button>
 	</div>
-        </DrawerTrigger>
 
+	<Drawer v-model:open="createDrawerState">
 		<DrawerContent>
 			<DrawerHeader>
 				<DrawerTitle>Create new Entry</DrawerTitle>
 			</DrawerHeader>
 			<div id="content" class="p-5">
-                <Form :validation-schema="createEntrySchema" @submit="(val) => createEntry(val as CreateEntrySchema)">
+				<EntryForm action="create" @submit="(val) => createEntry(val)"> </EntryForm>
-                    <FormField v-slot="{ componentField }" name="name">
-                        <FormItem>
-                            <FormControl>
-                                <Input placeholder="Name" v-bind="componentField" />
-                            </FormControl>
-                            <FormMessage/>
-                        </FormItem>
-                    </FormField>
-                    <FormField v-slot="{ componentField }" name="text">
-                        <FormItem>
-                            <FormLabel></FormLabel>
-                            <FormControl>
-                                <Textarea placeholder="Text" v-bind="componentField" />
-                            </FormControl>
-                            <FormDescription />
-                            <FormMessage />
-                        </FormItem>
-                    </FormField>
-                    <DrawerFooter>
-                        <DrawerClose>
-                            <Button type="submit">Create</Button>
-                        </DrawerClose>
-                    </DrawerFooter>
-                </Form>
 			</div>
 		</DrawerContent>
 	</Drawer>