File size: 1,553 Bytes
c10f8f8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import { Theme } from "@/types";
import classNames from "classnames";
import { Moon, Sun } from "lucide-react";
import { useRef } from "react";
export const Themes = ({
value,
onChange,
}: {
value: Theme;
onChange: (value: Theme) => void;
}) => {
const ref = useRef<HTMLDivElement>(null);
return (
<div
ref={ref}
className="flex items-center justify-start gap-3 overflow-x-auto px-5 scrollbar-hide"
>
<div
className={classNames(
"flex flex-col items-center justify-center p-3 size-16 min-w-32 gap-2 rounded-lg border border-neutral-800 bg-neutral-800/30 hover:brightness-120 cursor-pointer",
{
"!border-neutral-700 !bg-neutral-800/80 hover:!brightness-100":
value === "light",
}
)}
onClick={() => onChange("light")}
>
<Sun className="size-4 text-amber-500" />
<p className="text-xs capitalize text-neutral-200 truncate">Light</p>
</div>
<div
className={classNames(
"flex flex-col items-center justify-center p-3 size-16 min-w-32 gap-2 rounded-lg border border-neutral-800 bg-neutral-800/30 hover:brightness-120 cursor-pointer",
{
"!border-neutral-700 !bg-neutral-800/80 hover:!brightness-100":
value === "dark",
}
)}
onClick={() => onChange("dark")}
>
<Moon className="size-4 text-indigo-500" />
<p className="text-xs capitalize text-neutral-200 truncate">Dark</p>
</div>
</div>
);
};
|