Data List

import React from "react";
import { DataList } from "@nimbus-ds/patterns";
import { Text, Tag, Link, Box, Icon } from "@nimbus-ds/components";
import {
  ChevronDownIcon,
  CreditCardIcon,
  BoxUnpackedIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <DataList>
    {Array.from({ length: 3 }, (_, i) => (
      <DataList.Row key={i} gap="1">
        <Box display="flex" justifyContent="space-between">
          <Text fontWeight="medium" color="primary-interactive">
            #123456
          </Text>
          <Text>22 Mar</Text>
        </Box>
        <Box display="flex" justifyContent="space-between">
          <Text>Customer name</Text>
          <Text>R$ 3.500</Text>
        </Box>
        <Link textDecoration="none">
          10 products
          <Icon color="currentColor" source={<ChevronDownIcon />} />
        </Link>
        <Box display="flex" flexWrap="wrap" gap="2" pt="2">
          <Tag appearance="warning">
            <Icon color="currentColor" source={<CreditCardIcon />} />
            Awaiting payment
          </Tag>
          <Tag appearance="primary">
            <Icon color="currentColor" source={<BoxUnpackedIcon />} />
            Unfulfilled
          </Tag>
        </Box>
      </DataList.Row>
    ))}
  </DataList>
);

export default Example;