File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-19
"use client";
import type { ComponentExample } from "./component-registry";
import styles from "./dev-test.module.scss";
export function ComponentView({ example }: { example: ComponentExample }) {
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>{example.name}</h2>
{example.description ? (
<p className={styles.sectionNote}>{example.description}</p>
) : null}
<div className={styles.variantList}>
{example.variants.map((variant) => (
<div key={variant.label} className={styles.variant}>
<span className={styles.variantLabel}>{variant.label}</span>
<div className={styles.variantStage}>{variant.node}</div>
</div>
))}
</div>
</section>
);
}
export function ComponentEmpty() {
return (
<section className={styles.section}>
<h2 className={styles.sectionTitle}>컴포넌트가 아직 없습니다</h2>
<p className={styles.sectionNote}>
컴포넌트를 만들면 <code>@fox/dev-test/component-registry.tsx</code>의{" "}
<code>COMPONENT_EXAMPLES</code> 배열에 항목을 하나 추가하세요. 사이드바와 본문은 그
배열만 보고 그리므로 다른 파일은 고칠 필요가 없습니다.
</p>
<pre className={styles.code}>{`{
id: "button",
name: "Button",
description: "기본 액션 버튼",
variants: [
{ label: "primary", node: <Button variant="primary">확인</Button> },
{ label: "disabled", node: <Button disabled>확인</Button> },
],
}`}</pre>
</section>
);
}