43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { splitProps, type ParentProps, type Flow } from "solid-js";
|
|
|
|
interface CardProps extends ParentProps {
|
|
/** "default" = rounded-xl (overview tile), "section" = rounded-2xl panel (details) */
|
|
variant?: "default" | "section";
|
|
/** Subtle shadow, off by default */
|
|
shadowed?: boolean;
|
|
/** If set, render as an <a> link instead of a <div> */
|
|
href?: string;
|
|
[key: string]: any;
|
|
}
|
|
|
|
export function Card(props: CardProps) {
|
|
const [local, rest] = splitProps(props, [
|
|
"variant",
|
|
"shadowed",
|
|
"class",
|
|
"children",
|
|
"href",
|
|
]);
|
|
|
|
const base = () =>
|
|
`border border-line ${
|
|
local.variant === "section" ? "bg-surface/50 rounded-2xl" : "bg-surface rounded-xl"
|
|
} ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;
|
|
|
|
const children = local.children as Flow;
|
|
|
|
if (local.href) {
|
|
return (
|
|
<a {...(rest as object)} href={local.href} class={base()}>
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div {...(rest as object)} class={base()}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|