From 73b302eea2c45f57252f09f81c0f35b4ca28e706 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 4 Aug 2026 12:56:06 +0000
Subject: [PATCH] refactor: remove deprecated React.forwardRef in buttons

Co-authored-by: SayanthRock <202829406+SayanthRock@users.noreply.github.com>
---
 src/components/ContactButton.tsx     | 50 +++++++++++++---------------
 src/components/LiveProjectButton.tsx | 42 +++++++++++------------
 2 files changed, 44 insertions(+), 48 deletions(-)

diff --git a/src/components/ContactButton.tsx b/src/components/ContactButton.tsx
index 470cd2f..e1a139f 100644
--- a/src/components/ContactButton.tsx
+++ b/src/components/ContactButton.tsx
@@ -1,32 +1,30 @@
-import React from 'react';
+import { type ComponentProps } from 'react';
 import { cn } from '../utils/cn';
 
-interface ContactButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ContactButtonProps extends ComponentProps<'button'> {
   className?: string;
 }
 
-export const ContactButton = React.forwardRef<HTMLButtonElement, ContactButtonProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          "rounded-full px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4",
-          "text-white font-medium uppercase tracking-widest",
-          "text-xs sm:text-sm md:text-base",
-          className
-        )}
-        style={{
-          background: "linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)",
-          boxShadow: "0px 4px 4px rgba(181, 1, 167, 0.25), inset 4px 4px 12px #7721B1",
-          outline: "2px solid white",
-          outlineOffset: "-3px",
-        }}
-        {...props}
-      >
-        Contact Me
-      </button>
-    );
-  }
-);
+export const ContactButton = ({ className, ref, ...props }: ContactButtonProps) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "rounded-full px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4",
+        "text-white font-medium uppercase tracking-widest",
+        "text-xs sm:text-sm md:text-base",
+        className
+      )}
+      style={{
+        background: "linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)",
+        boxShadow: "0px 4px 4px rgba(181, 1, 167, 0.25), inset 4px 4px 12px #7721B1",
+        outline: "2px solid white",
+        outlineOffset: "-3px",
+      }}
+      {...props}
+    >
+      Contact Me
+    </button>
+  );
+};
 ContactButton.displayName = 'ContactButton';
diff --git a/src/components/LiveProjectButton.tsx b/src/components/LiveProjectButton.tsx
index 0e9a72e..db5d9eb 100644
--- a/src/components/LiveProjectButton.tsx
+++ b/src/components/LiveProjectButton.tsx
@@ -1,28 +1,26 @@
-import React from 'react';
+import { type ComponentProps } from 'react';
 import { cn } from '../utils/cn';
 
-interface LiveProjectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface LiveProjectButtonProps extends ComponentProps<'button'> {
   className?: string;
 }
 
-export const LiveProjectButton = React.forwardRef<HTMLButtonElement, LiveProjectButtonProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          "rounded-full border-2 border-[#D7E2EA] bg-transparent",
-          "text-[#D7E2EA] font-medium uppercase tracking-widest",
-          "px-8 py-3 sm:px-10 sm:py-3.5",
-          "text-sm sm:text-base",
-          "hover:bg-[#D7E2EA]/10 transition-colors duration-300",
-          className
-        )}
-        {...props}
-      >
-        Live Project
-      </button>
-    );
-  }
-);
+export const LiveProjectButton = ({ className, ref, ...props }: LiveProjectButtonProps) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "rounded-full border-2 border-[#D7E2EA] bg-transparent",
+        "text-[#D7E2EA] font-medium uppercase tracking-widest",
+        "px-8 py-3 sm:px-10 sm:py-3.5",
+        "text-sm sm:text-base",
+        "hover:bg-[#D7E2EA]/10 transition-colors duration-300",
+        className
+      )}
+      {...props}
+    >
+      Live Project
+    </button>
+  );
+};
 LiveProjectButton.displayName = 'LiveProjectButton';