List

import React from 'react';
import { List, ListItem } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <List>
      <ListItem divider>Item 1</ListItem>
      <ListItem divider selected>selected</ListItem>
      <ListItem divider disabled>disabled</ListItem>
      <ListItem divider disableGutters>disable Gutters</ListItem>
      <ListItem divider disablePadding>disable Padding</ListItem>
    </List>
  );
}

import React from 'react';
import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from 'archi-ui'
import { BriefcaseBusiness, Image, TreePalm } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <List style={{ width: '300px' }} className='bg-accent'>
        <ListItem>
          <ListItemAvatar>
            <Avatar>
              <Image />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary='Photos' secondary='May 18, 2026' />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar>
              <BriefcaseBusiness />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary='Work' secondary='May 20, 2026' />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar>
              <TreePalm />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary='Vacation' secondary='May 25, 2026' />
        </ListItem>
      </List>
    </div>
  );
}

import React from 'react';
import { Avatar, IconButton, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography } from 'archi-ui'
import { Trash, Folder } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-4'>
      <div className='flex flex-wrap items-center justify-center gap-4'>
        <div>
          <Typography variant='h6'>Text only</Typography>
          <div>
            <List className='bg-accent' style={{ width: '300px' }}>
              <ListItem>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
            </List>
          </div>
        </div>
        <div>
          <Typography variant='h6'>Icon with text</Typography>
          <div>
            <List className='bg-accent' style={{ width: '300px' }}>
              <ListItem>
                <ListItemIcon>
                  <Folder />
                </ListItemIcon>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <Folder />
                </ListItemIcon>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemIcon>
                  <Folder />
                </ListItemIcon>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
            </List>
          </div>
        </div>
      </div>
      <div className='flex flex-wrap items-center justify-center gap-4'>
        <div>
          <Typography variant='h6'>Avatar with text</Typography>
          <div>
            <List className='bg-accent' style={{ width: '300px' }}>
              <ListItem>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
            </List>
          </div>
        </div>
        <div>
          <Typography variant='h6'>Avatar with text and icon</Typography>
          <div>
            <List className='bg-accent' style={{ width: '300px' }}>
              <ListItem secondaryAction={
                <IconButton>
                  <Trash />
                </IconButton>
              }>
                <ListItemAvatar>
                  <Avatar>
                    <Folder />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem secondaryAction={
                <IconButton>
                    <Trash />
                  </IconButton>
              }>
                <ListItemAvatar>
                  <Avatar>
                    <Folder />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
              <ListItem secondaryAction={
                <IconButton>
                  <Trash />
                </IconButton>
              }>
                <ListItemAvatar>
                  <Avatar>
                    <Folder />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary='Single-line item' secondary='Secondary text' />
              </ListItem>
            </List>
          </div>
        </div>
      </div>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Divider, List, ListItemButton, ListItemIcon, ListItemText } from 'archi-ui'
import { Inbox, MailOpen } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [selected, setSelected] = useState(1);
 
  const handleListItemClick = (index) => {
    setSelected(index)
  }
  
  return (
    <div className='flex items-center justify-center'>
      <div className='bg-accent' style={{ width: '300px' }}>
        <List>
          <ListItemButton
            selected={selected === 0}
            onClick={() => handleListItemClick(0)}
          >
            <ListItemIcon>
              <Inbox />
            </ListItemIcon>
            <ListItemText primary='Index' />
          </ListItemButton>
          <ListItemButton
            selected={selected === 1}
            onClick={() => handleListItemClick(1)}
          >
            <ListItemIcon>
              <MailOpen />
            </ListItemIcon>
            <ListItemText primary='Drafts' />
          </ListItemButton>
        </List>
        <Divider />
        <List>
          <ListItemButton
            selected={selected === 2}
            onClick={() => handleListItemClick(2)}
          >
            <ListItemText primary='Trash'/>
          </ListItemButton>
          <ListItemButton
            selected={selected === 3}
            onClick={() => handleListItemClick(3)}
          >
            <ListItemText primary='Spam' />
          </ListItemButton>
        </List>
      </div>
    </div>
  );
}

import React from 'react'
import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText, Typography } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <List style={{ width: '100%', maxWidth: '360px' }} className='bg-accent'>
        <ListItem alignItems="flexStart">
          <ListItemAvatar>
            <Avatar alt="Eren Jaeger" src="/eren-jaeger.webp" />
          </ListItemAvatar>
          <ListItemText
            primary="Brunch this weekend?"
            secondary={
              <React.Fragment>
                <Typography
                  variant="body2"
                  className='text-foreground inline'
                >
                  Ali Connors
                </Typography>
                {" — I'll be in your neighborhood doing errands this…"}
              </React.Fragment>
            }
          />
        </ListItem>
        <Divider variant="inset" />
        <ListItem alignItems="flexStart">
          <ListItemAvatar>
            <Avatar alt="Levi Ackermen" src="/levi-ackermen.jpg" />
          </ListItemAvatar>
          <ListItemText
            primary="Summer BBQ"
            secondary={
              <React.Fragment>
                <Typography
                  variant="body2"
                  className='text-foreground inline'
                >
                  to Scott, Alex, Jennifer
                </Typography>
                {" — Wish I could come, but I'm out of town this…"}
              </React.Fragment>
            }
          />
        </ListItem>
        <Divider variant="inset" />
        <ListItem alignItems="flexStart">
          <ListItemAvatar>
            <Avatar alt="Naruto Uzumaki" src="/naruto-uzumaki.webp" />
          </ListItemAvatar>
          <ListItemText
            primary="Oui Oui"
            secondary={
              <React.Fragment>
                <Typography
                  variant="body2"
                  className='text-foreground inline'
                >
                  Sandra Adams
                </Typography>
                {' — Do you have Paris recommendations? Have you ever…'}
              </React.Fragment>
            }
          />
        </ListItem>
      </List>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Checkbox, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from 'archi-ui'
import { Plus } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [checked, setChecked] = useState([0]);
 
  const handleToggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];
 
    if (currentIndex === -1) {
      newChecked.push(value);
    }
    else {
      newChecked.splice(currentIndex, 1);
    }
 
    setChecked(newChecked)
  }
  
  return (
    <div className='flex items-center justify-center'>
      <List
        style={{ width: '300px' }}
        className='bg-accent'
      >
        {[0, 1, 2, 3].map((value) => {
          return (
            <ListItem
              disablePadding
              key={value}
            >
              <ListItemButton onClick={() => handleToggle(value)} dense>
                <ListItemIcon>
                  <Checkbox
                    checked={checked.includes(value)}
                    tabIndex={-1}
                  />
                </ListItemIcon>
                <ListItemText primary={`List item ${value + 1}`} />
                <IconButton>
                  <Plus />
                </IconButton>
              </ListItemButton>
            </ListItem>
          )
        })}
      </List>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Avatar, Checkbox, List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from 'archi-ui';
 
export default function MyReactPage() {
 
  const [checked, setChecked] = useState([1]);
 
  const handleToggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];
 
    if (currentIndex === -1) {
      newChecked.push(value);
    }
    else {
      newChecked.splice(currentIndex, 1);
    }
 
    setChecked(newChecked)
  }
  
  return (
    <div className='flex items-center justify-center'>
      <List
        style={{ width: '300px' }}
        className='bg-accent'
      >
        {[0, 1, 2, 3].map((value) => {
          return (
            <ListItem
              disablePadding
              key={value}
            >
              <ListItemButton dense>
                <ListItemAvatar>
                  <Avatar
                    alt={`Avatar ${value + 1}`}
                    src="/naruto-uzumaki.webp"
                  />
                </ListItemAvatar>
                <ListItemText primary={`List item ${value + 1}`} />
                <Checkbox onChange={() => handleToggle(value)} checked={checked.includes(value)} />
              </ListItemButton>
            </ListItem>
          )
        })}
      </List>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { List, ListItem, ListItemIcon, ListItemText, ListSubheader, Switch } from 'archi-ui'
import { Bluetooth, Wifi } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [checked, setChecked] = useState('wifi');
 
  const handleToggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];
 
    if (currentIndex === -1) {
      newChecked.push(value);
    }
    else {
      newChecked.splice(currentIndex, 1);
    }
 
    setChecked(newChecked)
  }
 
  return (
    <div className='flex items-center justify-center'>
      <List
        style={{ width: '300px' }}
        subheader={
          <ListSubheader>Settings</ListSubheader>
        }
        className='bg-accent'
      >
        <ListItem>
          <ListItemIcon>
            <Wifi />
          </ListItemIcon>
          <ListItemText primary='Wi-Fi' />
          <Switch checked={checked.includes('wifi')} variant='standard' onChange={() => handleToggle('wifi')} />
        </ListItem>
        <ListItem>
          <ListItemIcon>
            <Bluetooth />
          </ListItemIcon>
          <ListItemText primary='Bluetooth' />
          <Switch checked={checked.includes('bluetooth')} variant='standard' onChange={() => handleToggle('bluetooth')} />
        </ListItem>
      </List>
    </div>
  );
}

import React from 'react';
import { List, ListItem, ListItemText, ListSubheader } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <List
        style={{width: '360px', maxWidth: '360px', position: 'relative', overflow: 'auto', height: '300px'}}
        subheader={<li />}
        className='bg-popover'
      >
        {[0, 1, 2, 3, 4, 5].map((sectionId) => (
          <li key={`section-${sectionId}`}>
            <ul>
              <ListSubheader className='bg-popover'>{`I'm sticky ${sectionId}`}</ListSubheader>
              {[0, 1, 2, 3, 4].map((item) => (
                <ListItem key={`item-${sectionId}-${item}`}>
                  <ListItemText primary={`Item ${item}`} />
                </ListItem>
              ))}
            </ul>
          </li>
        ))}
      </List>
    </div>
  );
}

import React from 'react'
import { IconButton, List, ListItem, ListItemText } from 'archi-ui'
import { MessageSquareText } from 'lucide-react'
 
export default function MyReactPage() {  
  return (
    <div className='flex items-center justify-center'>
      <List style={{ width: '300px' }} className='bg-accent'>
        {[1, 2, 3].map((value) => (
          <ListItem
            key={value}
            disableGutters
            divider
            secondaryAction={
              <IconButton>
                <MessageSquareText />
              </IconButton>
          }>
            <ListItemText primary={`List item ${value}`} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}