79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { Check } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { ICON_KEYS, SWATCHES, type IconKey, type Swatch } from "@/shared/appearance";
|
|
import { AppIcon } from "./app-icon";
|
|
import { swatchStyle } from "./swatch";
|
|
import { tr } from "@/i18n/tr";
|
|
|
|
/** Renk seçici (radio grubu, klavye ile gezilebilir). */
|
|
export function SwatchPicker({
|
|
value,
|
|
onChange,
|
|
labelledBy,
|
|
}: {
|
|
value: Swatch;
|
|
onChange: (v: Swatch) => void;
|
|
labelledBy: string;
|
|
}) {
|
|
return (
|
|
<div role="radiogroup" aria-labelledby={labelledBy} className="flex flex-wrap gap-2">
|
|
{SWATCHES.map((s) => (
|
|
<button
|
|
key={s}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={value === s}
|
|
aria-label={tr.swatches[s]}
|
|
title={tr.swatches[s]}
|
|
onClick={() => onChange(s)}
|
|
style={swatchStyle(s)}
|
|
className="flex size-8 items-center justify-center rounded-full bg-(--swatch) text-background ring-offset-2 ring-offset-background outline-none focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:ring-2 aria-checked:ring-(--swatch)"
|
|
>
|
|
{value === s ? <Check className="size-4" /> : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** İkon seçici; seçili renkle önizler. */
|
|
export function IconPicker({
|
|
value,
|
|
color,
|
|
onChange,
|
|
labelledBy,
|
|
}: {
|
|
value: IconKey;
|
|
color: Swatch;
|
|
onChange: (v: IconKey) => void;
|
|
labelledBy: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
role="radiogroup"
|
|
aria-labelledby={labelledBy}
|
|
style={swatchStyle(color)}
|
|
className="grid max-h-44 grid-cols-8 gap-1 overflow-y-auto rounded-lg border p-1.5 sm:grid-cols-10"
|
|
>
|
|
{ICON_KEYS.map((key) => (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={value === key}
|
|
aria-label={key}
|
|
onClick={() => onChange(key)}
|
|
className={cn(
|
|
"flex aspect-square items-center justify-center rounded-md outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50",
|
|
"aria-checked:bg-(--swatch)/15 aria-checked:text-(--swatch) aria-checked:ring-1 aria-checked:ring-(--swatch)",
|
|
)}
|
|
>
|
|
<AppIcon name={key} className="size-4.5" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|