GrAlert

<script setup lang="ts">
import { ref } from 'vue'

import { GrAlert, GrButton } from '@feugene/granularity'

const visible = ref(true)
const attempts = ref(0)
</script>

<template>
  <div class="grid gap-4">
    <GrAlert
      v-model:visible="visible"
      tone="danger"
      title="Export failed"
      closable
    >
      The report service returned 502 while building «Q3 revenue».

      <template #actions>
        <GrButton size="sm" tone="danger" @click="attempts++">
          Retry
        </GrButton>
        <GrButton size="sm" variant="outline" tone="danger">
          Open logs
        </GrButton>
      </template>
    </GrAlert>

    <div v-if="!visible" class="flex items-center gap-3">
      <span class="text-sm text-[var(--gr-muted-fg)]">Alert dismissed itself.</span>
      <GrButton size="sm" variant="outline" @click="visible = true">
        Bring it back
      </GrButton>
    </div>

    <GrAlert tone="slate" :icon="false">
      Retried {{ attempts }} time(s). Without an icon the message reads as a plain note —
      useful in dense forms where every alert would otherwise shout.
    </GrAlert>
  </div>
</template>

<script setup lang="ts">
import { GrAlert } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-3">
    <GrAlert title="Info" tone="info">
      Deploy preview URL is ready for the QA handoff.
    </GrAlert>
    <GrAlert title="Success" tone="success">
      Billing sync finished and no manual retries are required.
    </GrAlert>
    <GrAlert title="Warning" tone="warning">
      API quota is at 78%; consider moving heavy jobs to the night window.
    </GrAlert>
    <GrAlert title="Danger" tone="danger">
      Background worker lost connection to Redis and needs operator attention.
    </GrAlert>
    <GrAlert title="Slate" tone="slate">
      Runbook is archived and kept for passive operator context.
    </GrAlert>
    <GrAlert title="Azure" tone="azure">
      Release note references are ready for stakeholder review.
    </GrAlert>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrAlert, GrButton, GrCard } from '@feugene/granularity'

const visible = ref(true)
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
    <GrAlert
      v-if="visible"
      title="Maintenance window"
      tone="warning"
      closable
      @close="visible = false"
    >
      Payments will be processed in read-only mode from 02:00 to 02:30 UTC.
    </GrAlert>

    <GrCard v-else class="flex min-h-[92px] items-center justify-center p-4 text-sm text-[var(--gr-muted-fg)]">
      Alert dismissed. Bring it back from the side panel.
    </GrCard>

    <GrCard class="grid gap-3 p-4">
      <div>
        <div class="text-sm font-semibold text-[var(--gr-fg)]">
          Close event
        </div>
        <div class="text-sm text-[var(--gr-muted-fg)]">
          `close` is emitted so the host screen can hide or persist the banner state.
        </div>
      </div>

      <GrButton size="sm" variant="outline" :disabled="visible" @click="visible = true">
        Restore alert
      </GrButton>
    </GrCard>
  </div>
</template>

<script setup lang="ts">
import { GrAlert } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-3 lg:grid-cols-2">
    <GrAlert
      title="Custom brand banner"
      background-color="#ecfeff"
      border-color="#22d3ee"
      text-color="#155e75"
    >
      Teams often override colors to align alerts with domain-specific dashboards or tenant branding.
    </GrAlert>

    <GrAlert
      title="Muted reminder"
      background-color="#f8fafc"
      border-color="#cbd5e1"
      text-color="#334155"
    >
      The component still keeps the same layout, icon slotting and close mechanics while colors are fully customized.
    </GrAlert>
  </div>
</template>