feat: add pricing section

components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

config/docs.ts

@@ -104,38 +104,24 @@ export const docsConfig: DocsConfig = {
           label: "New",
         },
 
-        // {
-        //   title: "Pricing",
-        //   href: `/docs/sections/pricing`,
-        //   items: [],
-        // },
+        {
+          title: "Pricing",
+          href: `/docs/sections/pricing`,
+          items: [],
+          label: "New",
+        },
         // {
         //   title: "FAQ",
         //   href: `/docs/sections/faq`,
         //   items: [],
+        // label: "New",
         // },
         {
           title: "Footer",
           href: `/docs/sections/footer`,
           items: [],
           label: "New",
         },
-
-        // {
-        //   title: "Pricing",
-        //   href: `/docs/sections/pricing`,
-        //   items: [],
-        // },
-        // {
-        //   title: "FAQ",
-        //   href: `/docs/sections/faq`,
-        //   items: [],
-        // },
-        // {
-        //   title: "Footer",
-        //   href: `/docs/sections/footer`,
-        //   items: [],
-        // },
       ],
     },
     {

content/docs/sections/pricing.mdx

@@ -1,13 +1,13 @@
 ---
 title: Pricing
-date: 2024-02-27
+date: 2024-03-15
 description: These components are used to build the pricing of the website.
 author: dillionverma
-published: false
+published: true
 # video: https://cdn.magicui.design/animated-beam.mp4
 ---
 
 
-{/* <BlockPreview name="pricing-1" />
+<BlockPreview name="pricing-1" />
 
-<BlockPreview name="pricing-2" /> */}
+{/* <BlockPreview name="pricing-2" />  */}

package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@react-email/body": "0.0.2",