From 89fa6b73abc5e630e682f0ca5ec2a7127e409e18 Mon Sep 17 00:00:00 2001
From: dev-louis <louis@worldoflouis.co.uk>
Date: Fri, 22 Nov 2024 14:14:03 +0000
Subject: [PATCH] Add button component 52

---
 app/buttons/page.tsx             |  1 +
 components/buttons/button-52.tsx | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 components/buttons/button-52.tsx

diff --git a/app/buttons/page.tsx b/app/buttons/page.tsx
index da2c721e..a4ce8749 100644
--- a/app/buttons/page.tsx
+++ b/app/buttons/page.tsx
@@ -62,6 +62,7 @@ const files = [
   "button-49",
   "button-50",
   "button-51",
+  "button-52",
 ];
 
 export default function Page() {
diff --git a/components/buttons/button-52.tsx b/components/buttons/button-52.tsx
new file mode 100644
index 00000000..b7a3bacb
--- /dev/null
+++ b/components/buttons/button-52.tsx
@@ -0,0 +1,18 @@
+// Dependencies: pnpm install lucide-react
+
+import { Button } from "@/components/ui/button";
+import { ChevronRight } from "lucide-react";
+
+export default function Button52() {
+  return (
+    <Button className="group relative bg-primary text-primary-foreground hover:bg-primary/90">
+      Button
+      <ChevronRight
+        className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-2 group-hover:opacity-100"
+        size={16}
+        strokeWidth={2}
+        aria-hidden="true"
+      />
+    </Button>
+  );
+}