Pattern

FAST badge

The box-art title panel: the mark on the brand yellow.

betav0.1.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/fast-badge

Examples

Default

Open alone
Roleplay

API

<FastBadge />

The title panel of the game's box art: the mark on the brand yellow, letters dark and the bolt white. Always the brand yellow, whatever the city — it is the logo, not the accent. It fills its box; size the parent.

PropTypeDefaultNotes
captionReactNode—A line under the mark, in the display voice: "ROLEPLAY".

Dependencies

npm

  • None

Registry

Source

components/ds/fast-badge.tsxShow
import type * as React from 'react';
import { FastMark } from '@/components/ds/fast-mark';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

export type FastBadgeProps = React.ComponentProps<'div'> & {
  /** A line under the mark, in the display voice: "ROLEPLAY". */
  caption?: React.ReactNode;
};

/**
 * The title panel of the game's box art: the mark on the brand yellow, letters dark and the bolt
 * white. Always the brand yellow, whatever the city — it is the logo, not the accent. It fills
 * its box; size the parent.
 */
function FastBadge({ caption, className, style, ...props }: FastBadgeProps) {
  return (
    <div
      data-slot="fast-badge"
      className={cn(
        'flex size-full flex-col items-center justify-center gap-2 bg-fast-yellow p-3 lg:gap-3 lg:p-6',
        className,
      )}
      // The mark reads --foreground for its letters and --primary for its bolt.
      style={
        { '--foreground': '0 0% 4%', '--primary': '0 0% 100%', ...style } as React.CSSProperties
      }
      {...props}
    >
      <FastMark className="h-[58%] max-h-full w-auto shrink-0 drop-shadow-[0_0.25rem_0_rgb(0_0_0/0.25)] lg:h-auto lg:w-[78%] lg:max-w-[28rem]" />
      {caption && (
        <span className="font-display text-xs tracking-[0.3em] text-black/80 md:text-base">
          {caption}
        </span>
      )}
    </div>
  );
}

export { FastBadge };