File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-18
08-18
08-18
08-18
08-18
File name
Commit message
Commit date
"use client";
import type { ReactNode } from "react";
import { cx } from "../../utils";
export type FoxCardSize = "xlg" | "lg" | "md" | "sm";
export interface FoxCardProps {
size?: FoxCardSize;
/** 위쪽 그림. 시안은 16:9다. */
image?: ReactNode;
title?: ReactNode;
/** 제목 아래 한두 줄 설명. */
description?: ReactNode;
/** 제목·설명 대신 넣을 것. 주면 `title`·`description`은 쓰이지 않는다. */
children?: ReactNode;
/** 아래쪽 줄. 시안은 글자 버튼이다. */
actions?: ReactNode;
/** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
hidden?: boolean;
/** 배치 조정용. */
className?: string;
}
/**
* @fox 카드. 그림·글·동작이 위에서 아래로 쌓인다.
*
* 크기는 여백과 모서리만 바꾼다 — 폭은 놓이는 자리가 정한다.
*
* ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
* (또는 개별 파티셜)로 한 번 불러와야 한다.
*/
export function FoxCard({
size = "md",
image,
title,
description,
children,
actions,
hidden = false,
className,
}: FoxCardProps) {
if (hidden) {
return null;
}
return (
<div className={cx("fox-card", `fox-card--${size}`, className)}>
{image && <div className="fox-card__image">{image}</div>}
<div className="fox-card__contents">
{children ?? (
<>
{title && <p className="fox-card__title">{title}</p>}
{description && <p className="fox-card__description">{description}</p>}
</>
)}
</div>
{actions && <div className="fox-card__actions">{actions}</div>}
</div>
);
}