3d:T56fc,
// A browse page: the billboard, a row of categories, then shelves of titles, under the
// host's own bar. With keys, ↓ and ↑ move between rows (the page scrolls the next one up
// as it opens, the one left fades), ← and → along one (the row slides under the frame).
// A click, a wheel or a swipe does the same.
const LEAD = title("salt-road")
const RANK = badgeOf(LEAD)
const LEAD_BADGES = [{ label: "New arrival" }, ...(RANK ? [RANK] : [])]

/** The host's bar: no ground of its own (what passes under it has faded), the
 *  profile at the content's edge, the sections centred, the current one in a pill. */
function BrowseBar() {
  return (
    <nav className="pointer-events-none absolute inset-x-0 top-0 flex h-[5.42cqw] items-center px-[3.542cqw] font-medium text-[1.27cqw] text-white">
      <UserRound className="size-[2.4cqw]" />
      <div className="absolute inset-x-0 flex items-center justify-center gap-[3.31cqw]">
        <Search className="size-[1.38cqw]" />
        <span className="flex h-[2.48cqw] items-center rounded-full bg-white/14 px-[1.38cqw]">
          Home
        </span>
        <span>Series</span>
        <span>Films</span>
        <span>My list</span>
      </div>
    </nav>
  )
}

function BrowsePage() {
  return (
    <MaterialProvider scheme="dark">
      <div className="dark @container relative size-full bg-black text-white">
        <Shelves
          ambient="rgb(30 39 51)"
          header={
            <Billboard
              label={LEAD.title}
              art={<Art t={LEAD} sizes="100vw" />}
              wordmark={<Wordmark t={LEAD} />}
              facts={
                <TitleFacts
                  facts={[
                    LEAD.kind,
                    LEAD.genre,
                    String(LEAD.year),
                    LEAD.length,
                  ]}
                  age={LEAD.age}
                />
              }
              actions={
                <>
                  <Button
                    size="xl"
                    corners="pill"
                    icon={<Play className="fill-current" />}
                  >
                    Play
                  </Button>
                  <Button
                    size="xl"
                    material="glass"
                    variant="secondary"
                    icon={<Info />}
                  >
                    More info
                  </Button>
                </>
              }
              badges={LEAD_BADGES}
            />
          }
        >
          <Shelf
            label="Categories"
            hideTitle
            layout="tiles"
            items={CATEGORIES}
            itemKey={(c) => c.id}
            itemLabel={(c) => c.label}
          >
            {(c, { open }) => (
              <CategoryTile open={open}>{c.lockup}</CategoryTile>
            )}
          </Shelf>
          {SHELVES.map((s, i) => (
            <Shelf
              key={s.label}
              label={s.label}
              title={
                i === 1 ? (
                  <span className="inline-flex items-center gap-[0.5em]">
                    <ThumbsUp className="size-[1.1em] text-white/60" />
                    {s.label}
                  </span>
                ) : undefined
              }
              items={s.ids.map(title)}
              itemKey={(t) => t.id}
              itemLabel={(t) => t.title}
              caption={(t) => <TitleCaption t={t} />}
            >
              {(t, { open }) => <TitleCard t={t} open={open} />}
            </Shelf>
          ))}
        </Shelves>
        <BrowseBar />
      </div>
    </MaterialProvider>
  )
}

{/* A page sized by its box: 16:9 on the page, the window's rest in full view
    (the frame's body is a column at least the window's height). */}
<div className="aspect-video overflow-hidden rounded-xl group-data-[full]/sample:aspect-auto group-data-[full]/sample:flex-1 group-data-[full]/sample:rounded-none">
  <BrowsePage />
</div>
3c:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$3d"}}]
Categories

Continue watching

We think you will love these

Films to laugh at

New this week

Categories

Continue watching

We think you will love these

Films to laugh at

New this week
