Pixelact Alert

import { type VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
import {
  Alert as ShadcnAlert,
  AlertDescription as ShadcnAlertDescription,
  AlertTitle as ShadcnAlertTitle,
} from "@/components/ui/alert";
import "@/components/ui/pixelact-ui/styles/styles.css";

const alertVariants = cva("", {
  variants: {
    font: {
      normal: "",
      pixel: "pixel-font",
    },
    variant: {
      default: "bg-card text-card-foreground",
      destructive:
        "text-destructive shadow-(--pixel-box-shadow-destructive) bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
    },
  },
  defaultVariants: {
    variant: "default",
    font: "pixel",
  },
});

export interface AlertProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof alertVariants> {}

function Alert({ children, ...props }: AlertProps) {
  const { variant, className, font } = props;

  return (
    <ShadcnAlert
      {...props}
      className={cn(
        "relative shadow-(--pixel-box-shadow) box-shadow-margin rounded-none border-none bg-background",
        alertVariants({ variant, font }),
        className
      )}
    >
      {children}
    </ShadcnAlert>
  );
}

function AlertTitle({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <ShadcnAlertTitle
      className={cn(
        "line-clamp-1 text-base underline mb-2 font-medium tracking-tight",
        className
      )}
      {...props}
    />
  );
}

function AlertDescription({
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <ShadcnAlertDescription
      className={cn(
        "grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className
      )}
      {...props}
    />
  );
}

export { Alert, AlertTitle, AlertDescription };

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root {
  --box-shadow-width: 4px;
  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 black,
    var(--box-shadow-width) 0 0 0 black, 0 var(--box-shadow-width) 0 0 black,
    0 calc(-1 * (var(--box-shadow-width))) 0 0 black;
  --pixel-box-shadow-destructive: calc(-1 * (var(--box-shadow-width))) 0 0 0
      var(--destructive),
    var(--box-shadow-width) 0 0 0 var(--destructive),
    0 var(--box-shadow-width) 0 0 var(--destructive),
    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--destructive);
  --default-inner-border-color: rgb(200, 200, 200);
}

.dark {
  --pixel-box-shadow: calc(-1 * (var(--box-shadow-width))) 0 0 0 var(--ring),
    var(--box-shadow-width) 0 0 0 var(--ring),
    0 var(--box-shadow-width) 0 0 var(--ring),
    0 calc(-1 * (var(--box-shadow-width))) 0 0 var(--ring);
}

.pixel-font {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

.box-shadow-margin {
  margin: var(--box-shadow-width);
}