fix: update button code

content/docs/components/pulsating-button.mdx

@@ -1,40 +1,106 @@
 ---
 title: Pulsating Button
 date: 2024-06-20
-description: An animated pulsating button useful for capturing attention of users. 
+description: An animated pulsating button useful for capturing attention of users.
 author: shikhap04
 published: true
 ---
 
 <ComponentPreview name="pulsating-button-demo" />
 
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
 <Steps>
 
-### Installation
+<Step>Run the following command:</Step>
+
+```bash
+npx magicui-cli add pulsating-button
+```
+
+<Step>Update `tailwind.config.js`</Step>
 
-Copy and paste the following code into your project.
+Add the following animations to your `tailwind.config.js` file:
 
-```text
-components/magicui/pulsating-button.tsx
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        pulse: "pulse var(--duration) ease-out infinite",
+      },
+      keyframes: {
+        pulse: {
+          "0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
+          "50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
+        },
+      },
+    },
+  },
+};
 ```
 
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
 <ComponentSource name="pulsating-button" />
 
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-13}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      animation: {
+        pulse: "pulse var(--duration) ease-out infinite",
+      },
+      keyframes: {
+        pulse: {
+          "0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
+          "50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
+        },
+      },
+    },
+  },
+};
+```
+
 </Steps>
 
-## Props
+</TabsContent>
 
-| Prop              | Type    | Description                                               |
-|-------------------|---------|-----------------------------------------------------------|
-| text              | string  | The text displayed on the button.                         |
-| backgroundColor   | string  | The hex color for the color of the button.                |
-| pulseColor        | string  | The rbg numbers only for the color of the pulsing waves.  |
-| textColor         | string  | The color of the text displayed on the button.            |
-| animationDuration | string  | The time span of one pulse.                               |
-| buttonWidth       | string  | The width of the button.                                  |
-| buttonHeight      | string  | The height of the button.                                 |
+</Tabs>
+
+## Props
 
+| Prop       | Type            | Description                                              |
+| ---------- | --------------- | -------------------------------------------------------- |
+| children   | React.ReactNode | The content of the button.                               |
+| className  | string          | Additional class names for the button.                   |
+| pulseColor | string          | The rbg numbers only for the color of the pulsing waves. |
+| duration   | string          | The time span of one pulse.                              |
 
 ## Credits
 
-- Credit to [@shikhap04](https://github.com/shikhap04)
+- Credit to [@shikhap04](https://github.com/shikhap04)

registry/components/example/pulsating-button-demo.tsx

@@ -1,17 +1,5 @@
+import PulsatingButton from "@/registry/components/magicui/pulsating-button";
 
-import { PulsatingButton } from "@/registry/components/magicui/pulsating-button"
-import { constants } from "zlib";
-
-const PulsatingButtonDemo = () => {
-  return <PulsatingButton
-  text = 'Join Affiliate Program'
-  pulseColor = '0, 150, 255'
-  backgroundColor= '#0096FF'
-  textColor = '#ffffff'
-  animationDuration = '1.5s'
-  buttonWidth = '200px'
-  buttonHeight = '50px'
-  />;
+export default function PulsatingButtonDemo() {
+  return <PulsatingButton>Join Affiliate Program</PulsatingButton>;
 }
-
-export default PulsatingButtonDemo;

registry/components/magicui/pulsating-button.tsx

@@ -1,77 +1,38 @@
-
 "use client";
 
 import React from "react";
 
-interface PulsatingButtonProps {
-  text: string;
-  pulseColor: string;
-  backgroundColor: string;
-  textColor: string;
-  animationDuration: string;
-  buttonWidth: string;
-  buttonHeight: string;
-}
+import { cn } from "@/lib/utils";
 
-export const PulsatingButton: React.FC<PulsatingButtonProps> = ({
-  text,
-  pulseColor,
-  backgroundColor,
-  textColor,
-  animationDuration,
-  buttonWidth,
-  buttonHeight
-}) => {
-  const pulseKeyframes = {
-    '--tw-pulse-color': pulseColor,
-    animation: `pulse ${animationDuration} linear infinite`,
-  };
+interface PulsatingButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  pulseColor?: string;
+  duration?: string;
+}
 
+export default function PulsatingButton({
+  className,
+  children,
+  pulseColor = "#0096ff",
+  duration = "1.5s",
+  ...props
+}: PulsatingButtonProps) {
   return (
-    <div 
-      className="flex justify-center items-center"
+    <button
+      className={cn(
+        "relative text-center cursor-pointer flex justify-center items-center rounded-lg text-white dark:text-black bg-blue-500 dark:bg-blue-500 px-4 py-2",
+        className,
+      )}
+      style={
+        {
+          "--pulse-color": pulseColor,
+          "--duration": duration,
+        } as React.CSSProperties
+      }
+      {...props}
     >
-      <button
-        className="relative block text-center cursor-pointer flex justify-center items-center"
-        style={{
-          color: textColor,
-          backgroundColor: backgroundColor,
-          width: buttonWidth,
-          height: buttonHeight,
-          borderRadius: '12px',
-          ...pulseKeyframes,
-        }}
-      >
-        <div>{text}</div>
-        <style jsx>{`
-          @keyframes pulse {
-            0% {
-              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);
-            }
-            50% {
-              box-shadow: 0 0 0 8px rgba(var(--tw-pulse-color), 0.5);
-            }
-            100% {
-              box-shadow: 0 0 0 0 rgba(var(--tw-pulse-color), 0);
-            }
-          }
-          button::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 100%;
-            height: 100%;
-            border-radius: 20px;
-            background: inherit;
-            animation: inherit;
-            transform: translate(-50%, -50%);
-            z-index: -1;
-          }
-        `}</style>
-      </button>
-    </div>
+      <div className="relative z-10">{children}</div>
+      <div className="absolute top-1/2 left-1/2 size-full rounded-lg bg-inherit animate-pulse -translate-x-1/2 -translate-y-1/2" />
+    </button>
   );
-};
-
-export default PulsatingButton;
+}

registry/index.tsx

@@ -233,6 +233,7 @@ const ui: Registry = {
     name: "pulsating-button",
     type: "components:ui",
     files: ["registry/components/magicui/pulsating-button.tsx"],
+  },
   "file-tree": {
     name: "file-tree",
     type: "components:magicui",
@@ -864,6 +865,8 @@ const example: Registry = {
     files: ["registry/components/example/pulsating-button-demo.tsx"],
     component: React.lazy(
       () => import("@/registry/components/example/pulsating-button-demo"),
+    ),
+  },
   "file-tree-demo": {
     name: "file-tree-demo",
     type: "components:example",

tailwind.config.ts

@@ -82,6 +82,7 @@ module.exports = {
         orbit: "orbit calc(var(--duration)*1s) linear infinite",
         backgroundPositionSpin:
           "background-position-spin 3000ms infinite alternate",
+        pulse: "pulse var(--duration) ease-out infinite",
       },
       keyframes: {
         "accordion-down": {
@@ -194,6 +195,10 @@ module.exports = {
             "background-position": "0% 0%",
           },
         },
+        pulse: {
+          "0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
+          "50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
+        },
       },
     },
   },