48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import type { HTMLAttributes, ReactNode } from "react";
|
||
|
|
import "@shared/components/Card.css";
|
||
|
|
|
||
|
|
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||
|
|
/** Adds an accent strip on the left edge of the card. */
|
||
|
|
accent?: "blue" | "purple" | "green" | "amber" | "red";
|
||
|
|
/**
|
||
|
|
* Padding profile. `tight` = 0.75rem, `default` = 1.125rem, `loose` = 1.5rem.
|
||
|
|
* `none` removes padding so the card surface can host edge-to-edge content
|
||
|
|
* (e.g. a list with row dividers).
|
||
|
|
*/
|
||
|
|
padding?: "none" | "tight" | "default" | "loose";
|
||
|
|
/** Use the lifted surface treatment (taller shadow, hover affordance). */
|
||
|
|
interactive?: boolean;
|
||
|
|
children?: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Generic surface — the prototype's cardStyle / cardStyleSm helper, lifted
|
||
|
|
* into a primitive. Any list item, panel, or detail card that needs the
|
||
|
|
* standard surface treatment composes from here.
|
||
|
|
*/
|
||
|
|
export function Card({
|
||
|
|
accent,
|
||
|
|
padding = "default",
|
||
|
|
interactive = false,
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
...rest
|
||
|
|
}: CardProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
{...rest}
|
||
|
|
className={[
|
||
|
|
"sui-card",
|
||
|
|
`sui-card--pad-${padding}`,
|
||
|
|
accent ? `sui-card--accent-${accent}` : "",
|
||
|
|
interactive ? "sui-card--interactive" : "",
|
||
|
|
className ?? "",
|
||
|
|
]
|
||
|
|
.filter(Boolean)
|
||
|
|
.join(" ")}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|