MovieCard
The programme card: poster, title, director and a Watchlist heart.
import { MovieCard } from '@iffday/web/src/components';Example
A film in the programme. At rest the card shows the poster and the section in its lower left corner. On hover the poster blurs into a ground for the title and a line with the director, year and running time; touch screens have no hover, so that text always shows there. The heart in the corner is Watchlist and appears on hover or once the film is on the watchlist. A click saves the reader’s mark, and a failure sends an error toast.
import { MovieCard } from '@iffday/web/src/components';
import { useSampleFilms } from '../../../samples';
export default function Example() {
const films = useSampleFilms().slice(4, 8);
return (
<div className="movie-grid" style={{ width: '100%' }}>
{films.map((film) => (
<MovieCard key={film.id} entry={film} />
))}
</div>
);
}Usage
- It reads the reader’s marks from
useApp(), so it only works insideAppProvider, as every page on the site is. - The link is the entry’s
canonicalPath; without one it is built from the festival, edition and title, and as a last resort from the public number. - The heart is disabled with
aria-busyuntil the marks have loaded.
Props
MovieCard
apps/web/src/components.tsx:117A programme tile in record.club's style: poster, title, a muted second line and a meta row with the director and the watchlist heart.
| Prop | Type | Default |
|---|---|---|
entry* | Entry |