Skip to content

refactor: enhance button components with interactive states and styling #1386

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

Closed
shinobiwanshin wants to merge 1 commit into from
Closed

refactor: enhance button components with interactive states and styling #1386

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
165 changes: 102 additions & 63 deletions docs/src/components/GitHubButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,131 @@
import type { ReactNode } from 'react';
import { FaGithub, FaYoutube } from 'react-icons/fa';
import { MdMenuBook, MdDriveEta } from 'react-icons/md';
import type { ReactNode } from "react";
import { FaGithub, FaYoutube } from "react-icons/fa";
import { MdMenuBook, MdDriveEta } from "react-icons/md";
import { useState } from "react";

type ButtonProps = {
href: string;
children: ReactNode;
margin?: string;
href: string;
children: ReactNode;
margin?: string;
};

function Button({ href, children, margin = '0' }: ButtonProps): ReactNode {
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
style={{
display: 'inline-block',
padding: '8px 12px',
margin: margin,
borderRadius: '4px',
textDecoration: 'none',
border: '1px solid #ccc',
color: 'var(--ifm-color-default)',
fontSize: '0.85rem',
}}
>
{children}
</a>
);
function Button({ href, children, margin = "0" }: ButtonProps): ReactNode {
const [hover, setHover] = useState(false);
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using useState for hover effects causes unnecessary re-renders on every mouse enter/leave event. Consider using CSS pseudo-classes (:hover, :focus) instead, which would be more performant and avoid component re-renders. CSS transitions can handle all the visual effects without state management.

Copilot uses AI. Check for mistakes.

return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="button button--outline button--secondary"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Combining Docusaurus button classes with inline styles that override those classes can lead to styling conflicts and inconsistent behavior across themes. The className uses Docusaurus's built-in button classes which already have hover states defined, but the inline styles are overriding them. Consider either using the Docusaurus classes fully or removing them in favor of custom styling.

Suggested change
className="button button--outline button--secondary"

Copilot uses AI. Check for mistakes.
style={{
margin,
fontSize: "0.85rem",
cursor: "pointer",
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button's cursor style is set to "pointer" in inline styles, but anchor tags with href already have pointer cursor by default. This is redundant and can be removed.

Suggested change
cursor: "pointer",

Copilot uses AI. Check for mistakes.
borderColor: "var(--ifm-color-primary)",
color: hover ? "#fff" : "var(--ifm-color-primary)",
backgroundColor: hover ? "var(--ifm-color-primary)" : "transparent",
boxShadow: hover
? "var(--coco-glow, 0 0 0 6px rgba(91,91,214,0.08))"
: "var(--coco-shadow, 0 6px 18px rgba(91,91,214,0.06))",
transition:
"background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 80ms ease",
}}
Comment on lines +21 to +33
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inline style object contains complex conditional logic for hover states, making it difficult to maintain and test. Consider extracting the style logic into a separate function or using CSS-in-JS libraries that support pseudo-selectors, or moving these styles to a CSS module where hover states can be defined declaratively.

Copilot uses AI. Check for mistakes.
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
onFocus={() => setHover(true)}
onBlur={() => setHover(false)}
>
{children}
</a>
);
}

type GitHubButtonProps = {
url: string;
margin?: string;
url: string;
margin?: string;
};

function GitHubButton({ url, margin = '0' }: GitHubButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<FaGithub style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
View on GitHub
</Button>
);
function GitHubButton({ url, margin = "0" }: GitHubButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<FaGithub
style={{
marginRight: "8px",
verticalAlign: "middle",
fontSize: "1rem",
}}
/>
View on GitHub
</Button>
);
}

type YouTubeButtonProps = {
url: string;
margin?: string;
url: string;
margin?: string;
};

function YouTubeButton({ url, margin = '0' }: YouTubeButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<FaYoutube style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
Watch on YouTube
</Button>
);
function YouTubeButton({ url, margin = "0" }: YouTubeButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<FaYoutube
style={{
marginRight: "8px",
verticalAlign: "middle",
fontSize: "1rem",
}}
/>
Watch on YouTube
</Button>
);
}

type DocumentationButtonProps = {
url: string;
text: string;
margin?: string;
url: string;
text: string;
margin?: string;
};

function DocumentationButton({ url, text, margin }: DocumentationButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<MdMenuBook style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
{text}
</Button>
);
function DocumentationButton({
url,
text,
margin,
}: DocumentationButtonProps): ReactNode {
return (
<Button href={url} margin={margin}>
<MdMenuBook
style={{
marginRight: "8px",
verticalAlign: "middle",
fontSize: "1rem",
}}
/>
{text}
</Button>
);
}

// ExampleButton as requested
type ExampleButtonProps = {
href: string;
text: string;
margin?: string;
href: string;
text: string;
margin?: string;
};

function ExampleButton({ href, text, margin }: ExampleButtonProps): ReactNode {
return (
<Button href={href} margin={margin}>
<MdDriveEta style={{ marginRight: '8px', verticalAlign: 'middle', fontSize: '1rem' }} />
{text}
</Button>
);
return (
<Button href={href} margin={margin}>
<MdDriveEta
style={{
marginRight: "8px",
verticalAlign: "middle",
fontSize: "1rem",
}}
/>
{text}
</Button>
);
}

export { GitHubButton, YouTubeButton, DocumentationButton, ExampleButton };