#591 - tags

resources/js/components/color-select.tsx

@@ -0,0 +1,26 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import React from 'react';
+import { usePage } from '@inertiajs/react';
+import { SharedData } from '@/types';
+
+export default function ColorSelect({ onValueChange, ...props }: React.ComponentProps<typeof Select>) {
+  const page = usePage<SharedData>();
+
+  return (
+    <Select {...props} onValueChange={onValueChange}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a color" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {page.props.configs.colors.map((value) => (
+            <SelectItem key={`color-${value}`} value={value}>
+              <div className="size-5 rounded-sm" style={{ backgroundColor: `var(--color-${value}-500)` }}></div>
+              {value}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}