723 lines
29 KiB
TypeScript
723 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useMemo } from "react";
|
|
import ToolLayout from "@/components/ToolLayout";
|
|
|
|
interface ColorStop {
|
|
id: string;
|
|
color: string;
|
|
stop: number;
|
|
}
|
|
|
|
type GradientType = "linear" | "radial";
|
|
|
|
interface Preset {
|
|
name: string;
|
|
type: GradientType;
|
|
angle?: number;
|
|
shape?: "circle" | "ellipse";
|
|
position?: string;
|
|
stops: { color: string; stop: number }[];
|
|
}
|
|
|
|
const PRESETS: Preset[] = [
|
|
{
|
|
name: "Ocean Blue",
|
|
type: "linear",
|
|
angle: 135,
|
|
stops: [
|
|
{ color: "#2563eb", stop: 0 },
|
|
{ color: "#06b6d4", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Sunset Glow",
|
|
type: "linear",
|
|
angle: 135,
|
|
stops: [
|
|
{ color: "#f97316", stop: 0 },
|
|
{ color: "#ec4899", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Purple Haze",
|
|
type: "linear",
|
|
angle: 135,
|
|
stops: [
|
|
{ color: "#6366f1", stop: 0 },
|
|
{ color: "#a855f7", stop: 50 },
|
|
{ color: "#ec4899", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Emerald Forest",
|
|
type: "linear",
|
|
angle: 135,
|
|
stops: [
|
|
{ color: "#059669", stop: 0 },
|
|
{ color: "#10b981", stop: 50 },
|
|
{ color: "#6ee7b7", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Neon Cyber",
|
|
type: "linear",
|
|
angle: 90,
|
|
stops: [
|
|
{ color: "#00f2fe", stop: 0 },
|
|
{ color: "#4facfe", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Flame",
|
|
type: "linear",
|
|
angle: 45,
|
|
stops: [
|
|
{ color: "#f12711", stop: 0 },
|
|
{ color: "#f5af19", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Radial Glow",
|
|
type: "radial",
|
|
shape: "circle",
|
|
position: "center",
|
|
stops: [
|
|
{ color: "#3b82f6", stop: 0 },
|
|
{ color: "#1e1b4b", stop: 100 },
|
|
],
|
|
},
|
|
{
|
|
name: "Midnight Aura",
|
|
type: "radial",
|
|
shape: "circle",
|
|
position: "center",
|
|
stops: [
|
|
{ color: "#8b5cf6", stop: 0 },
|
|
{ color: "#0f172a", stop: 100 },
|
|
],
|
|
},
|
|
];
|
|
|
|
const LINEAR_DIRECTIONS = [
|
|
{ label: "→ Right", angle: 90, cssDir: "to right" },
|
|
{ label: "← Left", angle: 270, cssDir: "to left" },
|
|
{ label: "↓ Bottom", angle: 180, cssDir: "to bottom" },
|
|
{ label: "↑ Top", angle: 0, cssDir: "to top" },
|
|
{ label: "↗ Top Right", angle: 45, cssDir: "to top right" },
|
|
{ label: "↘ Bottom Right", angle: 135, cssDir: "to bottom right" },
|
|
{ label: "↙ Bottom Left", angle: 225, cssDir: "to bottom left" },
|
|
{ label: "↖ Top Left", angle: 315, cssDir: "to top left" },
|
|
];
|
|
|
|
const RADIAL_POSITIONS = [
|
|
{ label: "Center", value: "center" },
|
|
{ label: "Top", value: "top center" },
|
|
{ label: "Bottom", value: "bottom center" },
|
|
{ label: "Left", value: "center left" },
|
|
{ label: "Right", value: "center right" },
|
|
{ label: "Top Left", value: "top left" },
|
|
{ label: "Top Right", value: "top right" },
|
|
{ label: "Bottom Left", value: "bottom left" },
|
|
{ label: "Bottom Right", value: "bottom right" },
|
|
];
|
|
|
|
export default function CssGradientGeneratorPage() {
|
|
const [gradientType, setGradientType] = useState<GradientType>("linear");
|
|
const [angle, setAngle] = useState<number>(135);
|
|
const [radialShape, setRadialShape] = useState<"circle" | "ellipse">("circle");
|
|
const [radialPosition, setRadialPosition] = useState<string>("center");
|
|
|
|
const [colorStops, setColorStops] = useState<ColorStop[]>([
|
|
{ id: "1", color: "#3b82f6", stop: 0 },
|
|
{ id: "2", color: "#8b5cf6", stop: 100 },
|
|
]);
|
|
|
|
const [copied, setCopied] = useState<boolean>(false);
|
|
const [previewText, setPreviewText] = useState<boolean>(true);
|
|
const [codeFormat, setCodeFormat] = useState<"standard" | "full" | "tailwind">("standard");
|
|
|
|
// Sort stops for rendering CSS
|
|
const sortedStops = useMemo(() => {
|
|
return [...colorStops].sort((a, b) => a.stop - b.stop);
|
|
}, [colorStops]);
|
|
|
|
// Construct CSS gradient value
|
|
const gradientValue = useMemo(() => {
|
|
const stopsString = sortedStops
|
|
.map((s) => `${s.color} ${s.stop}%`)
|
|
.join(", ");
|
|
|
|
if (gradientType === "linear") {
|
|
return `linear-gradient(${angle}deg, ${stopsString})`;
|
|
} else {
|
|
return `radial-gradient(${radialShape} at ${radialPosition}, ${stopsString})`;
|
|
}
|
|
}, [gradientType, angle, radialShape, radialPosition, sortedStops]);
|
|
|
|
// Output CSS code block
|
|
const generatedCode = useMemo(() => {
|
|
const fallbackColor = sortedStops[0]?.color || "#3b82f6";
|
|
|
|
if (codeFormat === "tailwind") {
|
|
return `className="bg-[${gradientValue}]"`;
|
|
}
|
|
|
|
if (codeFormat === "full") {
|
|
return `/* Fallback for older browsers */\nbackground-color: ${fallbackColor};\n\n/* Modern CSS Gradient */\nbackground: ${gradientValue};`;
|
|
}
|
|
|
|
return `background: ${gradientValue};`;
|
|
}, [gradientValue, sortedStops, codeFormat]);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(generatedCode);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch {
|
|
// Fallback
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = generatedCode;
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
document.execCommand("copy");
|
|
document.body.removeChild(textArea);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
};
|
|
|
|
const updateStopColor = (id: string, newColor: string) => {
|
|
setColorStops((prev) =>
|
|
prev.map((stop) => (stop.id === id ? { ...stop, color: newColor } : stop))
|
|
);
|
|
};
|
|
|
|
const updateStopPosition = (id: string, newStop: number) => {
|
|
const clamped = Math.max(0, Math.min(100, isNaN(newStop) ? 0 : newStop));
|
|
setColorStops((prev) =>
|
|
prev.map((stop) => (stop.id === id ? { ...stop, stop: clamped } : stop))
|
|
);
|
|
};
|
|
|
|
const addColorStop = () => {
|
|
if (colorStops.length >= 6) return;
|
|
|
|
// Pick a midpoint or random color
|
|
const newId = Date.now().toString();
|
|
if (colorStops.length === 2) {
|
|
// Add a nice middle color
|
|
const middleColor = "#ec4899";
|
|
setColorStops([
|
|
colorStops[0],
|
|
{ id: newId, color: middleColor, stop: 50 },
|
|
colorStops[1],
|
|
]);
|
|
} else {
|
|
const lastStop = colorStops[colorStops.length - 1];
|
|
const secondLast = colorStops[colorStops.length - 2];
|
|
const midPosition = Math.round((lastStop.stop + (secondLast?.stop ?? 0)) / 2);
|
|
setColorStops((prev) => [
|
|
...prev,
|
|
{ id: newId, color: "#10b981", stop: midPosition },
|
|
]);
|
|
}
|
|
};
|
|
|
|
const removeColorStop = (id: string) => {
|
|
if (colorStops.length <= 2) return;
|
|
setColorStops((prev) => prev.filter((stop) => stop.id !== id));
|
|
};
|
|
|
|
const reverseColors = () => {
|
|
setColorStops((prev) => {
|
|
const reversed = [...prev].reverse();
|
|
return reversed.map((stop, idx) => ({
|
|
...stop,
|
|
stop: prev[idx].stop,
|
|
}));
|
|
});
|
|
};
|
|
|
|
const generateRandomGradient = () => {
|
|
const randomHex = () =>
|
|
"#" +
|
|
Math.floor(Math.random() * 16777215)
|
|
.toString(16)
|
|
.padStart(6, "0");
|
|
const count = colorStops.length;
|
|
const newStops = colorStops.map((stop, idx) => ({
|
|
...stop,
|
|
color: randomHex(),
|
|
stop: Math.round((idx / (count - 1)) * 100),
|
|
}));
|
|
setColorStops(newStops);
|
|
if (gradientType === "linear") {
|
|
setAngle(Math.floor(Math.random() * 360));
|
|
}
|
|
};
|
|
|
|
const applyPreset = (preset: Preset) => {
|
|
setGradientType(preset.type);
|
|
if (preset.angle !== undefined) setAngle(preset.angle);
|
|
if (preset.shape) setRadialShape(preset.shape);
|
|
if (preset.position) setRadialPosition(preset.position);
|
|
setColorStops(
|
|
preset.stops.map((s, idx) => ({
|
|
id: (idx + 1).toString(),
|
|
color: s.color,
|
|
stop: s.stop,
|
|
}))
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ToolLayout
|
|
title="CSS Gradient Generator"
|
|
description="Create beautiful linear and radial CSS gradients visually, customize color stops, adjust angles, and copy clean CSS code instantly."
|
|
>
|
|
<div className="space-y-8">
|
|
{/* Live Preview Area */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Live Preview
|
|
</h2>
|
|
<div className="flex items-center gap-3">
|
|
<label className="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={previewText}
|
|
onChange={(e) => setPreviewText(e.target.checked)}
|
|
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
|
/>
|
|
Show Text Overlay
|
|
</label>
|
|
<button
|
|
type="button"
|
|
onClick={generateRandomGradient}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
|
title="Generate Random Gradient"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
|
/>
|
|
</svg>
|
|
Randomize
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="relative w-full h-64 sm:h-72 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-inner flex items-center justify-center p-6 transition-all duration-300 overflow-hidden"
|
|
style={{ background: gradientValue }}
|
|
>
|
|
{previewText && (
|
|
<div className="bg-black/30 backdrop-blur-md text-white rounded-xl p-5 max-w-md text-center shadow-lg border border-white/10 transition-all">
|
|
<h3 className="text-xl sm:text-2xl font-bold tracking-tight mb-1 drop-shadow-sm">
|
|
CSS Gradient Preview
|
|
</h3>
|
|
<p className="text-xs sm:text-sm text-gray-100/90 font-mono">
|
|
{gradientType === "linear" ? `${angle}° Linear` : `Radial ${radialShape}`}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Presets Gallery */}
|
|
<div className="space-y-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Quick Presets
|
|
</h2>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-8 gap-2.5">
|
|
{PRESETS.map((preset) => {
|
|
const bgString =
|
|
preset.type === "linear"
|
|
? `linear-gradient(${preset.angle}deg, ${preset.stops.map((s) => `${s.color} ${s.stop}%`).join(", ")})`
|
|
: `radial-gradient(${preset.shape} at ${preset.position}, ${preset.stops.map((s) => `${s.color} ${s.stop}%`).join(", ")})`;
|
|
return (
|
|
<button
|
|
key={preset.name}
|
|
type="button"
|
|
onClick={() => applyPreset(preset)}
|
|
className="group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-500 bg-white dark:bg-gray-800 transition-all hover:scale-[1.03] text-left"
|
|
>
|
|
<div
|
|
className="w-full h-12 rounded-lg shadow-sm"
|
|
style={{ background: bgString }}
|
|
/>
|
|
<span className="text-[11px] font-medium text-gray-700 dark:text-gray-300 truncate w-full text-center">
|
|
{preset.name}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Editor Controls Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
{/* Left Column: Type & Direction Settings */}
|
|
<div className="lg:col-span-5 space-y-6">
|
|
{/* Gradient Type */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Gradient Type
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setGradientType("linear")}
|
|
className={`py-2.5 px-4 text-sm font-medium rounded-lg border transition-all ${
|
|
gradientType === "linear"
|
|
? "bg-blue-600 border-blue-600 text-white shadow-sm"
|
|
: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
|
}`}
|
|
>
|
|
Linear
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setGradientType("radial")}
|
|
className={`py-2.5 px-4 text-sm font-medium rounded-lg border transition-all ${
|
|
gradientType === "radial"
|
|
? "bg-blue-600 border-blue-600 text-white shadow-sm"
|
|
: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50"
|
|
}`}
|
|
>
|
|
Radial
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Linear Direction Options */}
|
|
{gradientType === "linear" && (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-center">
|
|
<label className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Angle: <span className="font-mono text-blue-600 dark:text-blue-400">{angle}°</span>
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="360"
|
|
value={angle}
|
|
onChange={(e) => setAngle(Number(e.target.value) % 361)}
|
|
className="w-20 px-2 py-1 text-sm font-mono text-right rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="360"
|
|
value={angle}
|
|
onChange={(e) => setAngle(Number(e.target.value))}
|
|
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
|
|
/>
|
|
</div>
|
|
|
|
{/* Quick Direction Selector */}
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Quick Directions
|
|
</label>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{LINEAR_DIRECTIONS.map((dir) => (
|
|
<button
|
|
key={dir.angle}
|
|
type="button"
|
|
onClick={() => setAngle(dir.angle)}
|
|
className={`py-2 px-1.5 text-xs font-medium rounded-lg border text-center transition-all ${
|
|
angle === dir.angle
|
|
? "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-700 dark:text-blue-300 font-semibold"
|
|
: "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
{dir.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Radial Options */}
|
|
{gradientType === "radial" && (
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Radial Shape
|
|
</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setRadialShape("circle")}
|
|
className={`py-2 px-3 text-sm font-medium rounded-lg border transition-all ${
|
|
radialShape === "circle"
|
|
? "bg-blue-600 border-blue-600 text-white"
|
|
: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
Circle
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setRadialShape("ellipse")}
|
|
className={`py-2 px-3 text-sm font-medium rounded-lg border transition-all ${
|
|
radialShape === "ellipse"
|
|
? "bg-blue-600 border-blue-600 text-white"
|
|
: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
}`}
|
|
>
|
|
Ellipse
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
Radial Position
|
|
</label>
|
|
<select
|
|
value={radialPosition}
|
|
onChange={(e) => setRadialPosition(e.target.value)}
|
|
className="w-full p-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
>
|
|
{RADIAL_POSITIONS.map((pos) => (
|
|
<option key={pos.value} value={pos.value}>
|
|
{pos.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right Column: Color Stops */}
|
|
<div className="lg:col-span-7 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
Color Stops ({colorStops.length})
|
|
</h3>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
Customize start, middle, and end colors with position stops.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={reverseColors}
|
|
className="px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors flex items-center gap-1"
|
|
title="Reverse Color Order"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
|
|
/>
|
|
</svg>
|
|
Swap
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={addColorStop}
|
|
disabled={colorStops.length >= 6}
|
|
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors flex items-center gap-1 ${
|
|
colorStops.length >= 6
|
|
? "bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600"
|
|
: "bg-blue-600 hover:bg-blue-700 text-white shadow-sm"
|
|
}`}
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Add Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stops List */}
|
|
<div className="space-y-3">
|
|
{colorStops.map((stop, index) => {
|
|
const label =
|
|
index === 0
|
|
? "Start Color"
|
|
: index === colorStops.length - 1
|
|
? "End Color"
|
|
: `Stop ${index + 1} (Middle)`;
|
|
|
|
return (
|
|
<div
|
|
key={stop.id}
|
|
className="p-3.5 rounded-xl border border-gray-200 dark:border-gray-700/80 bg-gray-50/50 dark:bg-gray-800/50 space-y-2.5 transition-all"
|
|
>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: stop.color }} />
|
|
<span className="text-xs font-semibold text-gray-700 dark:text-gray-300">
|
|
{label}
|
|
</span>
|
|
</div>
|
|
|
|
{colorStops.length > 2 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => removeColorStop(stop.id)}
|
|
className="text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors p-1 rounded"
|
|
title="Remove Stop"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-12 gap-3 items-center">
|
|
{/* Color Picker and Hex Input */}
|
|
<div className="sm:col-span-5 flex items-center gap-2">
|
|
<div className="relative flex-shrink-0 w-9 h-9 rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden shadow-inner cursor-pointer">
|
|
<input
|
|
type="color"
|
|
value={stop.color}
|
|
onChange={(e) => updateStopColor(stop.id, e.target.value)}
|
|
className="absolute -top-2 -left-2 w-14 h-14 cursor-pointer border-0"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={stop.color}
|
|
onChange={(e) => updateStopColor(stop.id, e.target.value)}
|
|
className="w-full px-2.5 py-1.5 text-xs font-mono rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none uppercase"
|
|
placeholder="#000000"
|
|
/>
|
|
</div>
|
|
|
|
{/* Position Slider and Input */}
|
|
<div className="sm:col-span-7 flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={stop.stop}
|
|
onChange={(e) => updateStopPosition(stop.id, Number(e.target.value))}
|
|
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-blue-600"
|
|
/>
|
|
<div className="flex items-center gap-1">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
value={stop.stop}
|
|
onChange={(e) => updateStopPosition(stop.id, Number(e.target.value))}
|
|
className="w-14 px-1.5 py-1 text-xs font-mono text-right rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
|
/>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400 font-mono">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Generated CSS Output Block */}
|
|
<div className="space-y-3 pt-4 border-t border-gray-200 dark:border-gray-800">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div className="flex items-center gap-3">
|
|
<h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Generated CSS
|
|
</h2>
|
|
<div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 p-0.5 rounded-lg text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => setCodeFormat("standard")}
|
|
className={`px-2.5 py-1 rounded-md transition-colors ${
|
|
codeFormat === "standard"
|
|
? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-medium shadow-xs"
|
|
: "text-gray-600 dark:text-gray-400 hover:text-gray-900"
|
|
}`}
|
|
>
|
|
Standard
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCodeFormat("full")}
|
|
className={`px-2.5 py-1 rounded-md transition-colors ${
|
|
codeFormat === "full"
|
|
? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-medium shadow-xs"
|
|
: "text-gray-600 dark:text-gray-400 hover:text-gray-900"
|
|
}`}
|
|
>
|
|
Full CSS
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCodeFormat("tailwind")}
|
|
className={`px-2.5 py-1 rounded-md transition-colors ${
|
|
codeFormat === "tailwind"
|
|
? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-medium shadow-xs"
|
|
: "text-gray-600 dark:text-gray-400 hover:text-gray-900"
|
|
}`}
|
|
>
|
|
Tailwind
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={handleCopy}
|
|
className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium text-sm transition-colors shadow-sm cursor-pointer"
|
|
>
|
|
{copied ? (
|
|
<>
|
|
<svg className="w-4 h-4 text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Copied!
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
|
|
/>
|
|
</svg>
|
|
Copy CSS
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="relative group">
|
|
<pre className="w-full p-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-900 text-gray-100 font-mono text-sm overflow-x-auto leading-relaxed shadow-sm">
|
|
<code>{generatedCode}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ToolLayout>
|
|
);
|
|
}
|