MicroClub Alert

1'use client';
2 
3import * as React from 'react';
4import { CircleAlert, CircleCheck, Popcorn } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7type AlertVariant = 'success' | 'default' | 'destructive';
8 
9interface McAlertProps extends React.HTMLAttributes<HTMLDivElement> {
10  variant: AlertVariant;
11  title: string;
12  description?: string;
13  items?: string[];
14}
15 
16const variantStyles: Record<AlertVariant, string> = {
17  success:
18    'border border-success rounded-lg w-fit max-w-[719px] pt-[12px] pb-[14px] pl-[12px] pr-[12px]',
19  default: 'border border-border rounded-lg w-fit max-w-[719px] pl-[16px] pr-3 py-3',
20  destructive: 'border border-destructive rounded-lg w-fit max-w-[719px] pl-[16px] pr-4 py-3',
21};
22 
23const titleStyles: Record<AlertVariant, string> = {
24  success: 'text-success font-medium text-base leading-6',
25  default: 'text-card-foreground font-medium text-base leading-6',
26  destructive: 'text-destructive font-medium text-base leading-6',
27};
28 
29const descStyles: Record<AlertVariant, string> = {
30  success: 'text-success font-normal text-sm leading-5',
31  default: 'text-muted-foreground font-normal text-sm leading-5',
32  destructive: 'text-destructive font-normal text-sm leading-5',
33};
34 
35const iconMap: Record<AlertVariant, React.ReactNode> = {
36  success: <CircleCheck className="size-4 shrink-0 stroke-2 text-success" />,
37  default: <Popcorn className="size-4 shrink-0 stroke-2 text-card-foreground" />,
38  destructive: <CircleAlert className="size-4 shrink-0 stroke-2 text-destructive" />,
39};
40 
41const iconGap: Record<AlertVariant, string> = {
42  success: 'gap-1',
43  default: 'gap-3',
44  destructive: 'gap-3',
45};
46 
47function McAlert({ variant, title, description, items, className, ...props }: McAlertProps) {
48  const hasSupportingContent = !!description || !!items?.length;
49 
50  return (
51    <div
52      data-slot="mc-alert"
53      data-variant={variant}
54      className={cn(variantStyles[variant], className)}
55      role="alert"
56      {...props}
57    >
58      <div
59        className={cn(
60          'flex',
61          hasSupportingContent ? 'items-start' : 'items-center',
62          iconGap[variant]
63        )}
64      >
65        <div className={cn('shrink-0', hasSupportingContent && 'pt-1')}>{iconMap[variant]}</div>
66        <div className="min-w-0">
67          <span className={cn('block', titleStyles[variant])}>{title}</span>
68 
69          {description && <p className={cn('mt-0.5', descStyles[variant])}>{description}</p>}
70 
71          {items && items.length > 0 && (
72// … truncated