add project color selector

resources/js/Components/Common/Project/ProjectColorSelector.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+import { colors } from '@/utils/color';
+
+const model = defineModel<string>({ default: '' });
+</script>
+
+<template>
+    <div class="px-3">
+        <Dropdown align="bottom">
+            <template #trigger>
+                <div
+                    :style="{
+                        backgroundColor: model,
+                        boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${model}30`,
+                    }"
+                    class="w-4 h-4 rounded-full cursor-pointer"></div>
+            </template>
+            <template #content>
+                <div class="text-white grid grid-cols-6 gap-3 px-3 py-3">
+                    <div
+                        v-for="color in colors"
+                        :key="color"
+                        @click="model = color"
+                        :style="{
+                            backgroundColor: color,
+                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) ${color}30`,
+                        }"
+                        class="w-4 h-4 rounded-full cursor-pointer"></div>
+                </div>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Project/ProjectCreateModal.vue

@@ -13,6 +13,7 @@ import { twMerge } from 'tailwind-merge';
 import Badge from '@/Components/Common/Badge.vue';
 import { useClientsStore } from '@/utils/useClients';
 import { storeToRefs } from 'pinia';
+import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
 
 const { createProject } = useProjectsStore();
 const { clients } = storeToRefs(useClientsStore());
@@ -28,6 +29,11 @@ const project = ref<CreateProjectBody>({
 async function submit() {
     await createProject(project.value);
     show.value = false;
+    project.value = {
+        name: '',
+        color: getRandomColor(),
+        client_id: null,
+    };
 }
 
 const projectNameInput = ref<HTMLInputElement | null>(null);
@@ -54,14 +60,8 @@ const currentClientName = computed(() => {
 
         <template #content>
             <div class="flex items-center space-x-4">
-                <div class="px-3">
+                <ProjectColorSelector
-                    <div
+                    v-model="project.color"></ProjectColorSelector>
-                        :style="{
-                            backgroundColor: project.color,
-                            boxShadow: `var(--tw-ring-inset) 0 0 0 calc(5px + var(--tw-ring-offset-width)) ${project.color}30`,
-                        }"
-                        class="w-4 h-4 rounded-full"></div>
-                </div>
                 <div class="col-span-6 sm:col-span-4 flex-1">
                     <TextInput
                         id="projectName"