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.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
// frontend/components/proactive/ProactiveCard.tsx — 능동 카드 한 장
|
|
"use client";
|
|
import type { CSSProperties } from "react";
|
|
import { Icon } from "@/components/Icon";
|
|
import type { IconName } from "@/components/icons/paths";
|
|
import type { ProactiveCard as ProactiveCardT } from "@/lib/types";
|
|
|
|
export function ProactiveCard({
|
|
card,
|
|
onAccept,
|
|
onDismiss,
|
|
}: {
|
|
card: ProactiveCardT;
|
|
onAccept: (id: string) => void;
|
|
onDismiss: (id: string) => void;
|
|
}) {
|
|
const style = { "--tone": `var(--${card.tone})` } as CSSProperties;
|
|
return (
|
|
<div className="pc" style={style}>
|
|
<span className="pc-ic">
|
|
<Icon name={card.icon as IconName} />
|
|
</span>
|
|
<div className="pc-body">
|
|
<div className="pc-title">{card.title}</div>
|
|
<div className="pc-why">{card.why}</div>
|
|
</div>
|
|
<div className="pc-acts">
|
|
{card.cta && (
|
|
<button className="pc-ok" onClick={() => onAccept(card.id)}>
|
|
{card.cta}
|
|
</button>
|
|
)}
|
|
<button className="pc-x" aria-label="이 제안 닫기" onClick={() => onDismiss(card.id)}>
|
|
<Icon name="x" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|