Banner

import { Banner } from "@fanvue/ui";
import type { BannerLayout, BannerProps, BannerVariant } from "@fanvue/ui";

import { ArrowRightIcon, Banner, Button } from "@fanvue/ui";

function BannerTertiaryTextAction({ label }: { label: string }) {
  return (
    <Button
      type="button"
      variant="tertiary"
      size="32"
      className="h-auto min-h-0 px-0 py-1 shadow-none hover:bg-transparent active:bg-transparent"
      rightIcon={<ArrowRightIcon className="size-3" aria-hidden />}
    >
      {label}
    </Button>
  );
}

<Banner
  variant="whatsNew"
  layout="compact"
  media={<div className="typography-description-12px-regular flex size-full items-center justify-center bg-surface-tertiary text-content-secondary">
    Art
  </div>}
  title="Perfectly proportioned"
  description="Aspect ratio selection is here!"
  textAction={<BannerTertiaryTextAction label="See how it works" />}
/>

import { ReactNode } from "react";
import { ArrowRightIcon, Badge, Banner, Button, WarningTriangleIcon } from "@fanvue/ui";

const sampleImg = (
  <img
    alt=""
    className="size-full object-cover"
    src="https://placehold.co/96x96/e5e5e5/404040/png?text=•"
  />
);

function NewBadge() {
  return (
    <Badge variant="success" leftDot>
      new
    </Badge>
  );
}

function StatusChip({ children }: { children: ReactNode }) {
  return (
    <Badge
      variant="default"
      leftDot={false}
      leftIcon={<WarningTriangleIcon className="size-2.5" />}
    >
      {children}
    </Badge>
  );
}

<Banner
  variant="Subtle"
  media={sampleImg}
  leadBadge={<NewBadge />}
  title="Find out how OAuth works"
  description="Learn more about how to make an app that works."
  secondaryLine="For the next 7 days when you earn a milestone…"
  stackedAction={<Button variant="primary" size="32" rightIcon={<ArrowRightIcon className="size-3.5" />}>
    Account Health
  </Button>}
  statusRow={<>
    <StatusChip>2 warning</StatusChip>
    <StatusChip>2 media removed</StatusChip>
    <StatusChip>1 media in review</StatusChip>
  </>}
  primaryAction={<Button variant="secondary">Learn more</Button>}
/>

import { Banner, Button } from "@fanvue/ui";

const sampleImg = (
  <img
    alt=""
    className="size-full object-cover"
    src="https://placehold.co/96x96/e5e5e5/404040/png?text=•"
  />
);

<Banner
  variant="Default"
  layout="vertical"
  media={sampleImg}
  eyebrow="HOW TO"
  title="Use Paid Media Links"
  description="For the next 7 days when you earn a milestone…"
  primaryAction={<Button variant="brand">Learn more</Button>}
/>

import { Banner, Button } from "@fanvue/ui";

const sampleImg = (
  <img
    alt=""
    className="size-full object-cover"
    src="https://placehold.co/96x96/e5e5e5/404040/png?text=•"
  />
);

<Banner
  variant="Default"
  layout="horizontal"
  media={sampleImg}
  eyebrow="HOW TO"
  title="Use Paid Media Links"
  description="For the next 7 days when you earn a milestone…"
  primaryAction={<Button variant="brand">Learn more</Button>}
/>

import { useState } from "react";
import { Banner, Button } from "@fanvue/ui";

const sampleImg = (
  <img
    alt=""
    className="size-full object-cover"
    src="https://placehold.co/96x96/e5e5e5/404040/png?text=•"
  />
);

function Example() {
  const [open, setOpen] = useState(true);
  return open ? (
    <Banner
      variant="Default"
      layout="vertical"
      media={sampleImg}
      eyebrow="HOW TO"
      title="Use Paid Media Links"
      description="For the next 7 days when you earn a milestone…"
      primaryAction={<Button variant="brand">Learn more</Button>}
      onDismiss={() => setOpen(false)}
    />
  ) : (
    <Button type="button" variant="text" size="32" onClick={() => setOpen(true)}>
      Reset banner
    </Button>
  );
}