31 lines
719 B
TypeScript
31 lines
719 B
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
export function Swatch({
|
|
colour,
|
|
label,
|
|
detail,
|
|
actions,
|
|
large = false,
|
|
}: {
|
|
colour: string;
|
|
label: string;
|
|
detail?: string;
|
|
actions?: ReactNode;
|
|
large?: boolean;
|
|
}) {
|
|
return (
|
|
<article className={`swatch-card${large ? " swatch-card--large" : ""}`}>
|
|
<div
|
|
className="swatch-colour checkerboard"
|
|
style={{ "--swatch": colour } as CSSProperties}
|
|
aria-label={`${label}: ${detail ?? colour}`}
|
|
/>
|
|
<div className="swatch-meta">
|
|
<strong>{label}</strong>
|
|
<code>{detail ?? colour}</code>
|
|
</div>
|
|
{actions && <div className="swatch-actions">{actions}</div>}
|
|
</article>
|
|
);
|
|
}
|