import React, { useState, useContext, Fragment } from 'react'; import { Link } from '@inertiajs/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 = 'w-48', contentClasses = 'py-1 bg-base-100', maxHeight = '100px', 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 = width; let overflwoAuto = false; if(maxHeight !== '100px') { overflwoAuto = true; } return ( <>
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;