switch component ✅

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -9,6 +9,7 @@ import {
   Checkbox,
   Menu,
   Select,
+  Switch,
   Tabs,
   TabsContent,
   TabsPanels,
@@ -58,6 +59,10 @@ export default function page() {
         </Select>
       </div>
 
+      <div className="space-x-4">
+        <Switch />
+      </div>
+
       <div className="flex items-center space-x-4">
         <Avatar>
           <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />

config/components.ts

@@ -59,7 +59,11 @@ export const componentConfig: {
     },
     select: {
       name: "select",
-      filePath: "packages/ui/Form/Select.tsx",
+      filePath: "packages/ui/Form/select.tsx",
+    },
+    switch: {
+      name: "switch",
+      filePath: "packages/ui/Form/switch.tsx",
     },
     text: {
       name: "text",
@@ -221,6 +225,16 @@ export const componentConfig: {
       filePath: "preview/components/select-style-default.tsx",
       preview: lazy(() => import("@/preview/components/select-style-default")),
     },
+    "switch-style-default": {
+      name: "switch-style-default",
+      filePath: "preview/components/switch-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/switch-style-default")),
+    },
+    "switch-style-disabled": {
+      name: "switch-style-disabled",
+      filePath: "preview/components/switch-style-disabled.tsx",
+      preview: lazy(() => import("@/preview/components/switch-style-disabled")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",

config/navigation.ts

@@ -29,6 +29,7 @@ export const navConfig: INavigationConfig = {
         { title: "Menu", href: `${componentsRoute}/menu` },
         { title: "Radio", href: `${componentsRoute}/radio` },
         { title: "Select", href: `${componentsRoute}/select`, tag: "New" },
+        { title: "Switch", href: `${componentsRoute}/switch`, tag: "New" },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },

content/docs/components/switch.mdx

@@ -0,0 +1,42 @@
+---
+title: Switch
+description: Let users to turn on or off your marketing emails or notifications.
+lastUpdated: 20 Feb, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/switch#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/switch.tsx
+---
+
+<ComponentShowcase name="switch-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-switch
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="switch" />
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="switch-style-default" />
+<br />
+<br />
+
+### Disabled
+
+<ComponentShowcase name="switch-style-disabled" />
+<br />
+<br />

content/docs/utils/cn.mdx

@@ -12,7 +12,15 @@ This enables you to construct className strings conditionally without having to
 
 ## Installation
 
-#### 1. Copy the code 👇 into your `lib/utils.ts` file:
+#### 1. Install the dependencies:
+
+```sh
+npm install clsx tailwind-merge
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your `lib/utils.ts` file:
 
 ```ts
 import clsx from "clsx";

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/Form/index.tsx

@@ -2,4 +2,5 @@ export * from "./Input";
 export * from "./Textarea";
 export * from "./Checkbox";
 export * from "./Radio";
-export * from "./Select";
+export * from "./select";
+export * from "./switch";

packages/ui/Form/switch.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer border-2 border-foreground items-center disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-400",
+      className
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 bg-primary-500 border-2 mx-0.5 border-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-background"
+      )}
+    />
+  </SwitchPrimitives.Root>
+);
+
+export { Switch };

pnpm-lock.yaml

@@ -0,0 +1,11 @@
+import { Switch } from "@/packages/ui";
+import React from "react";
+
+export default function SwitchStyleDefault() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="notification" />
+      <label htmlFor="notification">Email Notifications</label>
+    </div>
+  );
+}