Seed: product-management template (23 files)

src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Switch = ({ className, checked: controlled, defaultChecked, onCheckedChange, ...props }: SwitchProps) => {
+  const [internal, setInternal] = React.useState(!!defaultChecked);
+  const checked = controlled ?? internal;
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      onClick={() => { setInternal(!checked); onCheckedChange?.(!checked); }}
+      className={cn(
+        "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+        checked ? "bg-indigo-600" : "bg-slate-300",
+        className
+      )}
+      {...props}
+    >
+      <span className={cn("inline-block h-4 w-4 transform rounded-full bg-white transition-transform", checked ? "translate-x-6" : "translate-x-1")} />
+    </button>
+  );
+};
+
+export default Switch;