Film and community

SectionHeader

A section title with an optional count and a See all link.

import { SectionHeader } from '@iffday/web/src/kit';

Example

A section title is an 18px h2. count adds a count badge after it, to puts a See all link on the right and action holds a button. They combine.

Latest articles and reviews

See all

Reviews28

Lists3

import { useT } from '@iffday/i18n';
import { Button } from '@iffday/ui';
import { SectionHeader } from '@iffday/web/src/kit';

export default function Example() {
  const t = useT();
  return (
    <div style={{ width: '100%', display: 'grid', gap: 18 }}>
      <SectionHeader
        title={t('review.community.latestArticlesAndReviews')}
        to="/components/review-card"
      />
      <SectionHeader title={t('film.entry.reviews')} count={28} />
      <SectionHeader
        title={t('account.profile.lists')}
        count={3}
        action={
          <Button type="button" className="button small">
            {t('common.add')}
          </Button>
        }
      />
    </div>
  );
}

With several sections on a page, give each SectionHeader an id and point the surrounding <section> at it with aria-labelledby, so screen reader users can jump between sections. The community page does this.

Props

SectionHeader

apps/web/src/kit.tsx:52

Prop	Type	Default
`title*`	`ReactNode`
`count`	`number \| null`
`to`	`string`
`linkLabel`	`string`
`action`	`ReactNode`
`id`	`string`

Example

Latest articles and reviews

Reviews28

Lists3

Usage

Props

SectionHeader