dominik/homepage-plus
1
0
Fork 0
mirror of https://github.com/DI0IK/homepage-plus.git synced 2025-07-11 23:58:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add options for layout, theme and color settings

Browse source
This commit is contained in:
Ben Phelps 2022-09-15 19:58:41 +03:00
parent 05427253b9
commit 93d5dd88ba
5 changed files with 97 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/color-toggle.jsx
View file

@ -61,6 +61,7 @@ export default function ColorToggle() {
{colors.map((color) => (
<button type="button" onClick={() => setColor(color)} key={color}>
<div
title={color}
className={classNames(
active === color ? "border-2" : "border-0",
`rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`

15
src/components/services/group.jsx
View file

@ -1,15 +1,18 @@
import classNames from "classnames";
import List from "components/services/list";
export default function ServicesGroup({ services }) {
export default function ServicesGroup({ services, layout }) {
return (
<div
key={services.name}
className="basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4 flex-1 p-1"
className={classNames(
layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
"flex-1 p-1"
)}
>
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">
{services.name}
</h2>
<List services={services.services} />
<h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
<List services={services.services} layout={layout} />
</div>
);
}

23
src/components/services/list.jsx
View file

@ -1,8 +1,27 @@
import classNames from "classnames";
import Item from "components/services/item";
export default function List({ services }) {
const columnMap = [
"grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
"grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-2",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-6",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-7",
"grid-cols-1 md:grid-cols-2 lg:grid-cols-8",
];
export default function List({ services, layout }) {
return (
<ul className="mt-3 flex flex-col">
<ul
className={classNames(
layout?.style === "row" ? `grid ${columnMap[layout?.columns]} gap-x-2` : "flex flex-col",
"mt-3"
)}
>
{services.map((service) => (
<Item key={service.name} service={service} />
))}