Sasanka
c564916c60
- Updated layout and styling for various dashboard pages including stock adjustments, counts, transfers, wastage, and vendors to improve responsiveness and visual consistency. - Introduced a vibrant theme option in the theme toggle component, allowing users to switch between light, dark, and vibrant themes. - Refactored button styles across login and forgot password pages for better accessibility and visual feedback. - Improved sidebar navigation with expanded functionality for items without dedicated pages. - Enhanced data table styling for better readability and user interaction. - Added new background images to support the vibrant theme.
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Moon, Sun, Monitor } from "lucide-react"
|
|
import { useTheme } from "next-themes"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const options = [
|
|
{ value: "light", label: "Light mode", icon: Sun },
|
|
{ value: "vibrant", label: "Vibrant theme", icon: Monitor },
|
|
{ value: "dark", label: "Dark mode", icon: Moon },
|
|
] as const
|
|
|
|
/**
|
|
* Renders an empty slot until mounted: `theme` is unknown on the server (and on the
|
|
* client's first paint, before next-themes reads localStorage), so rendering the active
|
|
* segment before that would either be wrong or cause a hydration mismatch.
|
|
*/
|
|
export function ThemeToggle({ className }: { className?: string }) {
|
|
const { theme, setTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
useEffect(() => setMounted(true), [])
|
|
|
|
if (!mounted) {
|
|
return <div className={cn("h-10 w-27 shrink-0", className)} aria-hidden="true" />
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="radiogroup"
|
|
aria-label="Theme"
|
|
className={cn("flex shrink-0 items-center gap-0.5 rounded-full bg-muted p-1", className)}
|
|
>
|
|
{options.map(({ value, label, icon: Icon }) => {
|
|
const isActive = theme === value
|
|
const isVibrant = value === "vibrant"
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={isActive}
|
|
aria-label={label}
|
|
title={label}
|
|
onClick={() => setTheme(value)}
|
|
className={cn(
|
|
"flex size-8 shrink-0 items-center justify-center rounded-full transition-colors",
|
|
isActive
|
|
? isVibrant
|
|
? "bg-linear-to-br from-indigo-500 to-violet-600 text-white shadow-sm"
|
|
: "bg-card text-primary shadow-sm ring-1 ring-foreground/10"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|