Dennis Simon
31 lines
754 B
TypeScript
31 lines
754 B
TypeScript
import { twMerge } from 'tailwind-merge';
|
|
import { tv } from 'tailwind-variants';
|
|
|
|
type AlertVariants = 'error' | 'success';
|
|
|
|
const alert = tv({
|
|
base: 'w-full py-2 flex items-center justify-center rounded-[14px] text-base font-sans text-center',
|
|
variants: {
|
|
error: {
|
|
true: 'bg-error-50 text-red',
|
|
},
|
|
success: {
|
|
true: 'bg-success-100 text-success-800',
|
|
},
|
|
},
|
|
});
|
|
|
|
type AlertProps = {
|
|
className?: string;
|
|
variant: AlertVariants;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function Alert({ className, variant, children }: AlertProps) {
|
|
return (
|
|
<div role="alert" className={twMerge(alert({ [variant]: true }), className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|