"use client"; /** * @author: @dorianbaffier * @description: Switch Button * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Sun } from "lucide-react"; import { useTheme } from "next-themes"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface SwitchButtonProps extends React.ButtonHTMLAttributes { variant?: "minimal"; size?: "sm" | "default" | "lg"; showLabel?: boolean; } export default function SwitchButton({ className, variant = "minimal", size = "default", showLabel = true, ...props }: SwitchButtonProps) { const { setTheme, theme } = useTheme(); const handleThemeToggle = () => { setTheme(theme === "dark" ? "light" : "dark"); }; const variants = { minimal: [ "rounded-lg", "bg-gradient-to-b from-zinc-50/95 to-zinc-100/95 dark:from-zinc-800/95 dark:to-zinc-900/95", "hover:from-zinc-100/95 hover:to-zinc-200/95 dark:hover:from-zinc-700/95 dark:hover:to-zinc-800/95", "border border-zinc-200 dark:border-zinc-700/80", "hover:border-zinc-300 dark:hover:border-zinc-600", "shadow-[0_1px_2px_-1px_rgb(0_0_0/0.1),0_1px_3px_-2px_rgb(0_0_0/0.1)] dark:shadow-[0_1px_2px_-1px_rgb(0_0_0/0.3),0_1px_3px_-2px_rgb(0_0_0/0.3)]", "hover:shadow-[0_2px_4px_-2px_rgb(0_0_0/0.15),0_2px_6px_-3px_rgb(0_0_0/0.15)] dark:hover:shadow-[0_2px_4px_-2px_rgb(0_0_0/0.4),0_2px_6px_-3px_rgb(0_0_0/0.4)]", "active:shadow-[0_0px_1px_0_rgb(0_0_0/0.1)] dark:active:shadow-[0_0px_1px_0_rgb(0_0_0/0.2)]", "transition-all duration-200 ease-out", "backdrop-blur-sm", "relative", "after:absolute after:inset-0 after:rounded-lg after:bg-gradient-to-t after:from-white/10 after:to-transparent after:opacity-0 hover:after:opacity-100 after:transition-opacity", "before:absolute before:inset-[1px] before:rounded-[7px] before:bg-gradient-to-b before:from-white/20 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity dark:before:from-white/5", ], }; const sizes = { sm: "h-8 px-3 text-sm", default: "h-10 px-4", lg: "h-11 px-5", }; return ( ); }

Switch Button

Instalação

Dependências

Registry dependencies