feat: add admin settings page with toggle switch for demo banner

shop/components/ui/switch.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <label className="relative inline-flex items-center cursor-pointer select-none">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          checked={checked}
+          onChange={handleChange}
+          ref={ref}
+          {...props}
+        />
+        <div className={cn(
+          "w-11 h-6 bg-slate-200 rounded-full peer dark:bg-slate-700",
+          "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-500/50",
+          "peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white",
+          "after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-slate-600",
+          "peer-checked:bg-blue-600"
+        )} />
+      </label>
+    );
+  }
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };