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.
25 lines
693 B
TypeScript
25 lines
693 B
TypeScript
// frontend/components/SegmentToggle.tsx — 칸반/리스트(캘린더는 post-MVP) (Phase 3 사용)
|
|
import { Icon } from "./Icon";
|
|
import type { IconName } from "./icons/paths";
|
|
export type SegOption = { id: string; label: string; icon?: IconName };
|
|
export function SegmentToggle({
|
|
options,
|
|
value,
|
|
onChange,
|
|
}: {
|
|
options: SegOption[];
|
|
value: string;
|
|
onChange: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="seg" role="tablist">
|
|
{options.map((o) => (
|
|
<button key={o.id} role="tab" aria-selected={value === o.id} onClick={() => onChange(o.id)}>
|
|
{o.icon && <Icon name={o.icon} />}
|
|
{o.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|