Film and community

Stats

A row of numbers with labels, such as a film’s Watchlist count and score.

import { Stats, Stat } from '@iffday/web/src/kit';

Example

Values are 17px with tabular figures, so neighbouring numbers line up; labels are 10px grey text underneath. icon goes before the value in the star’s brand red. Under a film’s title they show the Watchlist count, the average rating and the score; a person’s page shows their films and festival entries.

186Watchlist

★4.1Avg. rating

8.1Score

import { useT } from '@iffday/i18n';
import { Stat, Stats } from '@iffday/web/src/kit';
import { Heart } from 'lucide-react';

/** The numbers under a film's title. */
export default function Example() {
  const t = useT();
  return (
    <Stats>
      <Stat value={186} label={t('film.entry.watchlist')} icon={<Heart size={15} />} />
      <Stat
        value="4.1"
        label={t('film.entry.avgRating')}
        icon={<span className="star-glyph">★</span>}
      />
      <Stat value="8.1" label={t('film.entry.score')} />
    </Stats>
  );
}

Props

Stats

apps/web/src/kit.tsx:186

Prop	Type	Default
`children*`	`ReactNode`

Stat

apps/web/src/kit.tsx:167

Prop	Type	Default
`value*`	`ReactNode`
`label*`	`string`
`icon`	`ReactNode`