65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { useTheme } from "next-themes";
|
|
import { hexToRGB } from "@/lib/utils";
|
|
import { cn } from "@/lib/utils";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Icon } from "@/components/ui/icon"
|
|
|
|
import { Check } from "lucide-react";
|
|
|
|
const allThemes = [
|
|
{ key: "light", label: "Light", icon: "heroicons:sun" },
|
|
{ key: "dark", label: "Dark", icon: "heroicons:moon" },
|
|
{ key: "system", label: "System", icon: "heroicons:window" },
|
|
|
|
];
|
|
|
|
const ColorSchema = () => {
|
|
const { theme, setTheme, resolvedTheme: mode } = useTheme();
|
|
|
|
return (
|
|
<div
|
|
|
|
>
|
|
<div className="mb-3 relative inline-block rounded-md before:bg-[--theme-primary] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:rounded before:opacity-10 before:z-[-1] text-[--theme-primary] text-sm font-medium">
|
|
Color Scheme
|
|
</div>
|
|
|
|
<div className=" grid grid-cols-3 gap-3">
|
|
{allThemes?.map((themeOption) => (
|
|
<div key={themeOption.key} className="flex-1 w-full">
|
|
<button
|
|
onClick={() => setTheme(themeOption.key as any)}
|
|
className={cn(
|
|
"border flex border-default-300 w-full text-center items-center justify-center py-[14px] px-10 rounded relative",
|
|
{
|
|
"text-default border-default-700 dark:border-default-600":
|
|
theme === themeOption.key,
|
|
"text-default-400 dark:text-default-600": theme !== themeOption.key,
|
|
}
|
|
)}
|
|
>
|
|
{theme === themeOption.key && (
|
|
<Icon
|
|
icon="heroicons:check-circle-20-solid"
|
|
className=" text-[--theme-primary] absolute top-1 right-1"
|
|
/>
|
|
)}
|
|
<div>
|
|
<Icon icon={themeOption.icon} className=" h-5 w-5" />
|
|
</div>
|
|
</button>
|
|
<Label className=" text-muted-foreground font-normal block mt-2.5">
|
|
{themeOption.label}
|
|
</Label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ColorSchema;
|