Feature discovery alert

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

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame variant="ghost">
      <FramePanel class="overflow-hidden p-0!">
        <Alert variant="info" class="border-0 shadow-none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-lightbulb"
          >
            <path
              d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
            />
            <path d="M9 18h6" />
            <path d="M10 22h4" />
          </svg>
          <AlertTitle>New: Advanced Analytics</AlertTitle>
          <AlertAction>
            <Button
              size="xs"
              variant="ghost"
              class="text-muted-foreground hover:text-foreground -mt-1 -mr-2 size-7 p-0 hover:bg-transparent"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
                class="lucide lucide-x size-3.5"
              >
                <path d="M18 6 6 18" />
                <path d="m6 6 12 12" />
              </svg>
            </Button>
          </AlertAction>
          <AlertDescription>
            We've just released a new dashboard for tracking your team's
            performance.
            <Button
              variant="link"
              size="sm"
              class="text-info h-auto p-0 underline"
            >
              Explore features
            </Button>
          </AlertDescription>
        </Alert>
      </FramePanel>
    </Frame>
  </div>
</template>