74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import { AnimatePresence, m } from 'framer-motion';
|
|
import { FiArrowUp } from 'react-icons/fi';
|
|
|
|
export interface CollapsibleSectionProps {
|
|
title: string;
|
|
icon?: JSX.Element;
|
|
actions?: JSX.Element;
|
|
children: JSX.Element;
|
|
}
|
|
|
|
export const CollapsibleSection = ({
|
|
title,
|
|
icon,
|
|
actions,
|
|
children,
|
|
}: CollapsibleSectionProps): JSX.Element => {
|
|
const [open, setOpen] = React.useState(false);
|
|
const toggleOpen = (): void => setOpen(!open);
|
|
return (
|
|
<m.div>
|
|
<m.div
|
|
layout
|
|
className="w-full cursor-pointer select-none overflow-hidden dark:bg-secondaryDark dark:text-gray-400"
|
|
>
|
|
<m.div
|
|
layout
|
|
onClick={toggleOpen}
|
|
whileHover={{ scale: 1.01 }}
|
|
whileTap={{ scale: 0.99 }}
|
|
className="flex justify-between gap-2 border-b border-gray-300 p-2 text-sm font-medium dark:border-primaryDark"
|
|
>
|
|
<m.div className="flex gap-2 ">
|
|
<m.div className="my-auto">{icon}</m.div>
|
|
{title}
|
|
</m.div>
|
|
<m.div
|
|
animate={open ? 'open' : 'closed'}
|
|
initial={{ rotate: 180 }}
|
|
variants={{
|
|
open: { rotate: 0 },
|
|
closed: { rotate: 180 },
|
|
}}
|
|
className="my-auto"
|
|
>
|
|
<FiArrowUp />
|
|
</m.div>
|
|
</m.div>
|
|
</m.div>
|
|
<AnimatePresence>
|
|
{open && (
|
|
<>
|
|
{actions && (
|
|
<m.div className="flex justify-end gap-1 rounded-b-md border-x border-b p-1 dark:border-gray-600">
|
|
{actions}
|
|
</m.div>
|
|
)}
|
|
<m.div
|
|
className="p-2"
|
|
layout
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
{children}
|
|
</m.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
</m.div>
|
|
);
|
|
};
|