60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import type { ReactNode } from "react";
|
||
|
||
type Props = {
|
||
title: string;
|
||
enabled: boolean;
|
||
onEnabledChange: (enabled: boolean) => void;
|
||
onClose: () => void;
|
||
children?: ReactNode;
|
||
showToggle?: boolean;
|
||
};
|
||
|
||
/** 침수흔적도 설정과 같은 제목·토글·닫기·본문 여백을 제공한다. */
|
||
export default function LayerSettingCard({
|
||
title,
|
||
enabled,
|
||
onEnabledChange,
|
||
onClose,
|
||
children,
|
||
showToggle = true,
|
||
}: Props) {
|
||
return (
|
||
<div className="w-full overflow-visible rounded-[6px] border border-border bg-background shadow-blur">
|
||
<div className="flex min-h-[28px] items-center justify-between border-b border-border px-2">
|
||
<span className="text-[1.15rem] font-semibold text-label">{title}</span>
|
||
<div className="flex shrink-0 items-center gap-2">
|
||
{showToggle ? (
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={enabled}
|
||
aria-label={`${title} 적용 여부`}
|
||
title={enabled ? `${title} 적용 중` : `${title} 미적용`}
|
||
className={`relative h-[16px] w-[28px] rounded-full border transition-colors ${enabled ? "border-primary bg-primary" : "border-[#94a3b8] bg-[#cbd5e1]"}`}
|
||
onClick={() => onEnabledChange(!enabled)}
|
||
>
|
||
<span
|
||
className={`absolute top-1/2 h-[12px] w-[12px] -translate-y-1/2 rounded-full bg-white shadow-sm transition-[left] ${enabled ? "left-[14px]" : "left-[2px]"}`}
|
||
/>
|
||
</button>
|
||
) : null}
|
||
<button
|
||
type="button"
|
||
aria-label={`${title} 설정 닫기`}
|
||
title="닫기"
|
||
className="grid h-[20px] w-[20px] place-items-center bg-transparent text-[1.3rem] leading-none text-muted-foreground hover:text-foreground"
|
||
onClick={onClose}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{children ? (
|
||
<div className="px-2 py-1 text-[1.15rem] text-label">{children}</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|