mirror of
https://github.com/karl0ss/homepage.git
synced 2025-04-29 12:03:41 +01:00
b39c79bea1
* First commit for custom styles and JS * Adjusted classes * Added ids and classes for services and bookmarks * Apply suggestions from code review * Remove mime dependency * Update settings.json * Detect custom css / js changes, no refresh * Added preload to custom scripts and styles so they can load earlier * Added data attribute name for bookmarks too * Update [path].js * code style, revert some pointer changes --------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
import { useRef } from "react";
|
|
import classNames from "classnames";
|
|
import { Disclosure, Transition } from '@headlessui/react';
|
|
import { MdKeyboardArrowDown } from "react-icons/md";
|
|
|
|
import ErrorBoundary from "components/errorboundry";
|
|
import List from "components/bookmarks/list";
|
|
import ResolvedIcon from "components/resolvedicon";
|
|
|
|
export default function BookmarksGroup({ bookmarks, layout, disableCollapse }) {
|
|
const panel = useRef();
|
|
return (
|
|
<div
|
|
key={bookmarks.name}
|
|
className={classNames(
|
|
"bookmark-group",
|
|
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/4 lg:basis-1/5 xl:basis-1/6",
|
|
layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1"
|
|
)}
|
|
>
|
|
<Disclosure defaultOpen>
|
|
{({ open }) => (
|
|
<>
|
|
{layout?.header !== false && (
|
|
<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 bookmark-group-icon">
|
|
<ResolvedIcon icon={layout.icon} />
|
|
</div>
|
|
)}
|
|
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium bookmark-group-name">{bookmarks.name}</h2>
|
|
<MdKeyboardArrowDown
|
|
className={classNames(
|
|
disableCollapse ? "hidden" : "",
|
|
"transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl",
|
|
open ? "" : "rotate-180"
|
|
)}
|
|
/>
|
|
</Disclosure.Button>
|
|
)}
|
|
<Transition
|
|
// Otherwise the transition group does display: none and cancels animation
|
|
className="!block"
|
|
unmount={false}
|
|
beforeLeave={() => {
|
|
panel.current.style.height = `${panel.current.scrollHeight}px`;
|
|
setTimeout(() => {
|
|
panel.current.style.height = `0`;
|
|
}, 1);
|
|
}}
|
|
beforeEnter={() => {
|
|
panel.current.style.height = `0px`;
|
|
setTimeout(() => {
|
|
panel.current.style.height = `${panel.current.scrollHeight}px`;
|
|
}, 1);
|
|
}}
|
|
>
|
|
<Disclosure.Panel className="transition-all overflow-hidden duration-300 ease-out" ref={panel} static>
|
|
<ErrorBoundary>
|
|
<List bookmarks={bookmarks.bookmarks} layout={layout} />
|
|
</ErrorBoundary>
|
|
</Disclosure.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
</div>
|
|
);
|
|
}
|