44 lines
1.5 KiB
React
44 lines
1.5 KiB
React
|
import { Fragment } from 'react'
|
||
|
|
import { Popover, Transition } from '@headlessui/react'
|
||
|
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||
|
|
|
||
|
|
const solutions = [
|
||
|
|
{ name: 'Analytics', href: '#' },
|
||
|
|
{ name: 'Engagement', href: '#' },
|
||
|
|
{ name: 'Security', href: '#' },
|
||
|
|
{ name: 'Integrations', href: '#' },
|
||
|
|
{ name: 'Automations', href: '#' },
|
||
|
|
{ name: 'Reports', href: '#' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export default function Example() {
|
||
|
|
return (
|
||
|
|
<Popover className="relative">
|
||
|
|
<Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
||
|
|
<span>Solutions</span>
|
||
|
|
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||
|
|
</Popover.Button>
|
||
|
|
|
||
|
|
<Transition
|
||
|
|
as={Fragment}
|
||
|
|
enter="transition ease-out duration-200"
|
||
|
|
enterFrom="opacity-0 translate-y-1"
|
||
|
|
enterTo="opacity-100 translate-y-0"
|
||
|
|
leave="transition ease-in duration-150"
|
||
|
|
leaveFrom="opacity-100 translate-y-0"
|
||
|
|
leaveTo="opacity-0 translate-y-1"
|
||
|
|
>
|
||
|
|
<Popover.Panel className="absolute left-1/2 z-10 mt-5 flex w-screen max-w-min -translate-x-1/2 px-4">
|
||
|
|
<div className="w-56 shrink rounded-xl bg-white p-4 text-sm font-semibold leading-6 text-gray-900 shadow-lg ring-1 ring-gray-900/5">
|
||
|
|
{solutions.map((item) => (
|
||
|
|
<a key={item.name} href={item.href} className="block p-2 hover:text-indigo-600">
|
||
|
|
{item.name}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Popover.Panel>
|
||
|
|
</Transition>
|
||
|
|
</Popover>
|
||
|
|
)
|
||
|
|
}
|