Snackbar

import { Snackbar } from "@fanvue/ui";
import type { SnackbarProps, SnackbarVariant } from "@fanvue/ui";

import { Snackbar } from "@fanvue/ui";

const DefaultMessage = (
  <span className="typography-body-small-14px-semibold">
    <span>@user.with.username</span> changed their subscription price to <span>$43.99</span> per
    month
  </span>
);

<Snackbar primaryLabel="Accept" secondaryLabel="Dismiss">{DefaultMessage}</Snackbar>

import { Snackbar } from "@fanvue/ui";

<Snackbar
  variant="vipEarn"
  title="You're killing it! You've earned 1,000pts"
  description="Find out how to redeem them, and earn more..."
  primaryLabel="Redeem points"
/>

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

const DefaultMessage = (
  <span className="typography-body-small-14px-semibold">
    <span>@user.with.username</span> changed their subscription price to <span>$43.99</span> per
    month
  </span>
);

const VipBadge = <VipBadgeIcon />;

const VARIANT_CONTENT = [
  {
    variant: "default",
    props: { children: DefaultMessage },
    primary: "Accept",
    secondary: "Dismiss",
  },
  {
    variant: "vipEarn",
    props: {
      icon: VipBadge,
      title: "You're killing it! You've earned 1,000pts",
      description: "Find out how to redeem them, and earn more...",
    },
    primary: "Redeem points",
    secondary: "Maybe later",
  },
  {
    variant: "welcome",
    props: {
      title: "Welcome to Fanvue 👋",
      description: "Let's get you started!",
    },
    primary: "Become a creator",
    secondary: "Discover creators",
  },
] as const;

<div className="flex flex-col gap-10">
  {VARIANT_CONTENT.map(({ variant, props, primary, secondary }) => (
    <div key={variant} className="flex flex-col gap-3">
      <h3 className="typography-body-small-14px-semibold text-content-primary">{variant}</h3>
      <Snackbar
        variant={variant}
        {...props}
        primaryLabel={primary}
        secondaryLabel={secondary}
      />
      <Snackbar variant={variant} {...props} primaryLabel={primary} />
      <Snackbar variant={variant} {...props} showActions={false} />
      <Snackbar
        variant={variant}
        {...props}
        primarySlot={
          <Button variant="primary" size="40">
            Custom Primary
          </Button>
        }
        secondarySlot={
          <a href="#dismiss" className="typography-links-link-md text-content-secondary">
            Custom link
          </a>
        }
      />
      <Snackbar variant={variant} {...props} primaryLabel={primary} closable />
    </div>
  ))}
</div>

import { useState } from "react";
import { Snackbar } from "@fanvue/ui";

const DefaultMessage = (
  <span className="typography-body-small-14px-semibold">
    <span>@user.with.username</span> changed their subscription price to <span>$43.99</span> per
    month
  </span>
);

function Example() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Snackbar
      primaryLabel="Accept"
      secondaryLabel="Dismiss"
      closable
      onClose={() => setVisible(false)}
    >
      {DefaultMessage}
    </Snackbar>
  ) : (
    <div className="text-content-tertiary text-sm">
      Snackbar dismissed!{" "}
      <button
        type="button"
        onClick={() => setVisible(true)}
        className="cursor-pointer text-content-primary underline"
      >
        Show again
      </button>
    </div>
  );
}

import { useState } from "react";
import { Snackbar, VipBadgeIcon } from "@fanvue/ui";

const DefaultMessage = (
  <span className="typography-body-small-14px-semibold">
    <span>@user.with.username</span> changed their subscription price to <span>$43.99</span> per
    month
  </span>
);

const VipBadge = <VipBadgeIcon />;

function Example() {
  const [snackbars, setSnackbars] = useState({
    vipEarn: true,
    default: true,
    welcome: true,
  });

  return (
    <div className="flex max-w-xl flex-col gap-4">
      {snackbars.vipEarn && (
        <Snackbar
          variant="vipEarn"
          icon={VipBadge}
          title="You're killing it! You've earned 1,000pts"
          description="Find out how to redeem them, and earn more..."
          primaryLabel="Redeem points"
          closable
          onClose={() => setSnackbars({ ...snackbars, vipEarn: false })}
        />
      )}
      {snackbars.default && (
        <Snackbar
          primaryLabel="Accept"
          secondaryLabel="Dismiss"
          closable
          onClose={() => setSnackbars({ ...snackbars, default: false })}
        >
          {DefaultMessage}
        </Snackbar>
      )}
      {snackbars.welcome && (
        <Snackbar
          variant="welcome"
          title="Welcome to Fanvue 👋"
          description="Let's get you started!"
          primaryLabel="Become a creator"
          secondaryLabel="Discover creators"
          closable
          onClose={() => setSnackbars({ ...snackbars, welcome: false })}
        />
      )}
      {!snackbars.vipEarn && !snackbars.default && !snackbars.welcome && (
        <div className="text-content-tertiary text-sm">
          All snackbars dismissed!{" "}
          <button
            type="button"
            onClick={() => setSnackbars({ vipEarn: true, default: true, welcome: true })}
            className="cursor-pointer text-content-primary underline"
          >
            Reset all
          </button>
        </div>
      )}
    </div>
  );
}