lycaon
32 lines
956 B
TypeScript
32 lines
956 B
TypeScript
import type { JSX } from "solid-js";
|
|
|
|
export interface GlassCardProps {
|
|
heading?: string;
|
|
accessory?: JSX.Element;
|
|
class?: string;
|
|
contentClass?: string;
|
|
bare?: boolean;
|
|
children: JSX.Element;
|
|
style?: JSX.CSSProperties;
|
|
}
|
|
|
|
// Single glass surface used for every section card. The `bare` variant skips
|
|
// the inset content padding so tables/log lists can reach the edge.
|
|
export function GlassCard(props: GlassCardProps): JSX.Element {
|
|
const cls = (): string => {
|
|
const base = "glass glass-rise rounded-lg overflow-hidden";
|
|
return props.class ? `${base} ${props.class}` : base;
|
|
};
|
|
return (
|
|
<section class={cls()} style={props.style}>
|
|
{props.heading != null && (
|
|
<div class="section-heading">
|
|
<h2>{props.heading}</h2>
|
|
{props.accessory && <div class="accessory">{props.accessory}</div>}
|
|
</div>
|
|
)}
|
|
<div class={props.contentClass}>{props.children}</div>
|
|
</section>
|
|
);
|
|
}
|