Skip to content

🧹 Refactor deprecated React.forwardRef in buttons #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SayanthRock wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🧹 Refactor deprecated React.forwardRef in buttons #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 24 additions & 26 deletions src/components/ContactButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
42 changes: 20 additions & 22 deletions src/components/LiveProjectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';