feat: add sliding arrow button component (#369)

animata/button/slide-arrow-button.stories.tsx

@@ -0,0 +1,22 @@
+import SlideArrowButton from "@/animata/button/slide-arrow-button";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Button/Slide Arrow Button",
+  component: SlideArrowButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof SlideArrowButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "Get Started",
+    primaryColor: "#6f3cff",
+  },
+};

animata/button/slide-arrow-button.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ArrowRight } from "lucide-react";
+
+interface SlideArrowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text?: string;
+  primaryColor?: string;
+}
+
+export default function SlideArrowButton({
+  text = "Get Started",
+  primaryColor = "#6f3cff",
+  className = "",
+  ...props
+}: SlideArrowButtonProps) {
+  return (
+    <button
+      className={`group relative rounded-full border border-white bg-white p-2 text-xl font-semibold ${className}`}
+      {...props}
+    >
+      <div
+        className="absolute left-0 top-0 flex h-full w-11 items-center justify-end rounded-full transition-all duration-200 ease-in-out group-hover:w-full"
+        style={{ backgroundColor: primaryColor }}
+      >
+        <span className="mr-3 text-white transition-all duration-200 ease-in-out">
+          <ArrowRight size={20} />
+        </span>
+      </div>
+      <span className="relative left-4 z-10 whitespace-nowrap px-8 font-semibold text-black transition-all duration-200 ease-in-out group-hover:-left-3 group-hover:text-white">
+        {text}
+      </span>
+    </button>
+  );
+}

content/docs/button/index.mdx

@@ -13,6 +13,7 @@ import ExternalLinkButton from "@/animata/button/external-link-button";
 import AlgoliaButtonWhite from "@/animata/button/algolia-white-button";
 import AlgoliaButtonBlue from "@/animata/button/algolia-blue-button";
 import Duolingo from "@/animata/button/duolingo";
+import SlideArrowButton from "@/animata/button/slide-arrow-button";
 
 <ComponentList>
   <ComponentListItem copyId="work-button">
@@ -100,4 +101,12 @@ import Duolingo from "@/animata/button/duolingo";
     ````
 
   </ComponentListItem>
+
+  <ComponentListItem copyId="slide-arrow-button" lazy>
+    <SlideArrowButton text="Get Started"/>
+    ```tsx file=<rootDir>/animata/button/slide-arrow-button.tsx copyId="slide-arrow-button"
+
+    ````
+
+  </ComponentListItem>
 </ComponentList>

content/docs/button/slide-arrow-button.mdx

@@ -0,0 +1,39 @@
+---
+title: Slide Arrow Button
+description: An arrow button which slides on hover
+author: wolfofdalalst
+labels: ["requires interaction", "hover"]
+---
+
+<ComponentPreview name="button-slide-arrow-button--docs" />
+
+## Installation
+
+<Steps>
+<Step>Install dependencies</Step>
+
+```bash
+npm install lucide-react
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `slide-arrow-button.tsx` inside the `components/animata/button` directory.
+
+```bash
+mkdir -p components/animata/button && touch components/animata/button/slide-arrow-button.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/button/slide-arrow-button.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [Ayush Gupta](https://github.com/wolfofdalalst)