47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { useState } from "react";
|
|
import React from "react";
|
|
import { ArrowRightIcon } from "@heroicons/react/24/outline";
|
|
|
|
import Button from "./Button";
|
|
import RoundedContainer from "./RoundedContainer";
|
|
|
|
export default function Dropdown({
|
|
title,
|
|
mode,
|
|
children,
|
|
}: {
|
|
title?: string;
|
|
mode?: "DARK" | "LIGHT";
|
|
children: React.ReactNode;
|
|
}) {
|
|
const [dropped, setDropped] = useState<boolean>(false);
|
|
const [degrees, setDegrees] = useState<number>(0);
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
title={title ? title : ""}
|
|
mode={mode}
|
|
onClick={() => {
|
|
setDropped(!dropped);
|
|
if (degrees < 90) {
|
|
setDegrees(90);
|
|
} else {
|
|
setDegrees(0);
|
|
}
|
|
}}
|
|
icon={
|
|
<ArrowRightIcon
|
|
className={`size-4 transition-transform rotate-${degrees}`}
|
|
/>
|
|
}
|
|
/>
|
|
<RoundedContainer
|
|
slim={true}
|
|
className={`${!dropped && "invisible"} absolute z-10 flex flex-col gap-2 transition-discrete duration-150 ease-out`}
|
|
>
|
|
{children}
|
|
</RoundedContainer>
|
|
</div>
|
|
);
|
|
}
|