vojtech.mares/backup-websites-2024-01
Archived
1
0
Fork 0
Code Activity

feat(button): button size is configurable via prop

Browse source
This commit is contained in:
Vojtěch Mareš 2023-01-06 12:42:57 +01:00
parent 307818ca43
commit 6a8c538b90
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
1 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/Button.tsx
View file

@ -4,9 +4,9 @@ import { ReactNode } from "react";
const baseStyles = {
solid:
"group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
"group inline-flex items-center justify-center rounded-full font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
outline:
"group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none",
"group inline-flex ring-1 items-center justify-center rounded-full focus:outline-none",
};
const variantStyles = {
@ -27,9 +27,15 @@ const variantStyles = {
},
};
const sizeStyles = {
default: "px-4 py-2 text-sm",
large: "px-8 py-4 text-base",
};
type Props = {
variant?: "solid" | "outline";
color?: "slate" | "white" | "blue";
size?: "default" | "large";
className?: string;
href?: string;
children?: ReactNode;
@ -38,6 +44,7 @@ type Props = {
export function Button({
variant = "solid",
color = "slate",
size = "default",
className,
href,
children,
@ -45,6 +52,7 @@ export function Button({
className = clsx(
baseStyles[variant],
variantStyles[variant][color],
sizeStyles[size],
className
);