color-picker-demo

1"use client"
2 
3import React, { useCallback, useState } from "react"
4import { Check, Copy, Lock, LockOpen, Palette, RefreshCw } from "lucide-react"
5import { motion } from "motion/react"
6import { Poline, positionFunctions } from "poline"
7 
8import { Button } from "@/components/ui/button"
9import { Card, CardContent } from "@/components/ui/card"
10import {
11  Tooltip,
12  TooltipContent,
13  TooltipProvider,
14  TooltipTrigger,
15} from "@/components/ui/tooltip"
16 
17import ColorPicker from "../ui/color-picker"
18 
19type ColorScheme = {
20  [key: string]: string
21}
22 
23export default function ColorPickerDemo() {
24  const [colorScheme, setColorScheme] = useState<ColorScheme>({
25    background: "0 0% 100%",
26    foreground: "240 10% 3.9%",
27    card: "0 0% 100%",
28    "card-foreground": "240 10% 3.9%",
29    popover: "0 0% 100%",
30    "popover-foreground": "240 10% 3.9%",
31    primary: "240 5.9% 10%",
32    "primary-foreground": "0 0% 98%",
33    secondary: "240 4.8% 95.9%",
34    "secondary-foreground": "240 5.9% 10%",
35    muted: "240 4.8% 95.9%",
36    "muted-foreground": "240 3.8% 46.1%",
37    accent: "240 4.8% 95.9%",
38    "accent-foreground": "240 5.9% 10%",
39    destructive: "0 84.2% 60.2%",
40    "destructive-foreground": "0 0% 98%",
41    border: "240 5.9% 90%",
42    input: "240 5.9% 90%",
43    ring: "240 5.9% 10%",
44  })
45  const [lockedColor, setLockedColor] = useState<string | null>(null)
46  const [copied, setCopied] = useState(false)
47 
48  const generateHarmoniousColors = useCallback(() => {
49    let anchorColors: [number, number, number][] = []
50 
51    if (lockedColor) {
52      const [h, s, l] = colorScheme[lockedColor].split(" ").map(parseFloat)
53      anchorColors.push([h, s / 100, l / 100])
54    }
55 
56    while (anchorColors.length < 3) {
57      anchorColors.push([Math.random() * 360, 0.7, 0.5])
58    }
59 
60    const poline = new Poline({
61      numPoints: 20,
62      anchorColors,
63      positionFunctionX: positionFunctions.sinusoidalPosition,
64      positionFunctionY: positionFunctions.quadraticPosition,
65      positionFunctionZ: positionFunctions.linearPosition,
66    })
67 
68    const newColorScheme = { ...colorScheme }
69    const colors = poline.colorsCSS
70 
71    Object.keys(newColorScheme).forEach((key, index) => {
72      if (key !== lockedColor) {
73        const color = colors[index % colors.length]
74        const [h, s, l] = color.match(/\d+(\.\d+)?/g)?.map(Number) || [0, 0, 0]
75 
76        let adjustedLightness = l
77        if (key.includes("foreground")) {
78          adjustedLightness = Math.min(l - 30, 20)
79// … truncated