List

<List>
  <ListRow padding="large">
    <Container borderSide="all">With padding</Container>
  </ListRow>
  <ListRow paddingX="large" paddingY="small" height={6}>
    <Container borderSide="all">With padding and height</Container>
  </ListRow>
  <ListRow minHeight={6} maxHeight={8}>
    <Container borderSide="all">With minHeight and maxHeight</Container>
  </ListRow>
</List>

<Arrange columns="repeat(3, 1fr)" gap="medium">
  <List columns={['1fr']} variant="stripe">
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
    <ListRow padding="small"><Text>stripe</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="border">
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
    <ListRow padding="small"><Text>border</Text></ListRow>
  </List>
  <List columns={['1fr']} variant="clear">
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
    <ListRow padding="small"><Text>clear</Text></ListRow>
  </List>
</Arrange>

<List>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small">Row</ListRow>
  <ListRow padding="small" backgroundColor="highlight">Row</ListRow>
  <ListRow padding="small" backgroundColor="offWhite">Row</ListRow>
</List>

<List columns={['1fr']}>
  <ListRow
    paddingX="medium"
    paddingY="small"
    onClick={() => console.log('clicked')}
  >
    <div>With onClick</div>
  </ListRow>
  <ListRow
    paddingX="medium"
    paddingY="small"
    htmlTag="a"
    href="https://www.loom.com"
  >
    <div>With href</div>
  </ListRow>
</List>

<List columns={['1fr', 'auto']} gap="medium">
  <ListRow padding="small">
    <Text hasEllipsis>Use system audio</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Highlight mouse clicks {demoText.long}</Text>
    <Switch />
  </ListRow>
  <ListRow padding="small">
    <Text hasEllipsis>Recording countdown</Text>
    <Switch />
  </ListRow>
</List>

() => {
const listItems = [
  {title: 'Ryozo', email: 'ryozo@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Hikaru', email: 'hikaru@email.com', role: 'Admin', actionText: 'Edit'},
  {title: 'Yutsuko', email: 'yutsuko@email.com', role: 'Admin', actionText: 'Edit'},
]
return (
  <List columns={['2fr', '1fr', '1fr']} gap="medium">
    {listItems.map((listItem, index) => (
      <ListRow key={index} paddingX="medium" paddingY="small">
        <Text>{listItem.title}</Text>
        <Text>{listItem.email}</Text>
        <Text>{listItem.role}</Text>
      </ListRow>
    ))}
  </List>
)}

<List columns={['4fr', '1fr']} gap="large">
  <ListRow paddingX="medium" paddingY="small">
    <div className="ellipsis">Ellipsis with utility class — {demoText.long}</div>
    <div>Content</div>
  </ListRow>
  <ListRow paddingX="medium" paddingY="small">
    <Text hasEllipsis>Ellipsis with Text component — {demoText.long}</Text>
    <div>Content</div>
  </ListRow>
</List>