Banner

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Default() {
6  return (
7    <Banner className="max-w-lg">
8      <Banner.Content>
9        <Banner.Title>Deploy previews are now free on every plan</Banner.Title>
10        <Banner.Description>
11          Every pull request gets its own preview URL, with no extra build minutes.
12        </Banner.Description>
13      </Banner.Content>
14      <Banner.Action href="#changelog">Read the changelog</Banner.Action>
15    </Banner>
16  );
17}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Info() {
6  return (
7    <Banner variant="info" className="max-w-lg">
8      <Banner.Content>
9        <Banner.Title>Scheduled maintenance on Mar 14</Banner.Title>
10        <Banner.Description>
11          The dashboard is read only from 02:00 to 04:00 UTC. Running deploys are not affected.
12        </Banner.Description>
13      </Banner.Content>
14      <Banner.Action href="#status">Status page</Banner.Action>
15    </Banner>
16  );
17}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Warning() {
6  return (
7    <Banner variant="warning" className="max-w-lg">
8      <Banner.Content>
9        <Banner.Title>Your API key expires in 5 days</Banner.Title>
10        <Banner.Description>
11          The key ending in 8f21 stops working on Mar 28. Rotate it before then to avoid failed
12          requests.
13        </Banner.Description>
14      </Banner.Content>
15      <Banner.Action href="#api-keys">Rotate key</Banner.Action>
16    </Banner>
17  );
18}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Danger() {
6  return (
7    <Banner variant="danger" className="max-w-lg">
8      <Banner.Content>
9        <Banner.Title>We could not charge your card</Banner.Title>
10        <Banner.Description>
11          The payment for invoice INV-2043 was declined. Update your billing details before Mar 20
12          to keep the Team plan.
13        </Banner.Description>
14      </Banner.Content>
15      <Banner.Action href="#billing">Update card</Banner.Action>
16    </Banner>
17  );
18}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Success() {
6  return (
7    <Banner variant="success" className="max-w-lg">
8      <Banner.Content>
9        <Banner.Title>acmestudio.dev is verified</Banner.Title>
10        <Banner.Description>
11          DNS records propagated and the certificate was issued. Production traffic is live.
12        </Banner.Description>
13      </Banner.Content>
14      <Banner.Action href="#domains">View domain</Banner.Action>
15    </Banner>
16  );
17}

1'use client';
2
3import { useState } from 'react';
4import { Banner } from '@/components/ui/banner';
5import { Button } from '@/components/ui/button';
6
7export function Dismissible() {
8  const [key, setKey] = useState(0);
9
10  return (
11    <div className="flex w-full max-w-lg flex-col items-start gap-3">
12      <Banner key={key} variant="info" onClose={() => {}}>
13        <Banner.Content>
14          <Banner.Title>Your trial ends in 3 days</Banner.Title>
15          <Banner.Description>
16            After Mar 20 the workspace drops to the free plan and keeps one project.
17          </Banner.Description>
18        </Banner.Content>
19        <Banner.Action href="#plans">Compare plans</Banner.Action>
20      </Banner>
21      <Button variant="ghost" size="sm" onClick={() => setKey((k) => k + 1)}>
22        Show the banner again
23      </Button>
24    </div>
25  );
26}