Responsive puzzles & button
This commit is contained in:
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
26
ui/Button.tsx
Normal 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;
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue