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 = '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 = 'w-96' if (width === '48') { widthClasses = 'w-48' } return ( <>
setOpen(false)} >
{children}
) } const DropdownLink = ({ href, method, as, children }) => { return ( {children} ) } Dropdown.Trigger = Trigger Dropdown.Content = Content Dropdown.Link = DropdownLink export default Dropdown