48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import type { AssetSourceType } from "@/features/studio/types/studio";
|
|
|
|
interface SourceCardProps {
|
|
source: {
|
|
key: AssetSourceType;
|
|
title: string;
|
|
description: string;
|
|
};
|
|
isSelected: boolean;
|
|
onToggle: (source: AssetSourceType) => void;
|
|
}
|
|
|
|
export function SourceCard({ source, isSelected, onToggle }: SourceCardProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onToggle(source.key)}
|
|
className={[
|
|
"relative w-full text-left p-5 rounded-2xl border-2 transition-all",
|
|
isSelected
|
|
? "border-violet-500 bg-status-good-bg/30 shadow-[3px_4px_12px_rgba(108,92,231,0.12)]"
|
|
: "border-neutral-20 bg-white shadow-[3px_4px_12px_rgba(0,0,0,0.06)] hover:border-status-good-border",
|
|
].join(" ")}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
{/* 체크박스 인디케이터 */}
|
|
<div className={[
|
|
"w-5 h-5 rounded border-2 shrink-0 flex items-center justify-center transition-all",
|
|
isSelected
|
|
? "border-violet-500 bg-violet-500"
|
|
: "border-neutral-40 bg-white",
|
|
].join(" ")}>
|
|
{isSelected && (
|
|
<svg width="10" height="10" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
|
<path d="M2 7L5.5 10.5L12 3.5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-semibold text-navy-900 mb-1 break-keep">{source.title}</h4>
|
|
<p className="text-sm text-neutral-60 break-keep">{source.description}</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|