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

style: run prettier

Browse source
This commit is contained in:
Vojtěch Mareš 2022-12-19 10:16:19 +01:00
parent 2193d68895
commit d80c0ec7de
Signed by: vojtech.mares
GPG key ID: C6827B976F17240D
27 changed files with 698 additions and 569 deletions
Download patch file Download diff file Expand all files Collapse all files

56
components/Button.tsx
View file

@ -1,64 +1,60 @@
import Link from 'next/link'
import clsx from 'clsx'
import { ReactNode } from 'react'
import Link from "next/link";
import clsx from "clsx";
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 py-2 px-4 text-sm 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 py-2 px-4 text-sm focus:outline-none",
};
const variantStyles = {
solid: {
slate:
'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
"bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
blue: "bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
white:
'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white',
"bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
},
outline: {
slate:
'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
"ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300",
white:
'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white',
blue: // Supress TypeScript error
'', // TODO: fix properly
"ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white",
// Supress TypeScript error
blue: "", // TODO: fix properly
},
}
};
type Props = {
variant?: 'solid'|'outline',
color?: 'slate'|'white'|'blue',
className?: string,
href?: string,
children?: ReactNode,
}
variant?: "solid" | "outline";
color?: "slate" | "white" | "blue";
className?: string;
href?: string;
children?: ReactNode;
};
export function Button({
variant = 'solid',
color = 'slate',
variant = "solid",
color = "slate",
className,
href,
children
children,
}: Props) {
className = clsx(
baseStyles[variant],
variantStyles[variant][color],
className
)
);
if (href !== undefined) {
return (
<Link href={href} className={className}>
{children}
</Link>
)
);
} else {
return (
<button className={className}>
{children}
</button>
)
return <button className={className}>{children}</button>;
}
}