alert.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. import * as React from 'react';
  2. import { cva, type VariantProps } from 'class-variance-authority';
  3. import { cn } from '@/lib/utils';
  4. const alertVariants = cva(
  5. "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
  6. {
  7. variants: {
  8. variant: {
  9. default: 'bg-card text-card-foreground',
  10. destructive:
  11. 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
  12. },
  13. },
  14. defaultVariants: {
  15. variant: 'default',
  16. },
  17. },
  18. );
  19. function Alert({
  20. className,
  21. variant,
  22. ...props
  23. }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
  24. return (
  25. <div
  26. data-slot="alert"
  27. role="alert"
  28. className={cn(alertVariants({ variant }), className)}
  29. {...props}
  30. />
  31. );
  32. }
  33. function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
  34. return (
  35. <div
  36. data-slot="alert-title"
  37. className={cn(
  38. 'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
  39. className,
  40. )}
  41. {...props}
  42. />
  43. );
  44. }
  45. function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
  46. return (
  47. <div
  48. data-slot="alert-description"
  49. className={cn(
  50. 'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
  51. className,
  52. )}
  53. {...props}
  54. />
  55. );
  56. }
  57. function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
  58. return (
  59. <div
  60. data-slot="alert-action"
  61. className={cn('absolute top-2.5 right-3', className)}
  62. {...props}
  63. />
  64. );
  65. }
  66. export { Alert, AlertTitle, AlertDescription, AlertAction };