153 lines
5.0 KiB
TypeScript
153 lines
5.0 KiB
TypeScript
'use client'
|
|
import React from 'react'
|
|
import { cn } from "@/lib/utils"
|
|
import { Label } from "@/components/ui/label"
|
|
import { useConfig } from '@/hooks/use-config'
|
|
import { Icon } from "@/components/ui/icon"
|
|
import { Check } from 'lucide-react';
|
|
import {
|
|
defaultSidebarColorSvg,
|
|
colorSidebarColorSvg,
|
|
gradientSidebarColorSvg,
|
|
} from "./data";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
const SidebarColor = () => {
|
|
const [config, setConfig] = useConfig()
|
|
const [show, setShow] = React.useState<boolean>(
|
|
config.sidebarTheme !== 'light'
|
|
)
|
|
|
|
return (
|
|
<div className="p-6 -mx-6">
|
|
<div className="text-muted-foreground font-normal text-xs mb-4 uppercase">
|
|
Sidebar Color
|
|
</div>
|
|
<div className=" grid grid-cols-3 gap-3 mb-4">
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setConfig({ ...config, sidebarTheme: "light" });
|
|
setShow(false);
|
|
}}
|
|
disabled={config.sidebarTheme === "light"}
|
|
className={cn(
|
|
" border block border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
|
|
{
|
|
"text-default border-default-700 dark:border-default-600":
|
|
config.sidebarTheme === "light",
|
|
"text-muted-foreground ": config.sidebarTheme !== "light",
|
|
}
|
|
)}
|
|
>
|
|
<Icon
|
|
icon="heroicons:check-circle-20-solid"
|
|
className={cn(
|
|
"text-default absolute top-1 right-1 duration-100 scale-0",
|
|
{
|
|
" scale-100": config.sidebarTheme === "light",
|
|
}
|
|
)}
|
|
/>
|
|
{defaultSidebarColorSvg}
|
|
</button>
|
|
<Label className=" text-muted-foreground font-normal block mt-2.5">
|
|
Default
|
|
</Label>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShow(true);
|
|
setConfig({ ...config, sidebarTheme: "dark" });
|
|
}}
|
|
disabled={show}
|
|
className={cn(
|
|
" border block border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
|
|
{
|
|
"text-default border-default": show,
|
|
"text-muted-foreground ": !show,
|
|
}
|
|
)}
|
|
>
|
|
<Icon
|
|
icon="heroicons:check-circle-20-solid"
|
|
className={cn(
|
|
"text-default absolute top-1 right-1 duration-100 scale-0",
|
|
{
|
|
" scale-100": show,
|
|
}
|
|
)}
|
|
/>
|
|
{colorSidebarColorSvg}
|
|
</button>
|
|
<Label className=" text-muted-foreground font-normal block mt-2.5">
|
|
color
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{show && (
|
|
<div className="flex gap-1 flex-wrap bg-default-200 p-3 rounded-md">
|
|
{[
|
|
"dark",
|
|
"rose",
|
|
"steel-blue",
|
|
"purple",
|
|
"redwood",
|
|
"green",
|
|
"ocean-blue",
|
|
"gray",
|
|
|
|
].map((color) => (
|
|
<div key={color}>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfig({ ...config, sidebarTheme: color })}
|
|
disabled={config.sidebarTheme === color}
|
|
className={cn(
|
|
" border border-default-300 inline-flex justify-center rounded-md items-center relative h-8 w-8 disabled:cursor-not-allowed duration-150",
|
|
{
|
|
"bg-default": color === "dark",
|
|
"bg-[#343A40]": color === "gray",
|
|
"bg-[#B52755]": color === "rose",
|
|
"bg-[#405189]": color === "steel-blue",
|
|
"bg-[#4A154B]": color === "purple",
|
|
"bg-[#5D3942]": color === "redwood",
|
|
"bg-[#135846]": color === "green",
|
|
"bg-[#0766AD]": color === "ocean-blue",
|
|
}
|
|
)}
|
|
>
|
|
<Check
|
|
className={cn(" text-white h-4 w-4 duration-100 scale-0", {
|
|
" scale-100": config.sidebarTheme === color,
|
|
})}
|
|
/>
|
|
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{color}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SidebarColor |