mirror of
https://github.com/karl0ss/homepage.git
synced 2025-05-02 13:33:40 +01:00
Use Disclosure component for collapsible service groups, add transition
hide collapse arrow if disabled dont break layout for icons in group title no-shadow
This commit is contained in:
parent
041fae1fb3
commit
714e0a4517
@ -1,14 +1,12 @@
|
||||
import classNames from "classnames";
|
||||
import { Transition } from '@headlessui/react'
|
||||
import { useState } from 'react'
|
||||
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}) {
|
||||
|
||||
const [isShowing, setIsShowing] = useState(true)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={services.name}
|
||||
@ -18,18 +16,37 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
|
||||
"flex-1 p-1"
|
||||
)}
|
||||
>
|
||||
<div className="flex">
|
||||
{/* eslint-disable-next-line no-shadow */}
|
||||
<button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
<Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
@ -9,6 +9,11 @@ module.exports = {
|
||||
"./src/components/**/*.{js,ts,jsx,tsx}",
|
||||
"./src/widgets/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
variants: {
|
||||
extend: {
|
||||
display: ["group-hover"],
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user