FilmTile
A poster with a title and a second line, with an optional rank and badge.
import { FilmTile } from '@iffday/web/src/kit';Example
Under the poster comes one line of title, a 13px grey second line and an optional meta row. The title keeps to one line and ends in an ellipsis when it is too long; on hover it is underlined and the poster fades a little. rank puts a position above the title, as rankings do.
import { FilmTile, Stars } from '@iffday/web/src/kit';
import { useSampleFilms } from '../../../samples';
export default function Example() {
const films = useSampleFilms().slice(0, 6);
return (
<div className="tile-grid cols-6">
{films.map((film, index) => (
<FilmTile
key={film.id}
entry={film}
to={`https://iff.day${film.canonicalPath}`}
rank={index + 1}
subtitle={film.director}
meta={<Stars steps={10 - index} size={12} />}
/>
))}
</div>
);
}In a grid
Put tiles in .tile-grid: by default each column is at least 150px and the row fills up; cols-5 and cols-6 fix the count. At 1020px and narrower the grid has four columns, and three on phones. For a single row use Shelf.
Accessibility
The poster and the title link to the same address. The poster link is hidden from screen readers and skipped by Tab, so each film is read once and takes one Tab stop.
Props
FilmTile
apps/web/src/kit.tsx:134Poster, title and a muted second line; optional rank and meta row.
| Prop | Type | Default |
|---|---|---|
entry* | Pick<Entry, 'id' | 'title' | 'titleEn' | 'posterUrl'> & FilmVisuals | |
to* | string | |
subtitle | ReactNode | |
meta | ReactNode | |
rank | number | |
badge | ReactNode | |
size | 'sm' | 'md' | 'lg' | 'md' |