Layout compositions

    <Stack>
      <Box paddingY="m" borderSide="bottom" borderColor="border">
        <Text weight="medium">{demoFilmsObject[4].name}</Text>
        <Text color="content2">{demoFilmsObject[4].speed} | {demoFilmsObject[4].type}</Text>
      </Box>
      <Box paddingY="m" borderSide="bottom" borderColor="border">
        <Text weight="medium">{demoFilmsObject[18].name}</Text>
        <Text color="content2">{demoFilmsObject[18].speed} | {demoFilmsObject[18].type}</Text>
      </Box>
      <Box paddingY="m">
        <Text weight="medium">{demoFilmsObject[21].name}</Text>
        <Text color="content2">{demoFilmsObject[21].speed} | {demoFilmsObject[21].type}</Text>
      </Box>
    </Stack>
  

    () => {
      const columns = '2fr 1fr 1fr'
      const titles = ['Name', 'Speed', 'Type']
      const rows = [4, 10, 21, 28]

      const Cell = ({ children, isTitle }) => {
        const borderColor= isTitle ? 'border2' : "border"
        const weight = isTitle ? "medium" : undefined
        const paddingTop = isTitle ? undefined : "m"
        return (
          <Box paddingTop={paddingTop} paddingBottom="m" borderSide="bottom" borderColor={borderColor}>
            <Text hasEllipsis weight={weight}>{children}</Text>
          </Box>
        )
      }
      return (
        <Arrange columns={columns}>
          {titles.map((title) => (
            <Cell isTitle key={title}>{title}</Cell>
          ))}

          {rows.map((item) => (
            <React.Fragment key={item}>
              <Cell>{demoFilmsObject[item].name}</Cell>
              <Cell>{demoFilmsObject[item].speed}</Cell>
              <Cell>{demoFilmsObject[item].type}</Cell>
            </React.Fragment>
          ))}
        </Arrange>
      )
    }

    <Arrange>
      <Button icon={<IconPlus />} variant="accent">New</Button>
      <Arrange paddingX="s" marginLeft="m" marginRight="s" borderSide="x" borderColor="border2">
        <TextButton icon={<IconShare />}>Share</TextButton>
        <TextButton>Export</TextButton>
      </Arrange>
      <Arrange>
        <IconButton icon={<IconHeart />}/>
        <IconButton icon={<IconFolderAdd />}/>
        <IconButton icon={<IconLink />}/>
        <IconButton icon={<IconEllipsis />}/>
      </Arrange>
    </Arrange>
  

    <Arrange gap="s" justifyContent="space-between">
      <Nav size="l">
        <NavItem isActive>{demoFilms[15]}</NavItem>
        <NavItem>{demoFilms[17]}</NavItem>
      </Nav>
      <Button icon={<IconPlus />} variant="accent">New Film</Button>
    </Arrange>
  

    <Arrange gap="l">
      <Arrange gap="s">
        <Icon icon={<IconMail />} />
        <Text>Messages</Text>
        <Text color="content2">21</Text>
      </Arrange>
      <Arrange gap="s">
        <Icon icon={<IconHeart />} />
        <Text>Favorites</Text>
        <Text color="content2">3</Text>
      </Arrange>
    </Arrange>