refactor: rename pastel app to color and update all references
This commit is contained in:
38
components/color/ColorDisplay.tsx
Normal file
38
components/color/ColorDisplay.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
interface ColorDisplayProps {
|
||||
color: string;
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||||
className?: string;
|
||||
showBorder?: boolean;
|
||||
}
|
||||
|
||||
export function ColorDisplay({
|
||||
color,
|
||||
size = 'lg',
|
||||
className,
|
||||
showBorder = true,
|
||||
}: ColorDisplayProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-16 w-16',
|
||||
md: 'h-32 w-32',
|
||||
lg: 'h-48 w-48',
|
||||
xl: 'h-64 w-64',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-lg transition-all',
|
||||
showBorder && 'ring-2 ring-border',
|
||||
sizeClasses[size],
|
||||
className
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
role="img"
|
||||
aria-label={`Color swatch: ${color}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
96
components/color/ColorInfo.tsx
Normal file
96
components/color/ColorInfo.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
|
||||
import { ColorInfo as ColorInfoType } from '@/lib/color/api/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Copy } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
interface ColorInfoProps {
|
||||
info: ColorInfoType;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ColorInfo({ info, className }: ColorInfoProps) {
|
||||
const copyToClipboard = (value: string, label: string) => {
|
||||
navigator.clipboard.writeText(value);
|
||||
toast.success(`Copied ${label} to clipboard`);
|
||||
};
|
||||
|
||||
const formatRgb = (rgb: { r: number; g: number; b: number; a?: number }) => {
|
||||
if (rgb.a !== undefined && rgb.a < 1) {
|
||||
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
|
||||
}
|
||||
return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
|
||||
};
|
||||
|
||||
const formatHsl = (hsl: { h: number; s: number; l: number; a?: number }) => {
|
||||
if (hsl.a !== undefined && hsl.a < 1) {
|
||||
return `hsla(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${hsl.a})`;
|
||||
}
|
||||
return `hsl(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;
|
||||
};
|
||||
|
||||
const formatLab = (lab: { l: number; a: number; b: number }) => {
|
||||
return `lab(${lab.l.toFixed(1)} ${lab.a.toFixed(1)} ${lab.b.toFixed(1)})`;
|
||||
};
|
||||
|
||||
const formatOkLab = (oklab: { l: number; a: number; b: number }) => {
|
||||
return `oklab(${(oklab.l * 100).toFixed(1)}% ${oklab.a.toFixed(3)} ${oklab.b.toFixed(3)})`;
|
||||
};
|
||||
|
||||
const formats = [
|
||||
{ label: 'Hex', value: info.hex },
|
||||
{ label: 'RGB', value: formatRgb(info.rgb) },
|
||||
{ label: 'HSL', value: formatHsl(info.hsl) },
|
||||
{ label: 'Lab', value: formatLab(info.lab) },
|
||||
{ label: 'OkLab', value: formatOkLab(info.oklab) },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{formats.map((format) => (
|
||||
<div
|
||||
key={format.label}
|
||||
className="flex items-center justify-between p-3 bg-muted rounded-lg"
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs text-muted-foreground mb-1">{format.label}</div>
|
||||
<div className="font-mono text-sm">{format.value}</div>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => copyToClipboard(format.value, format.label)}
|
||||
aria-label={`Copy ${format.label} value`}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 pt-2 border-t">
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">Brightness</div>
|
||||
<div className="text-sm font-medium">{(info.brightness * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">Luminance</div>
|
||||
<div className="text-sm font-medium">{(info.luminance * 100).toFixed(1)}%</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">Type</div>
|
||||
<div className="text-sm font-medium">{info.is_light ? 'Light' : 'Dark'}</div>
|
||||
</div>
|
||||
{info.name && typeof info.name === 'string' && (
|
||||
<div className="space-y-1">
|
||||
<div className="text-xs text-muted-foreground">Named</div>
|
||||
<div className="text-sm font-medium">{info.name}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
56
components/color/ColorPicker.tsx
Normal file
56
components/color/ColorPicker.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import { HexColorPicker } from 'react-colorful';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { hexToRgb } from '@/lib/color/utils/color';
|
||||
|
||||
interface ColorPickerProps {
|
||||
color: string;
|
||||
onChange: (color: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ColorPicker({ color, onChange, className }: ColorPickerProps) {
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
// Allow partial input while typing
|
||||
onChange(value);
|
||||
};
|
||||
|
||||
// Determine text color based on background brightness
|
||||
const getContrastColor = (hex: string) => {
|
||||
const rgb = hexToRgb(hex);
|
||||
if (!rgb) return 'inherit';
|
||||
const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
||||
return brightness > 128 ? '#000000' : '#ffffff';
|
||||
};
|
||||
|
||||
const textColor = getContrastColor(color);
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center justify-center space-y-4', className)}>
|
||||
<div className="w-full max-w-[200px] space-y-4">
|
||||
<HexColorPicker color={color} onChange={onChange} className="!w-full" />
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="color-input" className="text-sm font-medium">
|
||||
Color Value
|
||||
</label>
|
||||
<Input
|
||||
id="color-input"
|
||||
type="text"
|
||||
value={color}
|
||||
onChange={handleInputChange}
|
||||
placeholder="#ff0099 or rgb(255, 0, 153)"
|
||||
className="font-mono transition-colors duration-200"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
color: textColor,
|
||||
borderColor: textColor === '#000000' ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.2)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
components/color/ColorSwatch.tsx
Normal file
66
components/color/ColorSwatch.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface ColorSwatchProps {
|
||||
color: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
showLabel?: boolean;
|
||||
onClick?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ColorSwatch({
|
||||
color,
|
||||
size = 'md',
|
||||
showLabel = true,
|
||||
onClick,
|
||||
className,
|
||||
}: ColorSwatchProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'h-12 w-12',
|
||||
md: 'h-16 w-16',
|
||||
lg: 'h-24 w-24',
|
||||
};
|
||||
|
||||
const handleCopy = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(color);
|
||||
setCopied(true);
|
||||
toast.success(`Copied ${color}`);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center gap-2', className)}>
|
||||
<button
|
||||
className={cn(
|
||||
'relative rounded-lg ring-2 ring-border transition-all duration-200',
|
||||
'hover:scale-110 hover:ring-primary hover:shadow-lg',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||
'group active:scale-95',
|
||||
sizeClasses[size]
|
||||
)}
|
||||
style={{ backgroundColor: color }}
|
||||
onClick={onClick || handleCopy}
|
||||
aria-label={`Color ${color}`}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200 bg-black/30 rounded-lg backdrop-blur-sm">
|
||||
{copied ? (
|
||||
<Check className="h-5 w-5 text-white animate-scale-in" />
|
||||
) : (
|
||||
<Copy className="h-5 w-5 text-white" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
{showLabel && (
|
||||
<span className="text-xs font-mono text-muted-foreground">{color}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
197
components/color/ExportMenu.tsx
Normal file
197
components/color/ExportMenu.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Download, Copy, Check, Loader2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
exportAsCSS,
|
||||
exportAsSCSS,
|
||||
exportAsTailwind,
|
||||
exportAsJSON,
|
||||
exportAsJavaScript,
|
||||
downloadAsFile,
|
||||
type ExportColor,
|
||||
} from '@/lib/color/utils/export';
|
||||
import { colorAPI } from '@/lib/color/api/client';
|
||||
|
||||
interface ExportMenuProps {
|
||||
colors: string[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
|
||||
type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';
|
||||
|
||||
export function ExportMenu({ colors, className }: ExportMenuProps) {
|
||||
const [format, setFormat] = useState<ExportFormat>('css');
|
||||
const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
|
||||
const [convertedColors, setConvertedColors] = useState<string[]>(colors);
|
||||
const [isConverting, setIsConverting] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function convertColors() {
|
||||
if (colorSpace === 'hex') {
|
||||
setConvertedColors(colors);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConverting(true);
|
||||
try {
|
||||
const response = await colorAPI.convertFormat({
|
||||
colors,
|
||||
format: colorSpace,
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
setConvertedColors(response.data.conversions.map(c => c.output));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to convert colors:', error);
|
||||
toast.error('Failed to convert colors to selected space');
|
||||
} finally {
|
||||
setIsConverting(false);
|
||||
}
|
||||
}
|
||||
|
||||
convertColors();
|
||||
}, [colors, colorSpace]);
|
||||
|
||||
const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));
|
||||
|
||||
const getExportContent = (): string => {
|
||||
switch (format) {
|
||||
case 'css':
|
||||
return exportAsCSS(exportColors);
|
||||
case 'scss':
|
||||
return exportAsSCSS(exportColors);
|
||||
case 'tailwind':
|
||||
return exportAsTailwind(exportColors);
|
||||
case 'json':
|
||||
return exportAsJSON(exportColors);
|
||||
case 'javascript':
|
||||
return exportAsJavaScript(exportColors);
|
||||
}
|
||||
};
|
||||
|
||||
const getFileExtension = (): string => {
|
||||
switch (format) {
|
||||
case 'css':
|
||||
return 'css';
|
||||
case 'scss':
|
||||
return 'scss';
|
||||
case 'tailwind':
|
||||
return 'js';
|
||||
case 'json':
|
||||
return 'json';
|
||||
case 'javascript':
|
||||
return 'js';
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = () => {
|
||||
const content = getExportContent();
|
||||
navigator.clipboard.writeText(content);
|
||||
setCopied(true);
|
||||
toast.success('Copied to clipboard!');
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
const content = getExportContent();
|
||||
const extension = getFileExtension();
|
||||
downloadAsFile(content, `palette.${extension}`, 'text/plain');
|
||||
toast.success('Downloaded!');
|
||||
};
|
||||
|
||||
if (colors.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Export Format</h3>
|
||||
<Select
|
||||
value={format}
|
||||
onValueChange={(value) => setFormat(value as ExportFormat)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="css">CSS Variables</SelectItem>
|
||||
<SelectItem value="scss">SCSS Variables</SelectItem>
|
||||
<SelectItem value="tailwind">Tailwind Config</SelectItem>
|
||||
<SelectItem value="json">JSON</SelectItem>
|
||||
<SelectItem value="javascript">JavaScript Array</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium">Color Space</h3>
|
||||
<Select
|
||||
value={colorSpace}
|
||||
onValueChange={(value) => setColorSpace(value as ColorSpace)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select space" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="hex">Hex</SelectItem>
|
||||
<SelectItem value="rgb">RGB</SelectItem>
|
||||
<SelectItem value="hsl">HSL</SelectItem>
|
||||
<SelectItem value="lab">Lab</SelectItem>
|
||||
<SelectItem value="oklab">OkLab</SelectItem>
|
||||
<SelectItem value="lch">LCH</SelectItem>
|
||||
<SelectItem value="oklch">OkLCH</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-muted rounded-lg relative min-h-[100px]">
|
||||
{isConverting ? (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : null}
|
||||
<pre className="text-xs overflow-x-auto">
|
||||
<code>{getExportContent()}</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-col md:flex-row">
|
||||
<Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-4 w-4 mr-2" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
Copy
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Download
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
236
components/color/ManipulationPanel.tsx
Normal file
236
components/color/ManipulationPanel.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Slider } from '@/components/ui/slider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
useLighten,
|
||||
useDarken,
|
||||
useSaturate,
|
||||
useDesaturate,
|
||||
useRotate,
|
||||
useComplement
|
||||
} from '@/lib/color/api/queries';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface ManipulationPanelProps {
|
||||
color: string;
|
||||
onColorChange: (color: string) => void;
|
||||
}
|
||||
|
||||
export function ManipulationPanel({ color, onColorChange }: ManipulationPanelProps) {
|
||||
const [lightenAmount, setLightenAmount] = useState(0.2);
|
||||
const [darkenAmount, setDarkenAmount] = useState(0.2);
|
||||
const [saturateAmount, setSaturateAmount] = useState(0.2);
|
||||
const [desaturateAmount, setDesaturateAmount] = useState(0.2);
|
||||
const [rotateAmount, setRotateAmount] = useState(30);
|
||||
|
||||
const lightenMutation = useLighten();
|
||||
const darkenMutation = useDarken();
|
||||
const saturateMutation = useSaturate();
|
||||
const desaturateMutation = useDesaturate();
|
||||
const rotateMutation = useRotate();
|
||||
const complementMutation = useComplement();
|
||||
|
||||
const handleLighten = async () => {
|
||||
try {
|
||||
const result = await lightenMutation.mutateAsync({
|
||||
colors: [color],
|
||||
amount: lightenAmount,
|
||||
});
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success(`Lightened by ${(lightenAmount * 100).toFixed(0)}%`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to lighten color');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDarken = async () => {
|
||||
try {
|
||||
const result = await darkenMutation.mutateAsync({
|
||||
colors: [color],
|
||||
amount: darkenAmount,
|
||||
});
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success(`Darkened by ${(darkenAmount * 100).toFixed(0)}%`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to darken color');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaturate = async () => {
|
||||
try {
|
||||
const result = await saturateMutation.mutateAsync({
|
||||
colors: [color],
|
||||
amount: saturateAmount,
|
||||
});
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success(`Saturated by ${(saturateAmount * 100).toFixed(0)}%`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to saturate color');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDesaturate = async () => {
|
||||
try {
|
||||
const result = await desaturateMutation.mutateAsync({
|
||||
colors: [color],
|
||||
amount: desaturateAmount,
|
||||
});
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success(`Desaturated by ${(desaturateAmount * 100).toFixed(0)}%`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to desaturate color');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRotate = async () => {
|
||||
try {
|
||||
const result = await rotateMutation.mutateAsync({
|
||||
colors: [color],
|
||||
amount: rotateAmount,
|
||||
});
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success(`Rotated hue by ${rotateAmount}°`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to rotate hue');
|
||||
}
|
||||
};
|
||||
|
||||
const handleComplement = async () => {
|
||||
try {
|
||||
const result = await complementMutation.mutateAsync([color]);
|
||||
if (result.colors[0]) {
|
||||
onColorChange(result.colors[0].output);
|
||||
toast.success('Generated complementary color');
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to generate complement');
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading =
|
||||
lightenMutation.isPending ||
|
||||
darkenMutation.isPending ||
|
||||
saturateMutation.isPending ||
|
||||
desaturateMutation.isPending ||
|
||||
rotateMutation.isPending ||
|
||||
complementMutation.isPending;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Lighten */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">Lighten</label>
|
||||
<span className="text-xs text-muted-foreground">{(lightenAmount * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={[lightenAmount]}
|
||||
onValueChange={(vals) => setLightenAmount(vals[0])}
|
||||
/>
|
||||
<Button onClick={handleLighten} disabled={isLoading} className="w-full">
|
||||
Apply Lighten
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Darken */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">Darken</label>
|
||||
<span className="text-xs text-muted-foreground">{(darkenAmount * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={[darkenAmount]}
|
||||
onValueChange={(vals) => setDarkenAmount(vals[0])}
|
||||
/>
|
||||
<Button onClick={handleDarken} disabled={isLoading} className="w-full">
|
||||
Apply Darken
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Saturate */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">Saturate</label>
|
||||
<span className="text-xs text-muted-foreground">{(saturateAmount * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={[saturateAmount]}
|
||||
onValueChange={(vals) => setSaturateAmount(vals[0])}
|
||||
/>
|
||||
<Button onClick={handleSaturate} disabled={isLoading} className="w-full">
|
||||
Apply Saturate
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Desaturate */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">Desaturate</label>
|
||||
<span className="text-xs text-muted-foreground">{(desaturateAmount * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={[desaturateAmount]}
|
||||
onValueChange={(vals) => setDesaturateAmount(vals[0])}
|
||||
/>
|
||||
<Button onClick={handleDesaturate} disabled={isLoading} className="w-full">
|
||||
Apply Desaturate
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Rotate Hue */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium">Rotate Hue</label>
|
||||
<span className="text-xs text-muted-foreground">{rotateAmount}°</span>
|
||||
</div>
|
||||
<Slider
|
||||
min={-180}
|
||||
max={180}
|
||||
step={5}
|
||||
value={[rotateAmount]}
|
||||
onValueChange={(vals) => setRotateAmount(vals[0])}
|
||||
/>
|
||||
<Button onClick={handleRotate} disabled={isLoading} className="w-full">
|
||||
Apply Rotation
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="pt-4 border-t space-y-2">
|
||||
<h3 className="text-sm font-medium mb-3">Quick Actions</h3>
|
||||
<Button
|
||||
onClick={handleComplement}
|
||||
disabled={isLoading}
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
>
|
||||
Get Complementary Color
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
components/color/PaletteGrid.tsx
Normal file
37
components/color/PaletteGrid.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
'use client';
|
||||
|
||||
import { ColorSwatch } from './ColorSwatch';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
interface PaletteGridProps {
|
||||
colors: string[];
|
||||
onColorClick?: (color: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function PaletteGrid({ colors, onColorClick, className }: PaletteGridProps) {
|
||||
if (colors.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No colors in palette yet
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{colors.map((color, index) => (
|
||||
<ColorSwatch
|
||||
key={`${color}-${index}`}
|
||||
color={color}
|
||||
onClick={onColorClick ? () => onColorClick(color) : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user