User message notification alert

<script setup lang="ts">
import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/reui/alert"
import { Frame, FramePanel } from "@/components/reui/frame"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

const PIXEL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame>
      <FramePanel class="overflow-hidden p-0!">
        <Alert
          variant="invert"
          class="grid-cols-[32px_1fr] gap-x-3 border-0 shadow-none"
        >
          <Avatar class="border-border/10 size-8 border">
            <AvatarImage :src="PIXEL" alt="Sarah Chen" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <AlertTitle class="flex items-center gap-2">
            <span class="truncate">Sarah Chen</span>
            <span class="text-invert-foreground/60 truncate font-normal">
              mentioned you in a comment
            </span>
          </AlertTitle>
          <AlertAction>
            <Button
              variant="outline"
              size="xs"
              class="bg-background/10 border-border/10"
            >
              Dismiss
            </Button>
            <Button
              size="xs"
              class="border-blue-800 bg-blue-500 text-white hover:border-blue-900 hover:bg-blue-600"
            >
              View
            </Button>
          </AlertAction>
          <AlertDescription class="text-invert-foreground/70 line-clamp-1">
            "Great work on the user profile layout! I've added some
            suggestions for the avatar spacing."
          </AlertDescription>
        </Alert>
      </FramePanel>
    </Frame>
  </div>
</template>