openhands
ed6eaf33a0
Introduce components/surface-card.tsx (Card + CardBody) mirroring the .content-card / SectionCard token set, and use it on the (site) pages that still hand-rolled card markup: me, search, and verify. This puts every public page on one of the shared card components (ContentCard, SectionCard, or SurfaceCard) for consistent radius/shadow/border.
44 lines
1008 B
TypeScript
44 lines
1008 B
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
const CARD_BORDER =
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)";
|
|
|
|
/**
|
|
* Public-site surface card. Mirrors the CSS .content-card / SectionCard visual
|
|
* language (--radius-lg corners, --shadow-card, hairline border) so every page
|
|
* that opts out of ContentCard still shares one consistent component.
|
|
*/
|
|
export function SurfaceCard({
|
|
className = "",
|
|
style,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`overflow-hidden rounded-2xl border bg-[var(--color-surface)] ${className}`}
|
|
style={{
|
|
borderColor: CARD_BORDER,
|
|
boxShadow: "var(--shadow-card)",
|
|
...style,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Padded body for a SurfaceCard. Override padding via className. */
|
|
export function SurfaceCardBody({
|
|
className = "p-5",
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return <div className={className}>{children}</div>;
|
|
}
|