Add react color picker, show tailwind colors all the time

2025-02-10 10:29:00 -05:00
parent db5fb7ca61
commit 1d03a56c70
5 changed files with 393 additions and 72 deletions
--- a/src/components/TailwindColors.tsx
+++ b/src/components/TailwindColors.tsx
@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import { TAILWIND_COLORS } from '../utils/colors'
+
+interface TailwindColorsProps {
+  onColorSelect: (color: string) => void
+  selectedColor?: string
+}
+
+export function TailwindColors({ onColorSelect, selectedColor }: TailwindColorsProps) {
+  const colorEntries = useMemo(() => Object.entries(TAILWIND_COLORS), [])
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(100px,1fr))] gap-4">
+        {colorEntries.map(([colorName, shades]) => (
+          <div key={colorName} className="space-y-2">
+            <div className="text-sm font-medium text-zinc-600 capitalize">{colorName}</div>
+            <div className="grid grid-rows-[repeat(11,1fr)] gap-1">
+              {Object.entries(shades).map(([shade, hex]) => (
+                <button
+                  key={`${colorName}-${shade}`}
+                  onClick={() => onColorSelect(hex)}
+                  className={`w-full h-7 rounded transition-all hover:scale-105 hover:shadow-lg group relative
+                    ${selectedColor === hex ? 'ring-2 ring-offset-2 ring-indigo-500' : ''}`}
+                  style={{ backgroundColor: hex }}
+                  title={`${colorName}-${shade}: ${hex}`}
+                >
+                  <span className={`absolute left-2 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity
+                    ${Number(shade) > 500 ? 'text-white' : 'text-black'}`}>
+                    {shade}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}