Merge pull request #99 from afnanhussain2002/feat/play-button

feat(components): add PlayButton component with demo and docs

Author: afsar-dev

src/components/nurui/play-button-demo.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import PlayButton from "./play-button";
+
+
+const PlayButtonDemo = () => {
+  return (
+    <div className="flex items-center justify-center min-h-[30rem]">
+      <PlayButton text="Play Now" />
+    </div>
+  );
+};
+
+export default PlayButtonDemo;

src/components/nurui/play-button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FaPlay } from 'react-icons/fa';
+
+const PlayButton = ({ text }: { text: string }) => {
+  return (
+    <button className="relative group text-white transition-all flex items-center justify-center whitespace-nowrap rounded-lg hover:rotate-[3deg] will-change-transform duration-300 shadow-lg hover:shadow-xl h-14 text-lg pl-[5rem] pr-6 bg-fuchsia-950 shadow-fuchsia-950/30 hover:shadow-fuchsia-950/30">
+      <div className="absolute left-0 top-0 mt-1 ml-1 bg-white text-fuchsia-950 p-[0.35rem] bottom-1 group-hover:w-[calc(100%-0.5rem)] transition-all rounded-md duration-300 h-12 w-12 flex items-center justify-center">
+        <FaPlay className="h-6 w-6" />
+      </div>
+      <div>{text}</div>
+    </button>
+  );
+};
+
+export default PlayButton;

src/content/docs/play-button.mdx

@@ -0,0 +1,43 @@
+---
+title: "Play Button"
+description: "A stylish play button component with indigo glow and animation effects."
+---
+
+<ComponentPreview componentName="PlayButton" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+  <Cli />
+</TabsContent>
+
+<TabsContent value="manual">
+<Steps>
+<Step>Install dependencies</Step>
+<Cli
+  dependencies={[
+    { label: "npm", command: "npm i react-icons" },
+    { label: "yarn", command: "yarn add react-icons" },
+  ]}
+/>
+<Step>Copy and paste the following code into your project.</Step>
+`components/nurui/play-button.tsx`
+<CodeBlock componentName="PlayButton" fileName="play-button" />
+</Steps>
+</TabsContent>
+
+</Tabs>
+
+### Props
+
+| Prop     | Type     | Default       | Description                   |
+|----------|----------|---------------|-------------------------------|
+| `text`   | `string` | `"Play demo"` | The text displayed on button  |
+| ...props | `button` | —             | Standard button props         |

src/registry/component-navigation.tsx

@@ -96,6 +96,7 @@ export const navigation = [
       { name: "Shadow", href: `${baseUrl}/shadow-button` },
       { name: "Text", href: `${baseUrl}/text-button` },
       { name: "future", href: `${baseUrl}/future-button` },
+      { name: "Play", href: `${baseUrl}/play-button` },
     ],
   },
   // cards

src/registry/components-registry.tsx

@@ -13,6 +13,9 @@ import TextFallButtonCode from "@/components/nurui/text-button.tsx?raw";
 import MagnetButtonDemo from "@/components/nurui/magnet-button-demo";
 import MagnetButtonDemoCode from "@/components/nurui/magnet-button-demo.tsx?raw";
 import MagnetButtonCode from "@/components/nurui/magnet-button.tsx?raw";
+import PlayButtonDemoCode from "@/components/nurui/play-button-demo.tsx?raw";
+import PlayButtonDemo from "@/components/nurui/play-button-demo";
+import PlayButtonCode from "@/components/nurui/play-button.tsx?raw";
 import PlayingCardDemo from "@/components/nurui/playing-card-demo";
 import PlayingCardDemoCode from "@/components/nurui/playing-card-demo.tsx?raw";
 import PlayingCardCode from "@/components/nurui/playing-card.tsx?raw";
@@ -193,6 +196,7 @@ import HoverFooterCode from "@/components/nurui/hover-footer.tsx?raw";
 import TextHoverEffectCode from "@/components/nurui/text-hover-effect.tsx?raw";
 import FooterBackgroundGradient from "@/components/nurui/footer-background-gradient.tsx?raw";
 
+
 type CodeEntry = {
   fileName: string;
   code: string;
@@ -357,6 +361,13 @@ export const Index: Record<string, ComponentEntry> = {
       { fileName: "future-frame", code: FrameCode },
     ],
   },
+  PlayButton: {
+    preview: <PlayButtonDemo />,
+    code: PlayButtonDemoCode,
+    othersCode: [
+      { fileName: "play-button", code: PlayButtonCode }
+    ],
+  },
   // cards
   playingCard: {
     preview: <PlayingCardDemo />,