Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adds ability to collapse layout sections

Browse Source 
Reverts pnpm lock file changes

Make entire section above list clickable.

Implement in headlessui instead of pulling in new library.

Remove unecessary packages and clean up ESLint errors
This commit is contained in:
Alex Higgins 2023-06-21 16:46:14 -04:00 committed by shamoon
parent 0936ba2b6b
commit 041fae1fb3
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/services/group.jsx
View File

@ -1,9 +1,14 @@
import classNames from "classnames"; import classNames from "classnames";
import { Transition } from '@headlessui/react'
import { useState } from 'react'
import List from "components/services/list"; import List from "components/services/list";
import ResolvedIcon from "components/resolvedicon"; import ResolvedIcon from "components/resolvedicon";
export default function ServicesGroup({ group, services, layout, fiveColumns }) { export default function ServicesGroup({ group, services, layout, fiveColumns, disableCollapse}) {
const [isShowing, setIsShowing] = useState(true)
return ( return (
<div <div
key={services.name} key={services.name}
@ -13,15 +18,18 @@ export default function ServicesGroup({ group, services, layout, fiveColumns })
"flex-1 p-1" "flex-1 p-1"
)} )}
> >
<div className="flex select-none items-center"> <div className="flex">
{layout?.icon && {/* eslint-disable-next-line no-shadow */}
<div className="flex-shrink-0 mr-2 w-7 h-7"> <button type="button" disabled={disableCollapse} onClick={() => setIsShowing((isShowing) => !isShowing)} className="grow select-none items-center">
<ResolvedIcon icon={layout.icon} /> {layout?.icon &&
</div> <div className="flex-shrink-0 mr-2 w-7 h-7">
} <ResolvedIcon icon={layout.icon} />
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2> </div>
}
<h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
</button>
</div> </div>
<List group={group} services={services.services} layout={layout} /> <Transition show={isShowing}><List group={group} services={services.services} layout={layout} /></Transition>
</div> </div>
); );
} }

8
src/pages/index.jsx
View File

@ -294,7 +294,13 @@ function Home({ initialSettings }) {
{services?.length > 0 && ( {services?.length > 0 && (
<div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2"> <div className="flex flex-wrap p-4 sm:p-8 sm:pt-4 items-start pb-2">
{services.map((group) => ( {services.map((group) => (
<ServicesGroup key={group.name} group={group.name} services={group} layout={initialSettings.layout?.[group.name]} fiveColumns={settings.fiveColumns} /> <ServicesGroup
key={group.name}
group={group.name}
services={group}
layout={initialSettings.layout?.[group.name]}
fiveColumns={settings.fiveColumns}
disableCollapse={settings.disableCollapse} />
))} ))}
</div> </div>
)} )}