Responsive puzzles & button

This commit is contained in:
Théo 2023-02-04 23:25:38 +01:00
parent 7a368bebe2
commit 887d3f6841
3 changed files with 50 additions and 5 deletions

File diff suppressed because one or more lines are too long

26
ui/Button.tsx Normal file
View file

@ -0,0 +1,26 @@
import { cn } from '@/lib/utils';
import { forwardRef } from 'react';
const Button = forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement> & {
kind?: 'default' | 'outline' | 'danger';
}
>(({ kind = 'default', className, ...props }, ref) => (
<button
ref={ref}
className={cn(
'inline-flex items-center justify-center rounded-lg border-0 px-5 py-2.5 text-center text-sm font-medium outline-none transition-colors focus:outline-none focus:ring-0 disabled:opacity-50',
{
'bg-[#424242] hover:bg-[#424242]/60': kind === 'default',
'bg-red-600 hover:bg-red-600/60': kind === 'danger'
},
className
)}
{...props}
/>
));
Button.displayName = 'Button';
export default Button;

View file

@ -14,7 +14,7 @@ const Input = forwardRef<
<Label label={label} description={description} required={props.required} className={className}>
<input
ref={ref}
className="w-full rounded-lg border-0 bg-[#424242] px-5 py-2.5 text-sm font-medium outline-none transition-colors hover:border-gray-400 focus:outline-none focus:ring-0 disabled:opacity-50"
className="w-full rounded-lg border-0 bg-[#424242] px-5 py-2.5 text-sm font-medium outline-none transition-colors focus:outline-none focus:ring-0 disabled:opacity-50"
{...props}
/>
</Label>