Data List

DataList is a flexible list-style component that enables the organization of customizable row elements in a vertical manner, with visual separators between rows.

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

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

export default Example;

Instale o componente via terminal.

npm install @nimbus-ds/data-list

Additional props are passed to the <DataList> element. See div docs for a list of props accepted by the <DataList> element.