ListView

import {ListView, ListViewItem} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

let files = [];
<ListView aria-label="Dynamic files" items={files} styles={style({width: 'full', maxWidth: 400, height: 320})}>
  {item => (
    <ListViewItem id={item.id}>{item.name}</ListViewItem>
  )}
</ListView>

import {ActionButton, ActionButtonGroup, ActionMenu, Image, ListView, ListViewItem, MenuItem, Text} from '@react-spectrum/s2';
import Edit from '@react-spectrum/s2/icons/Edit';
import Copy from '@react-spectrum/s2/icons/Copy';
import Delete from '@react-spectrum/s2/icons/Delete';
import File from '@react-spectrum/s2/icons/File';
import Share from '@react-spectrum/s2/icons/Share';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

let documents = [];
<div className={style({display: 'flex', gap: 24, width: 'full', flexWrap: 'wrap', justifyContent: 'center'})}>
  <ListView aria-label="Documents" items={documents} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 200, maxWidth: 400, height: 320})}>
    {item => (
      <ListViewItem id={item.id} textValue={item.name}>
        <File />
        <Text>{item.name}</Text>
        <Text slot="description">Document</Text>
        <ActionButtonGroup aria-label="File actions">
          <ActionButton aria-label="Edit">
            <Edit />
          </ActionButton>
          <ActionButton aria-label="Delete">
            <Delete />
          </ActionButton>
        </ActionButtonGroup>
      </ListViewItem>
    )}
  </ListView>
  <ListView aria-label="Images" items={images} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 200, maxWidth: 400, height: 320})}>
    {item => (
      <ListViewItem id={item.id} textValue={item.name}>
        <Image src={item.image_url} alt={item.name} />
        <Text>{item.name}</Text>
        <Text slot="description">Image</Text>
        <ActionMenu>
          <MenuItem>
            <Copy />
            <Text>Copy</Text>
          </MenuItem>
          <MenuItem>
            <Share />
            <Text>Share</Text>
          </MenuItem>
          <MenuItem>
            <Delete />
            <Text>Delete</Text>
          </MenuItem>
        </ActionMenu>
      </ListViewItem>
    )}
  </ListView>
</div>

import {ListView, ListViewItem} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {useAsyncList} from 'react-stately';

interface Character {
  name: string
}

function AsyncListView() {
  let list = useAsyncList<Character>({
    async load({signal, cursor}) {
      if (cursor) {
        cursor = cursor.replace(/^http:\/\//i, 'https://');
      }

      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
      let json = await res.json();
      return {
        items: json.results,
        cursor: json.next
      };
    }
  });

  return (
    <ListView
      aria-label="Star Wars characters"
      loadingState={list.loadingState}
      onLoadMore={list.loadMore}
      items={list.items}
      styles={style({width: 'full', maxWidth: 400, height: 320})}>
      {item => (
        <ListViewItem id={item.name}>{item.name}</ListViewItem>
      )}
    </ListView>
  );
}

import {ListView, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<ListView
  aria-label="Search results"
  styles={style({width: 'full', maxWidth: 400})}
  renderEmptyState={() => (
    <IllustratedMessage>
      <FolderOpen />
      <Heading>No results</Heading>
      <Content>Press <Link href="https://adobe.com">here</Link> for more info.</Content>
    </IllustratedMessage>
  )}>
  {[]}
</ListView>

import {Breadcrumbs, Breadcrumb, ListView, ListViewItem, Text} from '@react-spectrum/s2';
import App from '@react-spectrum/s2/icons/App';
import Folder from '@react-spectrum/s2/icons/Folder';
import File from '@react-spectrum/s2/icons/File';
import Image from '@react-spectrum/s2/icons/Image';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Key} from 'react-aria';
import {useState} from 'react';

type FileItem = {id: string, name: string, icon: React.ReactNode};];
function NavigationExample() {
  let [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([
    {id: 'root', name: 'Root', icon: <Folder />, children: rootItems}
  ]);

  let currentItems = breadcrumbs[breadcrumbs.length - 1].children;

  let onAction = (key: Key) => {
    let item = currentItems.find(item => item.id === key);
    if (item && 'children' in item) {
      setBreadcrumbs(prev => [...prev, item]);
    }
  };

  let onBreadcrumbAction = (key: Key) => {
    let index = breadcrumbs.findIndex(item => item.id === key);
    setBreadcrumbs(breadcrumbs.slice(0, index + 1));
  };

  return (
    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, width: 'full', maxWidth: 400})}>
      <Breadcrumbs onAction={onBreadcrumbAction}>
        {breadcrumbs.map(item => (
          <Breadcrumb key={item.id} id={item.id}>{item.name}</Breadcrumb>
        ))}
      </Breadcrumbs>
      <ListView
        aria-label={breadcrumbs[breadcrumbs.length - 1].name}
        items={currentItems}
        onAction={onAction}
        styles={style({width: 'full', height: 320})}>
        {item => (
          <ListViewItem id={item.id} textValue={item.name} hasChildItems={item && 'children' in item}>
            {item.icon}
            <Text>{item.name}</Text>
          </ListViewItem>
        )}
      </ListView>
    </div>
  );
}