28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
import type { PosterMeta } from "@/lib/api";
|
|
|
|
/** bare=true면 카드 래핑 없이 내용만 (완료 화면 우측 정보 컬럼용) */
|
|
export default function MetadataCard({ meta, bare = false }: { meta: PosterMeta; bare?: boolean }) {
|
|
const body = (
|
|
<>
|
|
<p className="field-label" style={{ margin: 0 }}>메타태그</p>
|
|
<h3 style={{ margin: "0.25rem 0 0", fontSize: "var(--text-lg)", fontWeight: 700 }}>{meta.event_name}</h3>
|
|
<dl style={{
|
|
margin: "0.75rem 0 0", display: "grid", gridTemplateColumns: "64px 1fr",
|
|
rowGap: "0.4rem", fontSize: "var(--text-base)",
|
|
}}>
|
|
<dt style={{ color: "var(--color-text-gray-400)" }}>일시</dt>
|
|
<dd style={{ margin: 0, whiteSpace: "pre-line" }}>{meta.date_text}</dd>
|
|
<dt style={{ color: "var(--color-text-gray-400)" }}>장소</dt>
|
|
<dd style={{ margin: 0 }}>{meta.place}</dd>
|
|
<dt style={{ color: "var(--color-text-gray-400)" }}>분류</dt>
|
|
<dd style={{ margin: 0 }}>{meta.category}{meta.region_guess ? ` · ${meta.region_guess}` : ""}</dd>
|
|
</dl>
|
|
<div style={{ marginTop: "0.75rem", display: "flex", flexWrap: "wrap", gap: "0.5rem" }}>
|
|
{meta.keywords.map((k) => <span key={k} className="tag">{k}</span>)}
|
|
</div>
|
|
</>
|
|
);
|
|
if (bare) return <div>{body}</div>;
|
|
return <div className="card">{body}</div>;
|
|
}
|