Alert

import { Alert } from "@fanvue/ui";
import type { AlertProps, AlertVariant } from "@fanvue/ui";

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

function Example() {
  const [visible, setVisible] = useState(true);

  return (
    <div className="space-y-4">
      {visible ? (
        <Alert variant="info" closable onClose={() => setVisible(false)}>
          Click the close button to dismiss this alert. It will disappear.
        </Alert>
      ) : (
        <div className="text-gray-500 text-sm">
          Alert dismissed!{" "}
          <button
            type="button"
            onClick={() => setVisible(true)}
            className="cursor-pointer text-info-content underline"
          >
            Show again
          </button>
        </div>
      )}
    </div>
  );
}

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

<Alert
  variant="info"
  title="Alert title"
  action={<a href="#learn-more">Learn more</a>}
>
  This is the body text for an info in-app alert with a link to more detail.
</Alert>

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

const VARIANTS = ["info", "success", "warning", "error", "neutral"] as const;

<div className="flex flex-col gap-8">
  {VARIANTS.map((variant) => (
    <div key={variant} className="flex flex-col gap-3">
      <h3 className="typography-body-small-14px-semibold text-content-primary capitalize">
        {variant}
      </h3>
      <Alert variant={variant}>Body text only.</Alert>
      <Alert variant={variant} title="Alert title">
        Body text with a title above it.
      </Alert>
      <Alert variant={variant} closable>
        Body text with a close button.
      </Alert>
      <Alert variant={variant} title="Alert title" closable action={<a href="#more">More</a>}>
        Title, close button and an action link.
      </Alert>
    </div>
  ))}
</div>

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

function Example() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Alert variant="info" closable onClose={() => setVisible(false)}>
      This is a closable info alert.
    </Alert>
  ) : (
    <div className="text-gray-500 text-sm">
      Alert dismissed!{" "}
      <button
        type="button"
        onClick={() => setVisible(true)}
        className="cursor-pointer text-info-content underline"
      >
        Show again
      </button>
    </div>
  );
}

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

function Example() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Alert
      variant="warning"
      title="Subscription expiring"
      closable
      action={<a href="#renew-now">Renew now</a>}
      onClose={() => setVisible(false)}
    >
      Your subscription will expire in 3 days.
    </Alert>
  ) : (
    <div className="text-gray-500 text-sm">
      Alert dismissed!{" "}
      <button
        type="button"
        onClick={() => setVisible(true)}
        className="cursor-pointer text-warning-content underline"
      >
        Show again
      </button>
    </div>
  );
}