Pixelact Alert

1import { type VariantProps, cva } from "class-variance-authority";
2import { cn } from "@/lib/utils";
3import {
4  Alert as ShadcnAlert,
5  AlertDescription as ShadcnAlertDescription,
6  AlertTitle as ShadcnAlertTitle,
7} from "@/components/ui/alert";
8import "@/components/ui/pixelact-ui/styles/styles.css";
9 
10const alertVariants = cva("", {
11  variants: {
12    font: {
13      normal: "",
14      pixel: "pixel-font",
15    },
16    variant: {
17      default: "bg-card text-card-foreground",
18      destructive:
19        "text-destructive shadow-(--pixel-box-shadow-destructive) bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
20    },
21  },
22  defaultVariants: {
23    variant: "default",
24    font: "pixel",
25  },
26});
27 
28export interface AlertProps
29  extends React.ComponentProps<"div">,
30    VariantProps<typeof alertVariants> {}
31 
32function Alert({ children, ...props }: AlertProps) {
33  const { variant, className, font } = props;
34 
35  return (
36    <ShadcnAlert
37      {...props}
38      className={cn(
39        "relative shadow-(--pixel-box-shadow) box-shadow-margin rounded-none border-none bg-background",
40        alertVariants({ variant, font }),
41        className
42      )}
43    >
44      {children}
45    </ShadcnAlert>
46  );
47}
48 
49function AlertTitle({
50  className,
51  ...props
52}: React.HTMLAttributes<HTMLDivElement>) {
53  return (
54    <ShadcnAlertTitle
55      className={cn(
56        "line-clamp-1 text-base underline mb-2 font-medium tracking-tight",
57        className
58      )}
59      {...props}
60    />
61  );
62}
63 
64function AlertDescription({
65  className,
66  ...props
67}: React.HTMLAttributes<HTMLDivElement>) {
68  return (
69    <ShadcnAlertDescription
70      className={cn(
71        "grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
72        className
73      )}
74      {...props}
75    />
76  );
77}
78 
79export { Alert, AlertTitle, AlertDescription };