Skip to main content
The CinemaCard component renders a clickable card for a cinema with its name and display location.

​
Props

​
cinema
Cinema
required
Cinema object containing the cinema data. Must include:
  • id: Cinema ID
  • name: Cinema name
  • location: Short location name (optional)
  • verbose_location: Full location description (optional)
​
href
string
Custom link URL for the card. If not provided, defaults to /cinemas/{id}-{slugified-name}

​
Features

  • Display location: Automatically uses verbose_location if available, otherwise falls back to location
  • Hover effects: Card background becomes slightly transparent, cinema name changes to accent color
  • Automatic slugification: Generates SEO-friendly URLs from cinema names

​
Usage

​
Basic Example

import CinemaCard from '../components/CinemaCard.astro';
import { getCinemas } from '../lib/queries';

const cinemas = await getCinemas();

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {cinemas.map((cinema) => (
    <CinemaCard cinema={cinema} />
  ))}
</div>

<CinemaCard cinema={cinema} href={`/custom-path/${cinema.id}`} />

​
Styling

The component uses Tailwind CSS classes and relies on the following CSS variables from your theme:
  • bg-secondary: Card background color
  • text-accent: Hover text color
  • text-gray-400: Location text color

​
Type Definition

The Cinema type is defined in src/lib/queries.ts: 
export interface Cinema {
  id: number;
  name: string;
  location: string | null;
  verbose_location: string | null;
  address: string | null;
  created_at: string;
  updated_at: string;
}

​
Helper Function

The component uses the getDisplayLocation() helper function: 
export function getDisplayLocation(cinema: Cinema): string | null {
  return cinema.verbose_location || cinema.location;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us