Alert

import { Alert } from "@/components/vip-ui/alert";export function AlertBasicDemo() {  return (    <Alert title="Preview mode" className="w-full max-w-lg">      Changes stay in this workspace until you publish.    </Alert>  );}

import { Alert } from "@/components/vip-ui/alert";export function AlertDemo() {  return (    <div className="grid w-full max-w-lg gap-3">      <Alert title="Preview mode">        Changes stay in this workspace until you publish.      </Alert>      <Alert variant="success" title="Ready to publish">        Your changes are saved and can go live.      </Alert>      <Alert variant="warning" title="Check your billing details">        Update the card on file before the next renewal.      </Alert>      <Alert variant="error" title="Could not save changes">        Check your connection and try again.      </Alert>      <Alert variant="neutral" title="Scheduled maintenance">        The workspace will be read-only on Sunday morning.      </Alert>    </div>  );}

import { Alert } from "@/components/vip-ui/alert";import { ButtonLink } from "@/components/vip-ui/button-link";export function AlertActionDemo() {  return (    <Alert      title="Set up your project"      action={        <ButtonLink href="/components/installation" variant="outline" size="sm">          View setup        </ButtonLink>      }      className="w-full max-w-lg"    >      Complete the one-time setup before you add a component.    </Alert>  );}

"use client";import { useRef, useState } from "react";import { Alert } from "@/components/vip-ui/alert";import { Button } from "@/components/vip-ui/button";import { Presence } from "@/components/vip-ui/presence";export function AlertDismissDemo() {  const [show, setShow] = useState(true);  const restoreRef = useRef<HTMLButtonElement>(null);  return (    <div className="grid w-full max-w-lg justify-items-start gap-3">      <Button        ref={restoreRef}        variant="outline"        size="sm"        onPress={() => setShow(true)}      >        Send invite      </Button>      <Presence show={show} className="w-full">        <Alert          variant="success"          title="Invite sent"          onDismiss={() => {            restoreRef.current?.focus();            setShow(false);          }}        >          Maya gets an email with a link to join.        </Alert>      </Presence>    </div>  );}