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

further restructuring

Browse source
This commit is contained in:
Ben Phelps 2022-09-26 15:25:10 +03:00
parent 9b07f3eb90
commit 4386999c38
55 changed files with 224 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,81 +0,0 @@
import { useContext, Fragment } from "react";
import { IoColorPalette } from "react-icons/io5";
import { Popover, Transition } from "@headlessui/react";
import classNames from "classnames";
import { ColorContext } from "utils/contexts/color";
const colors = [
"slate",
"gray",
"zinc",
"neutral",
"stone",
"amber",
"yellow",
"lime",
"green",
"emerald",
"teal",
"cyan",
"sky",
"blue",
"indigo",
"violet",
"purple",
"fuchsia",
"pink",
"rose",
"red",
"white",
];
export default function ColorToggle() {
const { color: active, setColor } = useContext(ColorContext);
if (!active) {
return null;
}
return (
<div className="w-full self-center">
<Popover className="relative flex items-center">
<Popover.Button className="outline-none">
<IoColorPalette
className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
aria-hidden="true"
/>
<span className="sr-only">Change color</span>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute -top-[75px] left-0">
<div className="rounded-md shadow-lg ring-1 ring-black ring-opacity-5 w-[85vw] sm:w-full">
<div className="relative grid gap-2 p-2 grid-cols-11 bg-white/50 dark:bg-white/10 shadow-black/10 dark:shadow-black/20 rounded-md shadow-md">
{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`
)}
/>
<span className="sr-only">{color}</span>
</button>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
</div>
);
}