39 lines
1.4 KiB
React
39 lines
1.4 KiB
React
import React from "react";
|
|
|
|
/**
|
|
* Surface container. Optional header (title + actions) and body padding.
|
|
*/
|
|
export function Card({ title, subtitle, actions = null, children, padded = true, inset = false, style = {} }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
background: inset ? "var(--ctv-bg-sunken)" : "var(--surface-card)",
|
|
border: "1px solid var(--border-hairline)",
|
|
borderRadius: "var(--radius-md)",
|
|
overflow: "hidden",
|
|
...style,
|
|
}}
|
|
>
|
|
{(title || actions) && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: "12px",
|
|
padding: "13px 16px",
|
|
borderBottom: "1px solid var(--border-hairline)",
|
|
}}
|
|
>
|
|
<div style={{ minWidth: 0 }}>
|
|
{title && <div style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>{title}</div>}
|
|
{subtitle && <div style={{ marginTop: 3, font: "var(--text-xs)/1.3 var(--font-sans)", color: "var(--text-secondary)" }}>{subtitle}</div>}
|
|
</div>
|
|
{actions && <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: "0 0 auto" }}>{actions}</div>}
|
|
</div>
|
|
)}
|
|
<div style={{ padding: padded ? "16px" : 0 }}>{children}</div>
|
|
</div>
|
|
);
|
|
}
|