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 class="grid-cols-[32px_1fr] gap-x-3 border-0 shadow-none">
          <Avatar class="size-8 border">
            <AvatarImage :src="PIXEL" alt="Alex Johnson" />
            <AvatarFallback>AJ</AvatarFallback>
          </Avatar>
          <AlertTitle class="flex items-center gap-2">
            <span class="truncate">Alex Johnson</span>
            <span class="text-muted-foreground truncate font-normal">
              sent you a message
            </span>
          </AlertTitle>
          <AlertAction>
            <Button size="xs" variant="outline">View</Button>
            <Button size="xs">Reply</Button>
          </AlertAction>
          <AlertDescription class="line-clamp-1">
            "Hey! I've finished the draft for the new design system. Let me
            know what you think when you have a moment."
          </AlertDescription>
        </Alert>
      </FramePanel>
    </Frame>
  </div>
</template>