76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { createSignal, JSX } from "solid-js";
|
|
|
|
export default function RevealDropDown(props: {
|
|
title: string;
|
|
children: JSX.Element;
|
|
}) {
|
|
const [isRevealed, setIsRevealed] = createSignal(false);
|
|
|
|
const toggleReveal = () => {
|
|
setIsRevealed(!isRevealed());
|
|
};
|
|
|
|
return (
|
|
<div class="relative mb-4 overflow-visible">
|
|
{/* Button Header */}
|
|
<div
|
|
class="bg-mantle border-surface0 flex cursor-pointer items-center justify-between rounded-t p-3"
|
|
style={
|
|
isRevealed()
|
|
? {
|
|
"border-top-style": "var(--tw-border-style)",
|
|
"border-inline-style": "var(--tw-border-style)",
|
|
"border-top-width": "1px",
|
|
"border-inline-width": "1px",
|
|
"border-top-left-radius": "var(--radius-xl)",
|
|
"border-top-right-radius": "var(--radius-xl)"
|
|
}
|
|
: {
|
|
"border-style": "var(--tw-border-style)",
|
|
"border-width": "1px",
|
|
"border-radius": "var(--radius-xl)"
|
|
}
|
|
}
|
|
onClick={toggleReveal}
|
|
>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="h-12 w-12">
|
|
<img src={"/LineageIcon.png"} />
|
|
</span>
|
|
<span class="font-medium">{props.title}</span>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
{/* Reveal Arrow */}
|
|
<svg
|
|
class={`h-5 w-5 transition-transform duration-200 ${
|
|
isRevealed() ? "rotate-180" : ""
|
|
}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width={2}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Reveal Content */}
|
|
<div
|
|
class={`bg-mantle border-surface0 absolute right-0 left-0 z-10 overflow-scroll rounded-b-xl border-x border-b p-4 shadow-lg transition-all duration-300 ease-in-out ${
|
|
isRevealed()
|
|
? "mx-h-[75dvh] opacity-100 md:max-h-[60vh]"
|
|
: "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|