Film and community

ActionPanel

The grey panel of actions beside a film page’s poster, one action per row.

import { ActionPanel, ActionRow } from '@iffday/web/src/kit';

Example

The grey panel beside a film page’s poster, one action per row, each row at least 44px tall for a finger. The hairline between rows starts after the icon. On hover the label is underlined; an active row is brand red, as Added to watchlist is.

Film across festivals2

import { useT } from '@iffday/i18n';
import { ActionPanel, ActionRow } from '@iffday/web/src/kit';
import { BookmarkPlus, CalendarPlus, Film, ListPlus, PenLine, Share2 } from 'lucide-react';
import { useState } from 'react';

/** The panel beside a film page's poster. */
export default function Example() {
  const t = useT();
  const [wanted, setWanted] = useState(true);
  return (
    <div style={{ width: 'min(100%, 300px)' }}>
      <ActionPanel>
        <ActionRow icon={<PenLine size={16} />}>{t('film.entry.reviewOrLog')}</ActionRow>
        <ActionRow
          icon={<BookmarkPlus size={16} />}
          active={wanted}
          onClick={() => setWanted(!wanted)}
        >
          {wanted ? t('film.entry.addedToWatchlist') : t('film.entry.addToWatchlist')}
        </ActionRow>
        <ActionRow icon={<ListPlus size={16} />}>{t('film.entry.addToLists')}</ActionRow>
        <ActionRow icon={<CalendarPlus size={16} />}>{t('film.entry.addToPlanLabel')}</ActionRow>
        <ActionRow icon={<Film size={16} />} to="/components/film-header" trailing="2">
          {t('film.entry.filmAcrossFestivals')}
        </ActionRow>
        <ActionRow icon={<Share2 size={16} />} disabled>
          {t('film.entry.share')}
        </ActionRow>
      </ActionPanel>
    </div>
  );
}

Three kinds of row

ActionRow becomes a different element by its props: with to a link on the site, with href an outside link that opens in a new window, and otherwise a button that calls onClick. trailing puts a small grey number or note at the end.

Props

ActionPanel

apps/web/src/kit.tsx:191

record.club's grey sidebar menu of actions.

Prop	Type	Default
`children*`	`ReactNode`
`label`	`string`

ActionRow

apps/web/src/kit.tsx:198

Prop	Type	Default
`icon`	`ReactNode`
`children*`	`ReactNode`
`onClick`	`() => void`
`to`	`string`
`href`	`string`
`trailing`	`ReactNode`
`disabled`	`boolean`
`active`	`boolean`