1 files changed, 27 insertions, 0 deletions

diff --git a/src/ui/objects/CollapseCard.tsx b/src/ui/objects/CollapseCard.tsx
new file mode 100644
index 0000000..27e1ce2
--- /dev/null
+++ b/src/ui/objects/CollapseCard.tsx
@@ -0,0 +1,27 @@
+import { Card, type Props as CardProps } from "./Card.tsx";
+import { CardBody } from "./CardBody.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = CardProps<"details"> & {
+        "heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+        "title"?: JSX.Element;
+        "header"?: JSX.Element;
+};
+
+export const CollapseCard = ({
+        "heading-level": headingLevel,
+        children,
+        title,
+        header,
+        ...props
+}: Props) => (
+        <Card as="details" {...props}>
+                <CardBody as="summary">
+                        <Heading as={headingLevel} class="u-mbs-0" level="lg">
+                                {title}
+                        </Heading>
+                        {header}
+                </CardBody>
+                <CardBody>{children}</CardBody>
+        </Card>
+);