My personal website
renderg.host
1import { usePageTheme } from '@/components/Layout/Layout';
2import { cn } from '@/lib/utils';
3import React from 'react';
4import { buttonBase, buttonVariants } from './Button.styles';
5import { ButtonProps } from './Button.types';
6
7export const Button: React.FC<ButtonProps> = ({ children, variant = 'primary', className = '', ...props }) => {
8 const pageTheme = usePageTheme();
9
10 // Theme-based button colors:
11 // Accent: white border, semi-transparent white bg
12 // Default: blue border in light mode, white in dark, semi-transparent bg
13 const themeClasses = pageTheme === 'accent'
14 ? 'border-bones-white bg-bones-white-20 hover:bg-bones-white-30'
15 : 'border-bones-blue dark:border-bones-white bg-bones-blue-10 dark:bg-bones-white-10 hover:bg-bones-blue-20 dark:hover:bg-bones-white-20';
16
17 return (
18 <button className={cn(buttonBase, buttonVariants[variant], themeClasses, className)} {...props}>
19 {children}
20 </button>
21 );
22};
23
24export default Button;