You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.9 KiB
53 lines
1.9 KiB
import classNames from "classnames";
|
|
import { Disclosure, Transition } from '@headlessui/react';
|
|
import { MdKeyboardArrowDown } from "react-icons/md";
|
|
|
|
import List from "components/services/list";
|
|
import ResolvedIcon from "components/resolvedicon";
|
|
|
|
export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
|
|
|
|
return (
|
|
<div
|
|
key={services.name}
|
|
className={classNames(
|
|
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
|
|
layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
|
|
"flex-1 p-1"
|
|
)}
|
|
>
|
|
<Disclosure defaultOpen>
|
|
{({ open }) => (
|
|
<>
|
|
<Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
|
|
{layout?.icon &&
|
|
<div className="flex-shrink-0 mr-2 w-7 h-7">
|
|
<ResolvedIcon icon={layout.icon} />
|
|
</div>
|
|
}
|
|
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
|
|
<MdKeyboardArrowDown className={classNames(
|
|
disableCollapse ? 'hidden' : '',
|
|
'transition-opacity opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',
|
|
open ? 'rotate-180 transform' : ''
|
|
)} />
|
|
</Disclosure.Button>
|
|
<Transition
|
|
enter="transition duration-200 ease-out"
|
|
enterFrom="transform scale-75 opacity-0"
|
|
enterTo="transform scale-100 opacity-100"
|
|
leave="transition duration-75 ease-out"
|
|
leaveFrom="transform scale-100 opacity-100"
|
|
leaveTo="transform scale-75 opacity-0"
|
|
>
|
|
<Disclosure.Panel>
|
|
<List group={group} services={services.services} layout={layout} />
|
|
</Disclosure.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
</div>
|
|
);
|
|
}
|