import React, { useState, useContext } from 'react'; import { Link } from '@inertiajs/inertia-react'; import { Transition } from '@headlessui/react'; const DropDownContext = React.createContext(); const Dropdown = ({ children }) => { const [open, setOpen] = useState(false); const toggleOpen = () => { setOpen((previousState) => !previousState); }; return (
{children}
); }; const Trigger = ({ children }) => { const { open, setOpen, toggleOpen } = useContext(DropDownContext); return ( <>
{children}
{open &&
setOpen(false)}>
} ); }; const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => { const { open, setOpen } = useContext(DropDownContext); let alignmentClasses = 'origin-top'; if (align === 'left') { alignmentClasses = 'origin-top-left left-0'; } else if (align === 'right') { alignmentClasses = 'origin-top-right right-0'; } let widthClasses = ''; if (width === '48') { widthClasses = 'w-48'; } return ( <> {open && (
setOpen(false)} >
{children}
)}
); }; const DropdownLink = ({ href, method = 'post', as = 'a', children }) => { return ( {children} ); }; Dropdown.Trigger = Trigger; Dropdown.Content = Content; Dropdown.Link = DropdownLink; export default Dropdown;