Banner

1"use client";23import { Button } from "@/components/ui/button";45export function Banner01() {6  return (7    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">8      <div className="min-w-0">9        <p className="text-sm tracking-wide text-foreground">10          New blocks are live11        </p>12        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">13          Copy ready made layouts into your app and restyle them with your14          tokens.15        </p>16      </div>17      <Button size="sm" variant="secondary" className="shrink-0 self-start sm:self-auto">18        Browse blocks19      </Button>20    </div>21  );22}

1"use client";23import { useState } from "react";4import { Button } from "@/components/ui/button";56function CloseIcon({ className }: { className?: string }) {7  return (8    <svg9      viewBox="0 0 24 24"10      fill="none"11      aria-hidden="true"12      className={className}13    >14      <path15        d="M6 6l12 12M18 6L6 18"16        stroke="currentColor"17        strokeWidth="1.5"18        strokeLinecap="round"19      />20    </svg>21  );22}2324export function Banner02() {25  const [open, setOpen] = useState(true);2627  if (!open) return null;2829  return (30    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">31      <div className="min-w-0">32        <p className="text-sm tracking-wide text-foreground">33          Shipping updates for all regions34        </p>35        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">36          Check the changelog before you ship so nothing slips through.37        </p>38      </div>39      <Button40        type="button"41        size="icon-sm"42        variant="ghost"43        aria-label="Dismiss"44        className="shrink-0 self-start sm:self-auto"45        onClick={() => setOpen(false)}46      >47        <CloseIcon />48      </Button>49    </div>50  );51}

1"use client";23import { useState } from "react";4import { Button } from "@/components/ui/button";56function CloseIcon({ className }: { className?: string }) {7  return (8    <svg9      viewBox="0 0 24 24"10      fill="none"11      aria-hidden="true"12      className={className}13    >14      <path15        d="M6 6l12 12M18 6L6 18"16        stroke="currentColor"17        strokeWidth="1.5"18        strokeLinecap="round"19      />20    </svg>21  );22}2324export function Banner03() {25  const [open, setOpen] = useState(true);2627  if (!open) return null;2829  return (30    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">31      <div className="min-w-0">32        <p className="text-sm tracking-wide text-foreground">33          Maintenance window this Sunday34        </p>35        <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">36          Expect a short pause around midnight while we roll out the next cut.37        </p>38      </div>39      <div className="flex shrink-0 items-center gap-1 self-start sm:self-auto">40        <Button size="sm" variant="secondary">41          View schedule42        </Button>43        <Button44          type="button"45          size="icon-sm"46          variant="ghost"47          aria-label="Dismiss"48          onClick={() => setOpen(false)}49        >50          <CloseIcon />51        </Button>52      </div>53    </div>54  );55}

1"use client";23import { Button } from "@/components/ui/button";45function InfoIcon({ className }: { className?: string }) {6  return (7    <svg8      viewBox="0 0 24 24"9      fill="none"10      aria-hidden="true"11      className={className}12    >13      <circle14        cx="12"15        cy="12"16        r="9"17        stroke="currentColor"18        strokeWidth="1.5"19      />20      <path21        d="M12 11v5M12 8h.01"22        stroke="currentColor"23        strokeWidth="1.5"24        strokeLinecap="round"25      />26    </svg>27  );28}2930export function Banner04() {31  return (32    <div className="flex w-full flex-col gap-3 rounded-md bg-muted px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">33      <div className="flex min-w-0 gap-3">34        <InfoIcon className="mt-0.5 size-4 shrink-0 text-foreground" />35        <div className="min-w-0">36          <p className="text-sm tracking-wide text-foreground">37            API keys rotate next week38          </p>39          <p className="mt-0.5 text-xs tracking-wide text-muted-foreground">40            Update your clients before the old keys stop working.41          </p>42        </div>43      </div>44      <Button size="sm" variant="secondary" className="shrink-0 self-start sm:self-auto">45        Read guide46      </Button>47    </div>48  );49}

1"use client";23import { Button } from "@/components/ui/button";45export function Banner05() {6  return (7    <div className="@container w-full border-b border-border bg-secondary">8      <div className="flex w-full flex-col items-center gap-2 px-4 py-2.5 text-center @[32rem]:flex-row @[32rem]:justify-center @[32rem]:gap-3">9        <p className="text-sm tracking-wide text-secondary-foreground">10          Arctis UI v2 is out.{" "}11          <span className="text-secondary-foreground/70">12            New blocks, tokens, and docs.13          </span>14        </p>15        <Button16          size="sm"17          variant="ghost"18          className="h-7 shrink-0 text-secondary-foreground hover:bg-secondary-foreground/10 hover:text-secondary-foreground"19        >20          See what's new21        </Button>22      </div>23    </div>24  );25}