From 5552013824eb3e3e6a98509c2513ef8f5e39d73f Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Sun, 7 Sep 2025 23:06:54 +0200
Subject: [PATCH] feat: introduce a new Button component

---
 .../animate-ui/components/buttons/button.tsx  | 61 +++++++++++++++++++
 frontend/src/components/navbar.tsx            |  2 +-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/animate-ui/components/buttons/button.tsx

diff --git a/frontend/src/components/animate-ui/components/buttons/button.tsx b/frontend/src/components/animate-ui/components/buttons/button.tsx
new file mode 100644
index 000000000..ffd7123be
--- /dev/null
+++ b/frontend/src/components/animate-ui/components/buttons/button.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+import type { ButtonProps as ButtonPrimitiveProps } from "@/components/animate-ui/primitives/buttons/button";
+
+import {
+  Button as ButtonPrimitive,
+
+} from "@/components/animate-ui/primitives/buttons/button";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8 rounded-md",
+        "icon-lg": "size-10 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = ButtonPrimitiveProps & VariantProps<typeof buttonVariants>;
+
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <ButtonPrimitive
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, type ButtonProps, buttonVariants };
diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
index 994f144f2..7057e7f07 100644
--- a/frontend/src/components/navbar.tsx
+++ b/frontend/src/components/navbar.tsx
@@ -4,10 +4,10 @@ import Image from "next/image";
 import Link from "next/link";
 
 import { navbarLinks } from "@/config/site-config";
-import { Button } from "@/components/ui/button";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars";
+import { Button } from "./animate-ui/components/buttons/button";
 import { ThemeToggle } from "./ui/theme-toggle";
 import CommandMenu from "./command-menu";