26 lines
893 B
TypeScript
26 lines
893 B
TypeScript
const Section = ({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) => (
|
|
<div className="mb-8">
|
|
<h2 className="wing-section-header mb-1">{title}</h2>
|
|
{desc && <p className="wing-section-desc mb-4">{desc}</p>}
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const Spacing = () => (
|
|
<Section title="간격 (Spacing)" desc="4px 그리드 기반 6단계">
|
|
<div>
|
|
<p className="wing-label mb-2">Spacing (4px grid)</p>
|
|
<div className="flex items-end gap-2">
|
|
{[4, 6, 8, 12, 16, 20].map((s) => (
|
|
<div key={s} className="flex flex-col items-center gap-1">
|
|
<div className="bg-primary-cyan/30 border border-primary-cyan/50" style={{ width: s, height: 40 }} />
|
|
<span className="wing-meta text-text-3">{s}px</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
|
|
export default Spacing;
|