44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import type { HTMLAttributes } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
const variants = cva('flex p-4 mb-4 text-s rounded-md', {
|
|
defaultVariants: {
|
|
color: 'default',
|
|
},
|
|
variants: {
|
|
color: {
|
|
danger: 'border-red-300 bg-red-50 p-4 text-sm text-red-800',
|
|
default: 'border-blue-300 bg-blue-50 p-4 text-sm text-blue-800',
|
|
success: 'border-green-300 bg-green-50 p-4 text-sm text-green-800',
|
|
warning: 'border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-800',
|
|
},
|
|
},
|
|
});
|
|
|
|
export type AlertProps = HTMLAttributes<HTMLDivElement> &
|
|
VariantProps<typeof variants> & { readonly description?: string; readonly title: string };
|
|
|
|
export const Alert = forwardRef<HTMLDivElement, AlertProps>(
|
|
({ className, color, description, title, ...props }, ref) => (
|
|
<div className={cn(variants({ className, color }))} role="alert" {...props} ref={ref}>
|
|
<svg
|
|
className="mr-3 mt-[2px] inline h-4 w-4 flex-shrink-0"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
|
|
</svg>
|
|
<span className="sr-only">Info</span>
|
|
<div>
|
|
<span className="font-medium">{title}</span>
|
|
{description && <div className="mt-1.5 list-inside list-disc">{description}</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|