You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.4 KiB
54 lines
1.4 KiB
import type React from 'react';
|
|
import { useState } from 'react';
|
|
|
|
import { m } from 'framer-motion';
|
|
import { FiChevronRight } from 'react-icons/fi';
|
|
|
|
export interface ExternalSectionProps {
|
|
title: string;
|
|
icon?: JSX.Element;
|
|
active?: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const ExternalSection = ({
|
|
title,
|
|
icon,
|
|
active,
|
|
onClick,
|
|
}: ExternalSectionProps): JSX.Element => {
|
|
const [open, setOpen] = useState(false);
|
|
const toggleOpen = (): void => setOpen(!open);
|
|
return (
|
|
<m.div
|
|
onClick={(): void => {
|
|
onClick();
|
|
}}
|
|
>
|
|
<m.div
|
|
layout
|
|
className={`w-full cursor-pointer select-none overflow-hidden border-l-4 bg-gray-200 dark:bg-tertiaryDark dark:text-gray-400 ${
|
|
active
|
|
? 'border-l-primary dark:border-l-primary'
|
|
: 'border-gray-400 dark:border-secondaryDark'
|
|
}`}
|
|
>
|
|
<m.div
|
|
layout
|
|
onClick={toggleOpen}
|
|
whileHover={{ scale: 1.01 }}
|
|
whileTap={{ scale: 0.99 }}
|
|
className="flex justify-between gap-2 border-b border-gray-400 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 className="my-auto">
|
|
<FiChevronRight />
|
|
</m.div>
|
|
</m.div>
|
|
</m.div>
|
|
</m.div>
|
|
);
|
|
};
|
|
|