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> ); };