fix: remove unncessary code and making animated-subscribe-button acce…

…pts children
magicuidesign · Jan 12, 2025 · 22102de · 22102de
1 parent 63d53d9
commit 22102de
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 46 deletions.
diff --git a/content/docs/components/animated-subscribe-button.mdx b/content/docs/components/animated-subscribe-button.mdx
@@ -42,13 +42,11 @@ npx shadcn@latest add "https://magicui.design/r/animated-subscribe-button"
 
 ## Props
 
-| Prop              | Type      | Default | Description                                                                                                                                                   |
-| ----------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `buttonColor`     | `string`  | `-`     | The accent color for the button. This allows you to set a custom color that matches your brand's theme.                                                       |
-| `buttonTextColor` | `string`  | `-`     | The color of the button text. This allows you to ensure the text is visible and matches your desired color scheme.                                            |
-| `subscribeStatus` | `boolean` | `-`     | A boolean flag to check the condition for the button. This property can be used to toggle the button's state, such as subscribed or unsubscribed.             |
-| `initialText`     | `string`  | `-`     | The initial text displayed on the button. This is useful for setting a default label when the button first appears.                                           |
-| `changeText`      | `string`  | `-`     | The final text displayed on the button after an action has been taken. This can be used to indicate a state change, such as from "Subscribe" to "Subscribed". |
+| Prop              | Type              | Default | Description                                                                                                                                       |
+| ----------------- | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `subscribeStatus` | `boolean`         | `false` | A boolean flag to check the condition for the button. This property can be used to toggle the button's state, such as subscribed or unsubscribed. |
+| `children`        | `React.ReactNode` | `-`     | The content to be displayed inside the button. Should contain two children - first for unsubscribed state and second for subscribed state.        |
+| `className`       | `string`          | `-`     | Optional class name to be applied to the button for custom styling.                                                                               |
 
 ## Credits
 

diff --git a/registry/default/example/animated-subscribe-button-demo.tsx b/registry/default/example/animated-subscribe-button-demo.tsx
@@ -3,21 +3,15 @@ import { AnimatedSubscribeButton } from "@/registry/default/magicui/animated-sub
 
 export default function AnimatedSubscribeButtonDemo() {
   return (
-    <AnimatedSubscribeButton
-      className="w-36"
-      subscribeStatus={false}
-      initialText={
-        <span className="group inline-flex items-center">
-          Subscribe{" "}
-          <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
-        </span>
-      }
-      changeText={
-        <span className="group inline-flex items-center">
-          <CheckIcon className="mr-2 size-4" />
-          Subscribed{" "}
-        </span>
-      }
-    />
+    <AnimatedSubscribeButton className="w-36">
+      <span className="group inline-flex items-center">
+        Follow
+        <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
+      </span>
+      <span className="group inline-flex items-center">
+        <CheckIcon className="mr-2 size-4" />
+        Subscribed
+      </span>
+    </AnimatedSubscribeButton>
   );
 }
diff --git a/registry/default/example/interactive-hover-button-demo.tsx b/registry/default/example/interactive-hover-button-demo.tsx
@@ -1,9 +1,5 @@
 import { InteractiveHoverButton } from "@/registry/default/magicui/interactive-hover-button";
 
 export default function InteractiveHoverButtonDemo() {
-  return (
-    <div className="relative justify-center">
-      <InteractiveHoverButton>Hover Me</InteractiveHoverButton>
-    </div>
-  );
+  return <InteractiveHoverButton>Hover Me</InteractiveHoverButton>;
 }
diff --git a/registry/default/example/shimmer-button-demo.tsx b/registry/default/example/shimmer-button-demo.tsx
@@ -2,12 +2,10 @@ import { ShimmerButton } from "@/registry/default/magicui/shimmer-button";
 
 export default function ShimmerButtonDemo() {
   return (
-    <div className="z-10 flex min-h-64 items-center justify-center">
-      <ShimmerButton className="shadow-2xl">
-        <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 lg:text-lg">
-          Shimmer Button
-        </span>
-      </ShimmerButton>
-    </div>
+    <ShimmerButton className="shadow-2xl">
+      <span className="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white dark:from-white dark:to-slate-900/10 lg:text-lg">
+        Shimmer Button
+      </span>
+    </ShimmerButton>
   );
 }
diff --git a/registry/default/magicui/animated-subscribe-button.tsx b/registry/default/magicui/animated-subscribe-button.tsx
@@ -7,9 +7,8 @@ import React, { useState } from "react";
 
 interface AnimatedSubscribeButtonProps
   extends Omit<HTMLMotionProps<"button">, "ref"> {
-  subscribeStatus: boolean;
-  initialText: React.ReactElement | string;
-  changeText: React.ReactElement | string;
+  subscribeStatus?: boolean;
+  children: React.ReactNode;
   className?: string;
 }
 
@@ -18,11 +17,15 @@ export const AnimatedSubscribeButton = React.forwardRef<
   AnimatedSubscribeButtonProps
 >(
   (
-    { subscribeStatus, changeText, initialText, onClick, className, ...props },
+    { subscribeStatus = false, onClick, className, children, ...props },
     ref,
   ) => {
     const [isSubscribed, setIsSubscribed] = useState<boolean>(subscribeStatus);
 
+    const childrenArray = React.Children.toArray(children);
+    const initialChild = childrenArray[0];
+    const changeChild = childrenArray[1];
+
     return (
       <AnimatePresence mode="wait">
         {isSubscribed ? (
@@ -47,7 +50,7 @@ export const AnimatedSubscribeButton = React.forwardRef<
               initial={{ y: -50 }}
               animate={{ y: 0 }}
             >
-              {changeText}
+              {changeChild} {/* Use children for subscribed state */}
             </motion.span>
           </motion.button>
         ) : (
@@ -72,7 +75,7 @@ export const AnimatedSubscribeButton = React.forwardRef<
               initial={{ x: 0 }}
               exit={{ x: 50, transition: { duration: 0.1 } }}
             >
-              {initialText}
+              {initialChild} {/* Use children for unsubscribed state */}
             </motion.span>
           </motion.button>
         )}

diff --git a/registry/default/magicui/pulsating-button.tsx b/registry/default/magicui/pulsating-button.tsx
@@ -1,7 +1,4 @@
-"use client";
-
 import React from "react";
-
 import { cn } from "@/lib/utils";
 
 interface PulsatingButtonProps

diff --git a/registry/default/magicui/rainbow-button.tsx b/registry/default/magicui/rainbow-button.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { cn } from "@/lib/utils";