@clubmed/trident-ui
Version:
Shared ClubMed React UI components
81 lines (80 loc) • 2.64 kB
JavaScript
"use client";
import { jsxs as r, jsx as a } from "react/jsx-runtime";
import { useState as b, createElement as k } from "react";
import { c as d } from "../../chunks/clsx.js";
import { Clickable as w } from "../Clickable.js";
import { Tag as v } from "../Tag.js";
import { CardBackground as C } from "./CardBackground.js";
import { ElasticHeight as E } from "../ElasticHeight.js";
import { Card as g } from "./Card.js";
import { HeadingGroup as N } from "../heading/HeadingGroup.js";
import { Button as B } from "../buttons/Button.js";
const q = ({
children: i,
className: c,
hLevel: s = 3,
image: t,
onClick: m,
subtitle: p,
tags: o,
title: l,
component: f = "article",
...x
}) => {
const h = !!l, [e, u] = b(!1);
return /* @__PURE__ */ r(
g,
{
component: f,
"data-name": "ExpandableCard",
"data-testid": "expandable-card",
...x,
className: d({ "border-t-0": t?.src }, c),
"data-open": e,
children: [
/* @__PURE__ */ a(
w,
{
className: "group relative -m-1 block aspect-horizontal overflow-hidden rounded-16 text-start",
"data-testid": "expandable-card-clickable",
onClick: () => {
m?.(!e), u(!e);
},
children: /* @__PURE__ */ r(C, { ...t || {}, children: [
!!o?.length && /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-4 self-start p-20", children: o?.map((n) => /* @__PURE__ */ k(v, { ...n, key: n.label })) }),
/* @__PURE__ */ r(
"div",
{
className: d("mt-auto flex justify-between gap-x-8 p-20", {
"text-white": t?.src
}),
children: [
h && /* @__PURE__ */ a(N, { subtitle: p, level: s, children: l }),
/* @__PURE__ */ a(
B,
{
component: "span",
className: "!transition duration-500",
color: t?.src ? "white" : "black",
icon: "ArrowDefaultDown",
style: { rotate: e ? "-180deg" : "0deg" },
tabIndex: -1,
theme: "outline",
variant: "circle"
}
)
]
}
)
] })
}
),
/* @__PURE__ */ a(E, { isExpanded: e, children: i })
]
}
);
};
export {
q as ExpandableCard
};
//# sourceMappingURL=ExpandableCard.js.map