Some checks failed
Deploy to Cloudflare Workers / deploy (push) Has been cancelled
34 lines
908 B
TypeScript
34 lines
908 B
TypeScript
"use client";
|
|
|
|
import { TEAM_ICON_OPTIONS } from "@/components/teams/TeamIcon";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function TeamIconPicker({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: string;
|
|
onChange: (icon: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
{TEAM_ICON_OPTIONS.map(({ id, label, Icon }) => (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
title={label}
|
|
onClick={() => onChange(id)}
|
|
className={cn(
|
|
"flex h-10 w-10 items-center justify-center rounded-lg border transition-colors",
|
|
value === id
|
|
? "border-cyan-400/50 bg-cyan-500/20 text-cyan-400"
|
|
: "border-white/10 bg-white/5 text-[var(--color-muted)] hover:border-white/20"
|
|
)}
|
|
>
|
|
<Icon className="h-5 w-5" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|