add projects detail page, task create / delete

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Task } from '@/utils/api';
+import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { useTasksStore } from '@/utils/useTasks';
+import TaskMoreOptionsDropdown from '@/Components/Common/Task/TaskMoreOptionsDropdown.vue';
+import TableRow from '@/Components/TableRow.vue';
+
+const props = defineProps<{
+    task: Task;
+}>();
+
+function deleteTask() {
+    useTasksStore().deleteTask(props.task.id);
+}
+</script>
+
+<template>
+    <TableRow>
+        <div
+            class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            <span>
+                {{ task.name }}
+            </span>
+        </div>
+        <div
+            class="whitespace-nowrap px-3 py-4 text-sm text-muted flex space-x-1 items-center font-medium">
+            <CheckCircleIcon class="w-5"></CheckCircleIcon>
+            <span>Active</span>
+        </div>
+        <div
+            class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <TaskMoreOptionsDropdown
+                :task="task"
+                @delete="deleteTask"></TaskMoreOptionsDropdown>
+        </div>
+    </TableRow>
+</template>
+
+<style scoped></style>