You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
970 B
TypeScript
37 lines
970 B
TypeScript
// frontend/components/calendar/CalToggleList.tsx — 캘린더 카테고리 토글 목록
|
|
"use client";
|
|
import { Icon } from "@/components/Icon";
|
|
import type { Calendar } from "@/lib/calendar/types";
|
|
|
|
export function CalToggleList({
|
|
calendars,
|
|
calOn,
|
|
onToggle,
|
|
}: {
|
|
calendars: Calendar[];
|
|
calOn: Record<string, boolean>;
|
|
onToggle: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="cal-list">
|
|
{calendars.map((c) => {
|
|
const on = calOn[c.id] !== false;
|
|
return (
|
|
<button
|
|
key={c.id}
|
|
className={"cal-toggle" + (on ? "" : " off")}
|
|
onClick={() => onToggle(c.id)}
|
|
aria-pressed={on}
|
|
>
|
|
<span className="cbx" style={{ background: `var(--${c.tone})` }}>
|
|
<Icon name="tick" w={3} />
|
|
</span>
|
|
<span>{c.name}</span>
|
|
<span className="ct-n">{c.count}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|