29 lines
739 B
React
29 lines
739 B
React
import { useId } from "react";
|
|
|
|
/**
|
|
* @param {{
|
|
* title: string,
|
|
* description?: string,
|
|
* children?: React.ReactNode,
|
|
* footer?: React.ReactNode,
|
|
* className?: string
|
|
* }} props
|
|
*/
|
|
export function Card({ title, description, children, footer, className = "" }) {
|
|
const titleId = useId();
|
|
|
|
return (
|
|
<article
|
|
className={`ui-card ${className}`.trim()}
|
|
aria-labelledby={titleId}
|
|
>
|
|
<div className="ui-card__header">
|
|
<h3 id={titleId}>{title}</h3>
|
|
{description ? <p>{description}</p> : null}
|
|
</div>
|
|
{children ? <div className="ui-card__content">{children}</div> : null}
|
|
{footer ? <footer className="ui-card__footer">{footer}</footer> : null}
|
|
</article>
|
|
);
|
|
}
|