Import source: src/components/features/appearance-settings
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,235 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Check, Monitor, Moon, RotateCcw, Sparkles, Sun } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
useUiStore,
|
||||||
|
type AccentId,
|
||||||
|
type GlassLevel,
|
||||||
|
type RadiusScale,
|
||||||
|
} from "@/stores/ui-store";
|
||||||
|
|
||||||
|
const accents: Array<{ id: AccentId; label: string; swatch: string }> = [
|
||||||
|
{ id: "azure", label: "Azure", swatch: "hsl(224 88% 55%)" },
|
||||||
|
{ id: "violet", label: "Violet", swatch: "hsl(261 80% 60%)" },
|
||||||
|
{ id: "emerald", label: "Emerald", swatch: "hsl(158 72% 40%)" },
|
||||||
|
{ id: "sunset", label: "Sunset", swatch: "hsl(25 95% 53%)" },
|
||||||
|
{ id: "rose", label: "Rose", swatch: "hsl(346 85% 56%)" },
|
||||||
|
{ id: "cyan", label: "Cyan", swatch: "hsl(195 93% 45%)" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const glassLevels: Array<{ id: GlassLevel; label: string }> = [
|
||||||
|
{ id: "off", label: "Off" },
|
||||||
|
{ id: "subtle", label: "Subtle" },
|
||||||
|
{ id: "standard", label: "Standard" },
|
||||||
|
{ id: "heavy", label: "Heavy" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const radiusScales: Array<{ id: RadiusScale; label: string }> = [
|
||||||
|
{ id: "sharp", label: "Sharp" },
|
||||||
|
{ id: "rounded", label: "Rounded" },
|
||||||
|
{ id: "soft", label: "Soft" },
|
||||||
|
];
|
||||||
|
|
||||||
|
function Segmented<T extends string>({
|
||||||
|
options,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
ariaLabel,
|
||||||
|
}: {
|
||||||
|
options: Array<{ id: T; label: string; icon?: React.ReactNode }>;
|
||||||
|
value: T;
|
||||||
|
onChange: (value: T) => void;
|
||||||
|
ariaLabel: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
role="radiogroup"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
className="inline-flex flex-wrap gap-1 rounded-lg border border-border/70 bg-muted/50 p-1"
|
||||||
|
>
|
||||||
|
{options.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option.id}
|
||||||
|
type="button"
|
||||||
|
role="radio"
|
||||||
|
aria-checked={value === option.id}
|
||||||
|
onClick={() => onChange(option.id)}
|
||||||
|
className={cn(
|
||||||
|
"focus-ring inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-all duration-150",
|
||||||
|
value === option.id
|
||||||
|
? "bg-card font-medium text-primary shadow-panel ring-1 ring-primary/30"
|
||||||
|
: "text-muted-foreground hover:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{option.icon}
|
||||||
|
{option.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AppearanceSettings() {
|
||||||
|
const theme = useUiStore((state) => state.theme);
|
||||||
|
const setTheme = useUiStore((state) => state.setTheme);
|
||||||
|
const accent = useUiStore((state) => state.accent);
|
||||||
|
const setAccent = useUiStore((state) => state.setAccent);
|
||||||
|
const glass = useUiStore((state) => state.glass);
|
||||||
|
const setGlass = useUiStore((state) => state.setGlass);
|
||||||
|
const radius = useUiStore((state) => state.radius);
|
||||||
|
const setRadius = useUiStore((state) => state.setRadius);
|
||||||
|
const ambiance = useUiStore((state) => state.ambiance);
|
||||||
|
const setAmbiance = useUiStore((state) => state.setAmbiance);
|
||||||
|
const density = useUiStore((state) => state.density);
|
||||||
|
const setDensity = useUiStore((state) => state.setDensity);
|
||||||
|
const resetAppearance = useUiStore((state) => state.resetAppearance);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex-row items-start justify-between space-y-0">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Sparkles className="h-4 w-4 text-primary" />
|
||||||
|
Appearance
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Liquid-glass customization. Every choice applies instantly and is saved on this
|
||||||
|
device.
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button variant="ghost" size="sm" onClick={resetAppearance}>
|
||||||
|
<RotateCcw className="h-3.5 w-3.5" />
|
||||||
|
Reset
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="grid gap-6 lg:grid-cols-[1fr_280px]">
|
||||||
|
<div className="space-y-5">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">Theme</div>
|
||||||
|
<Segmented
|
||||||
|
ariaLabel="Theme"
|
||||||
|
value={theme}
|
||||||
|
onChange={setTheme}
|
||||||
|
options={[
|
||||||
|
{ id: "light", label: "Light", icon: <Sun className="h-3.5 w-3.5" /> },
|
||||||
|
{ id: "dark", label: "Dark", icon: <Moon className="h-3.5 w-3.5" /> },
|
||||||
|
{ id: "system", label: "System", icon: <Monitor className="h-3.5 w-3.5" /> },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">Accent color</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{accents.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setAccent(option.id)}
|
||||||
|
aria-label={`${option.label} accent`}
|
||||||
|
aria-pressed={accent === option.id}
|
||||||
|
className={cn(
|
||||||
|
"focus-ring flex h-9 w-9 items-center justify-center rounded-full transition-transform duration-150 hover:scale-110",
|
||||||
|
accent === option.id &&
|
||||||
|
"ring-2 ring-ring ring-offset-2 ring-offset-background",
|
||||||
|
)}
|
||||||
|
style={{ background: option.swatch }}
|
||||||
|
>
|
||||||
|
{accent === option.id ? <Check className="h-4 w-4 text-white" /> : null}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">Glass intensity</div>
|
||||||
|
<Segmented
|
||||||
|
ariaLabel="Glass intensity"
|
||||||
|
value={glass}
|
||||||
|
onChange={setGlass}
|
||||||
|
options={glassLevels}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Controls surface translucency and backdrop blur across the panel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">Corner radius</div>
|
||||||
|
<Segmented
|
||||||
|
ariaLabel="Corner radius"
|
||||||
|
value={radius}
|
||||||
|
onChange={setRadius}
|
||||||
|
options={radiusScales}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">Density</div>
|
||||||
|
<Segmented
|
||||||
|
ariaLabel="Density"
|
||||||
|
value={density}
|
||||||
|
onChange={setDensity}
|
||||||
|
options={[
|
||||||
|
{ id: "compact" as const, label: "Compact" },
|
||||||
|
{ id: "comfortable" as const, label: "Comfortable" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-border/70 bg-card/50 px-3 py-2.5">
|
||||||
|
<span>
|
||||||
|
<span className="block text-sm font-medium">Ambient background</span>
|
||||||
|
<span className="block text-xs text-muted-foreground">
|
||||||
|
Slow-drifting aurora, grid, and grain behind the interface.
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="switch"
|
||||||
|
aria-checked={ambiance}
|
||||||
|
aria-label="Ambient background"
|
||||||
|
onClick={() => setAmbiance(!ambiance)}
|
||||||
|
className={cn(
|
||||||
|
"focus-ring relative h-6 w-11 shrink-0 rounded-full transition-colors duration-200",
|
||||||
|
ambiance ? "bg-primary" : "bg-muted-foreground/30",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform duration-200",
|
||||||
|
ambiance ? "translate-x-[22px]" : "translate-x-0.5",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="text-sm font-medium">Live preview</div>
|
||||||
|
<div className="glass-panel space-y-3 rounded-lg p-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="font-display text-sm font-semibold">Preview surface</span>
|
||||||
|
<Badge variant="success">healthy</Badge>
|
||||||
|
</div>
|
||||||
|
<Progress value={64} />
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Glass, accent, and radius react in real time.
|
||||||
|
</p>
|
||||||
|
<Button className="w-full" size="sm">
|
||||||
|
Primary action
|
||||||
|
</Button>
|
||||||
|
<Button className="w-full" size="sm" variant="outline">
|
||||||
|
Secondary action
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user