Logo

import { Logo } from "@fanvue/ui";
import type { LogoColor, LogoProps, LogoSize, LogoVariant } from "@fanvue/ui";

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

<div className="flex flex-col items-start gap-6">
  <Logo size="16" />
  <Logo size="20" />
  <Logo size="24" />
  <Logo size="32" />
  <Logo size="40" />
  <Logo size="48" />
  <Logo size="64" />
</div>

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

const VARIANTS = ["full", "icon", "wordmark", "portrait"] as const;

const Row = ({
  color,
  version,
  inverted = false,
}: {
  color: "fullColour" | "decolour" | "whiteAlways" | "blackAlways";
  version: "default" | "agencies";
  inverted?: boolean;
}) => (
  <>
    <span
      className={`typography-description-12px-semibold ${
        inverted ? "text-content-primary-inverted" : "text-content-tertiary"
      }`}
    >
      {color}
    </span>
    {VARIANTS.map((variant) => (
      <Logo key={variant} variant={variant} color={color} version={version} size="40" />
    ))}
  </>
);

<div className="flex flex-col gap-10">
  {(["default", "agencies"] as const).map((version) => (
    <div key={version} className="flex flex-col gap-4">
      <h3 className="typography-body-small-14px-semibold text-content-primary capitalize">
        {version}
      </h3>
      <div className="grid grid-cols-[auto_repeat(4,minmax(0,1fr))] items-center gap-x-8 gap-y-6">
        <span />
        {VARIANTS.map((variant) => (
          <span
            key={variant}
            className="typography-description-12px-semibold text-content-tertiary"
          >
            {variant}
          </span>
        ))}
        {(["fullColour", "decolour", "blackAlways"] as const).map((color) => (
          <Row key={color} color={color} version={version} />
        ))}
      </div>
      <div className="grid grid-cols-[auto_repeat(4,minmax(0,1fr))] items-center gap-x-8 rounded-xs bg-surface-primary-inverted p-4">
        <Row color="whiteAlways" version={version} inverted />
      </div>
    </div>
  ))}
</div>