53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { svgs } from './svgs';
|
|
|
|
interface ButtonProps {
|
|
className?: string;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
children?: React.ReactNode;
|
|
px?: string;
|
|
white?: boolean;
|
|
isPrimary?: boolean;
|
|
isSecondary?: boolean;
|
|
}
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
className,
|
|
href,
|
|
onClick,
|
|
children,
|
|
px,
|
|
white,
|
|
}) => {
|
|
const classes = `button relative inline-flex items-center justify-center h-11 ${
|
|
px || 'px-7'
|
|
} ${white ? 'text-n-8' : 'text-n-1'} transition-colors hover:text-color-1 ${
|
|
className || ''
|
|
}`;
|
|
|
|
const spanClasses = `relative z-10`;
|
|
|
|
return href ? (
|
|
href.startsWith('mailto:') ? (
|
|
<a href={href} className={classes}>
|
|
<span className={spanClasses}>{children}</span>
|
|
{svgs(white)}
|
|
</a>
|
|
) : (
|
|
<Link to={href} className={classes}>
|
|
<span className={spanClasses}>{children}</span>
|
|
{svgs(white)}
|
|
</Link>
|
|
)
|
|
) : (
|
|
<button className={classes} onClick={onClick}>
|
|
<span className={spanClasses}>{children}</span>
|
|
{svgs(white)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|