Data Display Components

interface TableProps {
  /** Table data */
  data?: TableData;
  /** Table children */
  children?: React.ReactNode;
  /** Table caption */
  captionSide?: 'top' | 'bottom';
  /** If true, table will have striped rows */
  striped?: boolean;
  /** If true, table rows will have hover effect */
  highlightOnHover?: boolean;
  /** If true, table will have border */
  withTableBorder?: boolean;
  /** If true, table will have border between columns */
  withColumnBorders?: boolean;
  /** If true, table will have border between rows */
  withRowBorders?: boolean;
  /** Table layout */
  layout?: 'auto' | 'fixed';
  /** Horizontal spacing */
  horizontalSpacing?: MantineSpacing;
  /** Vertical spacing */
  verticalSpacing?: MantineSpacing;
  /** Font size */
  fontSize?: MantineSize;
}

interface TableTheadProps {
  /** Thead children */
  children: React.ReactNode;
}

interface TableTbodyProps {
  /** Tbody children */
  children: React.ReactNode;
}

interface TableTfootProps {
  /** Tfoot children */
  children: React.ReactNode;
}

interface TableTrProps {
  /** Tr children */
  children: React.ReactNode;
  /** If true, row will have hover effect */
  hover?: boolean;
}

interface TableThProps {
  /** Th children */
  children?: React.ReactNode;
  /** Column width */
  w?: React.CSSProperties['width'];
  /** Column min width */
  miw?: React.CSSProperties['minWidth'];
  /** Text align */
  ta?: React.CSSProperties['textAlign'];
}

interface TableTdProps {
  /** Td children */
  children?: React.ReactNode;
  /** Cell width */
  w?: React.CSSProperties['width'];
  /** Cell min width */
  miw?: React.CSSProperties['minWidth'];
  /** Text align */
  ta?: React.CSSProperties['textAlign'];
}

interface TableCaptionProps {
  /** Caption children */
  children: React.ReactNode;
}

interface TableScrollContainerProps {
  /** Container children */
  children: React.ReactNode;
  /** Minimum width before scrolling */
  minWidth?: React.CSSProperties['minWidth'];
  /** Scroll container type */
  type?: 'native' | 'scrollarea';
}

interface TableData {
  /** Table caption */
  caption?: string;
  /** Table head data */
  head?: string[];
  /** Table body data */
  body?: string[][];
  /** Table foot data */
  foot?: string[];
}

import { Table } from '@mantine/core';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function TableDemo() {
  const rows = elements.map((element) => (
    <Table.Tr key={element.name}>
      <Table.Td>{element.position}</Table.Td>
      <Table.Td>{element.name}</Table.Td>
      <Table.Td>{element.symbol}</Table.Td>
      <Table.Td>{element.mass}</Table.Td>
    </Table.Tr>
  ));

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

// Table with data prop
function TableWithData() {
  return (
    <Table
      data={{
        head: ['Element position', 'Element name', 'Symbol', 'Atomic mass'],
        body: [
          [6, 'Carbon', 'C', 12.011],
          [7, 'Nitrogen', 'N', 14.007],
          [39, 'Yttrium', 'Y', 88.906],
          [56, 'Barium', 'Ba', 137.33],
          [58, 'Cerium', 'Ce', 140.12],
        ],
      }}
    />
  );
}

// Responsive table with scroll container
function ResponsiveTable() {
  return (
    <Table.ScrollContainer minWidth={800}>
      <Table>
        {/* Table content */}
      </Table>
    </Table.ScrollContainer>
  );
}

interface ListProps {
  /** List type */
  type?: 'ordered' | 'unordered';
  /** List children */
  children: React.ReactNode;
  /** If true, list will have spacing between items */
  withPadding?: boolean;
  /** List icon */
  icon?: React.ReactNode;
  /** List spacing */
  spacing?: MantineSpacing;
  /** List item spacing */
  size?: MantineSize;
  /** If true, list will be centered */
  center?: boolean;
}

interface ListItemProps {
  /** Item children */
  children: React.ReactNode;
  /** Item icon */
  icon?: React.ReactNode;
}

import { List, ThemeIcon } from '@mantine/core';

function ListDemo() {
  return (
    <List>
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn or npm</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item>Run tests to make sure your changes do not break the build</List.Item>
    </List>
  );
}

// Custom icons
function ListWithIcons() {
  return (
    <List
      spacing="xs"
      size="sm"
      center
      icon={
        <ThemeIcon color="teal" size={24} radius="xl">
          ✓
        </ThemeIcon>
      }
    >
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn or npm</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
    </List>
  );
}

// Different item icons
function ListWithDifferentIcons() {
  return (
    <List spacing="xs" size="sm">
      <List.Item
        icon={
          <ThemeIcon color="blue" size={24} radius="xl">
            1
          </ThemeIcon>
        }
      >
        First item
      </List.Item>
      <List.Item
        icon={
          <ThemeIcon color="red" size={24} radius="xl">
            2
          </ThemeIcon>
        }
      >
        Second item
      </List.Item>
    </List>
  );
}

interface TreeProps {
  /** Tree data */
  data: TreeNodeData[];
  /** Level offset in px */
  levelOffset?: number;
  /** Expand on click */
  expandOnClick?: boolean;
  /** Tree selection mode */
  selectOnClick?: boolean;
  /** Clear selection on outside click */
  clearSelectionOnOutsideClick?: boolean;
  /** Selected node value */
  selectedState?: [string[], (value: string[]) => void];
  /** Expanded nodes */
  expandedState?: [string[], (value: string[]) => void];
  /** Called when node is selected */
  onNodeSelect?: (node: TreeNodeData) => void;
  /** Called when node is expanded/collapsed */
  onNodeExpand?: (node: TreeNodeData) => void;
  /** Render node function */
  renderNode?: (payload: {
    node: TreeNodeData;
    expanded: boolean;
    selected: boolean;
    elementProps: React.ComponentPropsWithoutRef<'div'>;
  }) => React.ReactNode;
}

interface TreeNodeData {
  /** Node value, must be unique */
  value: string;
  /** Node label */
  label: React.ReactNode;
  /** Node children */
  children?: TreeNodeData[];
  /** If true, node cannot be selected */
  disabled?: boolean;
  /** Node data for custom rendering */
  nodeProps?: Record<string, any>;
}

import { Tree } from '@mantine/core';

const data = [
  {
    value: 'src',
    label: 'src',
    children: [
      {
        value: 'components',
        label: 'components',
        children: [
          { value: 'Accordion.tsx', label: 'Accordion.tsx' },
          { value: 'Tree.tsx', label: 'Tree.tsx' },
          { value: 'Button.tsx', label: 'Button.tsx' },
        ],
      },
      { value: 'hooks', label: 'hooks' },
      { value: 'utils', label: 'utils' },
    ],
  },
  {
    value: 'package.json',
    label: 'package.json',
  },
  {
    value: 'tsconfig.json',
    label: 'tsconfig.json',
  },
];

function TreeDemo() {
  return <Tree data={data} />;
}

interface TimelineProps {
  /** Timeline children (Timeline.Item components) */
  children: React.ReactNode;
  /** Timeline orientation */
  active?: number;
  /** Timeline color */
  color?: MantineColor;
  /** Timeline radius */
  radius?: MantineRadius;
  /** Bullet size */
  bulletSize?: number;
  /** Line width */
  lineWidth?: number;
  /** If true, timeline will be reversed */
  reverseActive?: boolean;
}

interface TimelineItemProps {
  /** Item children */
  children?: React.ReactNode;
  /** Item bullet */
  bullet?: React.ReactNode;
  /** Item title */
  title?: React.ReactNode;
  /** Item color */
  color?: MantineColor;
  /** Bullet size */
  bulletSize?: number;
  /** Line variant */
  lineVariant?: 'solid' | 'dashed' | 'dotted';
  /** If true, item bullet will be hollow */
  radius?: MantineRadius;
}

import { Timeline, Text } from '@mantine/core';

function TimelineDemo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item bullet="📧" title="New email">
        <Text color="dimmed" size="sm">You've got new email from Kristina Groves</Text>
        <Text size="xs" mt={4}>2 minutes ago</Text>
      </Timeline.Item>

      <Timeline.Item bullet="📱" title="Another notification">
        <Text color="dimmed" size="sm">You've got new message from Sarah Johnson</Text>
        <Text size="xs" mt={4}>5 minutes ago</Text>
      </Timeline.Item>

      <Timeline.Item title="Bug fix" bullet="🐛" lineVariant="dashed">
        <Text color="dimmed" size="sm">You've fixed a bug</Text>
        <Text size="xs" mt={4}>10 minutes ago</Text>
      </Timeline.Item>

      <Timeline.Item title="User left a comment" bullet="💬">
        <Text color="dimmed" size="sm">You've got a comment from Robert</Text>
        <Text size="xs" mt={4}>12 minutes ago</Text>
      </Timeline.Item>
    </Timeline>
  );
}

interface CardProps {
  /** Card children */
  children: React.ReactNode;
  /** Card padding */
  padding?: MantineSpacing;
  /** Card radius */
  radius?: MantineRadius;
  /** If true, card will have border */
  withBorder?: boolean;
  /** Card shadow */
  shadow?: MantineShadow;
}

interface CardSectionProps {
  /** Section children */
  children: React.ReactNode;
  /** If true, section will inherit card padding */
  inheritPadding?: boolean;
  /** If true, section will have border */
  withBorder?: boolean;
  /** Section padding */
  p?: MantineSpacing;
  /** Section margin */
  m?: MantineSpacing;
}

import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';

function CardDemo() {
  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
      <Card.Section>
        <Image
          src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
          height={160}
          alt="Norway"
        />
      </Card.Section>

      <Group justify="space-between" mt="md" mb="xs">
        <Text fw={500}>Norway Fjord Adventures</Text>
        <Badge color="pink" variant="light">
          On Sale
        </Badge>
      </Group>

      <Text size="sm" c="dimmed">
        With Fjord Tours you can explore more of the magical fjord landscapes with tours and
        activities on and around the fjords of Norway
      </Text>

      <Button color="blue" fullWidth mt="md" radius="md">
        Book classic tour now
      </Button>
    </Card>
  );
}

interface PaperProps {
  /** Paper children */
  children?: React.ReactNode;
  /** Paper shadow */
  shadow?: MantineShadow;
  /** Paper padding */
  p?: MantineSpacing;
  /** Paper radius */
  radius?: MantineRadius;
  /** If true, paper will have border */
  withBorder?: boolean;
}

import { Paper, Text } from '@mantine/core';

function PaperDemo() {
  return (
    <Paper shadow="xs" p="md">
      <Text>Paper is the most basic ui component</Text>
    </Paper>
  );
}

interface BadgeProps {
  /** Badge children */
  children: React.ReactNode;
  /** Badge variant */
  variant?: 'light' | 'filled' | 'outline' | 'dot' | 'transparent';
  /** Badge size */
  size?: MantineSize;
  /** Badge radius */
  radius?: MantineRadius;
  /** Badge color */
  color?: MantineColor;
  /** Badge left section */
  leftSection?: React.ReactNode;
  /** Badge right section */
  rightSection?: React.ReactNode;
  /** If true, badge will take full width of container */
  fullWidth?: boolean;
}

import { Badge, Group } from '@mantine/core';

function BadgeDemo() {
  return (
    <Group>
      <Badge variant="light">Default</Badge>
      <Badge variant="filled">Filled</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="dot">Dot</Badge>
      <Badge leftSection="📧" rightSection="5">
        With sections
      </Badge>
    </Group>
  );
}

interface ThemeIconProps {
  /** Icon children */
  children: React.ReactNode;
  /** Icon size */
  size?: MantineSize | number;
  /** Icon radius */
  radius?: MantineRadius;
  /** Icon variant */
  variant?: 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle';
  /** Icon color */
  color?: MantineColor;
  /** Icon gradient (only for gradient variant) */
  gradient?: MantineGradient;
  /** If true, icon will auto adjust contrast */
  autoContrast?: boolean;
}

import { ThemeIcon, Group } from '@mantine/core';

function ThemeIconDemo() {
  return (
    <Group>
      <ThemeIcon variant="filled" size="lg">
        📧
      </ThemeIcon>
      <ThemeIcon variant="light" color="red">
        ❤️
      </ThemeIcon>
      <ThemeIcon variant="outline" color="teal">
        ✓
      </ThemeIcon>
      <ThemeIcon variant="transparent">
        🔍
      </ThemeIcon>
    </Group>
  );
}

interface AvatarProps {
  /** Avatar image src */
  src?: string | null;
  /** Avatar alt text */
  alt?: string;
  /** Avatar radius */
  radius?: MantineRadius;
  /** Avatar size */
  size?: MantineSize | number;
  /** Avatar variant */
  variant?: 'filled' | 'light' | 'outline' | 'transparent' | 'white';
  /** Avatar color */
  color?: MantineColor;
  /** Avatar children (displayed when no image) */
  children?: React.ReactNode;
  /** Image props */
  imageProps?: Record<string, any>;
}

interface AvatarGroupProps {
  /** Group children */
  children: React.ReactNode;
  /** Space between avatars */
  spacing?: MantineSpacing | number;
}

import { Avatar, Group } from '@mantine/core';

function AvatarDemo() {
  return (
    <Group>
      <Avatar 
        src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80" 
        alt="User Avatar" 
      />
      <Avatar color="cyan" radius="xl">MK</Avatar>
      <Avatar color="blue">+5</Avatar>
    </Group>
  );
}

// Avatar group
function AvatarGroupDemo() {
  return (
    <Avatar.Group spacing="sm">
      <Avatar src="image1.png" radius="xl" />
      <Avatar src="image2.png" radius="xl" />
      <Avatar src="image3.png" radius="xl" />
      <Avatar radius="xl">+5</Avatar>
    </Avatar.Group>
  );
}

interface ImageProps {
  /** Image src */
  src?: string | null;
  /** Image alt text */
  alt?: string;
  /** Image width */
  w?: React.CSSProperties['width'];
  /** Image height */
  h?: React.CSSProperties['height'];
  /** Image fit */
  fit?: React.CSSProperties['objectFit'];
  /** Image radius */
  radius?: MantineRadius;
  /** Fallback component */
  fallbackSrc?: string;
  /** Called when image fails to load */
  onError?: () => void;
  /** Called when image loads */
  onLoad?: () => void;
}

import { Image } from '@mantine/core';

function ImageDemo() {
  return (
    <Image
      radius="md"
      h={200}
      src="https://images.unsplash.com/photo-1511216335778-7cb8f49fa7a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
      alt="Random image"
      fallbackSrc="https://placehold.co/600x400?text=Fallback"
    />
  );
}

interface ColorSwatchProps {
  /** Swatch color */
  color: string;
  /** Swatch size */
  size?: number;
  /** Swatch radius */
  radius?: MantineRadius;
  /** If true, swatch will have border */
  withShadow?: boolean;
  /** Called when swatch is clicked */
  onClick?: () => void;
  /** Swatch children */
  children?: React.ReactNode;
}

import { ColorSwatch, Group } from '@mantine/core';

function ColorSwatchDemo() {
  return (
    <Group>
      <ColorSwatch color="#ff6b6b" />
      <ColorSwatch color="#4ecdc4" />
      <ColorSwatch color="#45b7d1" />
      <ColorSwatch color="#96ceb4" size={50} />
      <ColorSwatch color="#feca57" radius="xs" withShadow />
    </Group>
  );
}

interface DividerProps {
  /** Divider color */
  color?: MantineColor;
  /** Divider orientation */
  orientation?: 'horizontal' | 'vertical';
  /** Divider size */
  size?: MantineSize | number;
  /** Divider variant */
  variant?: 'solid' | 'dashed' | 'dotted';
  /** Divider label */
  label?: React.ReactNode;
  /** Label position */
  labelPosition?: 'left' | 'center' | 'right';
}

import { Divider, Text } from '@mantine/core';

function DividerDemo() {
  return (
    <div>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Text>

      <Divider my="sm" />

      <Text>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
      </Text>

      <Divider my="sm" variant="dashed" />

      <Text>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
      </Text>

      <Divider
        my="xs"
        label="Label on the left"
        labelPosition="left"
      />

      <Divider
        my="xs"
        label="Label in the center"
        labelPosition="center"
      />

      <Divider
        my="xs"
        label="Label on the right"
        labelPosition="right"
      />
    </div>
  );
}

interface SpoilerProps {
  /** Spoiler children */
  children: React.ReactNode;
  /** Maximum height when collapsed */
  maxHeight: number;
  /** Show label */
  showLabel?: React.ReactNode;
  /** Hide label */
  hideLabel?: React.ReactNode;
  /** Transition duration */
  transitionDuration?: number;
  /** Called when spoiler state changes */
  onExpandedChange?: (expanded: boolean) => void;
  /** If true, spoiler is controlled */
  expanded?: boolean;
  /** Default expanded state */
  defaultExpanded?: boolean;
}

import { Spoiler } from '@mantine/core';

function SpoilerDemo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Long content that will be collapsed */}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde
      provident eos fugiat id necessitatibus magni ducimus molestias. Placeat
      consectetur consequuntur quod voluptatum perspiciatis repellat
      consequatur, maxime mollitia, illo rerum sunt debitis aliquam in
      inventore facere obcaecati harum vero molestias distinctio eaque.
      Aspernatur corporis soluta dicta temporibus. Enim quia voluptatum
      consequatur fugiat eos, distinctio excepturi amet est! Aut corporis
      veritatis laboriosam distinctio stone unde aliquam minima. Modi
      consectetur tempore maiores esse dolorum nemo voluptatum culpa
      voluptatem non facilis eligendi explicabo quis vel, placeat quasi
      dignissimos. Voluptatibus laudantium distinctio reiciendis eius ex
      aliquid quis sit dolor eum reprehenderit quae placeat provident
      mollitia eos aliquam quibusdam sapiente aperiam accusamus non velit,
      illo quam eaque!
    </Spoiler>
  );
}

interface AspectRatioProps {
  /** Aspect ratio */
  ratio: number;
  /** Container children */
  children: React.ReactNode;
}

import { AspectRatio } from '@mantine/core';

function AspectRatioDemo() {
  return (
    <AspectRatio ratio={16 / 9}>
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.1399415657293!2d-74.00369368459418!3d40.741895479327494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1616590069614!5m2!1sen!2sus"
        title="Google map"
        style={{ border: 0 }}
      />
    </AspectRatio>
  );
}

interface IndicatorProps {
  /** Indicator children (element to add indicator to) */
  children: React.ReactNode;
  /** Indicator content */
  label?: React.ReactNode;
  /** Indicator size */
  size?: number;
  /** Indicator radius */
  radius?: MantineRadius;
  /** Indicator color */
  color?: MantineColor;
  /** Indicator position */
  position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
  /** Indicator offset */
  offset?: number;
  /** If true, indicator will be disabled */
  disabled?: boolean;
  /** If true, indicator will not render when label is empty */
  showZero?: boolean;
  /** If true, indicator will have dot style */
  dot?: boolean;
  /** If true, indicator will be inline */
  inline?: boolean;
  /** Processing animation */
  processing?: boolean;
  /** If true, indicator will have border */
  withBorder?: boolean;
}

import { Indicator, Avatar, Button, Group } from '@mantine/core';

function IndicatorDemo() {
  return (
    <Group>
      <Indicator>
        <Avatar
          size="lg"
          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
        />
      </Indicator>

      <Indicator label="New" size={16}>
        <Avatar
          size="lg"
          src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
        />
      </Indicator>

      <Indicator label="99+" inline size={22} color="red">
        <Button variant="outline">Button</Button>
      </Indicator>
    </Group>
  );
}

interface PillProps {
  /** Pill children */
  children?: React.ReactNode;
  /** If true, pill will have remove button */
  withRemoveButton?: boolean;
  /** Called when remove button is clicked */
  onRemove?: () => void;
  /** Remove button aria-label */
  removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
  /** Pill size */
  size?: MantineSize;
}

import { Pill, Group } from '@mantine/core';

function PillDemo() {
  return (
    <Group>
      <Pill>React</Pill>
      <Pill>Vue</Pill>
      <Pill withRemoveButton onRemove={() => console.log('removed')}>
        Angular
      </Pill>
    </Group>
  );
}

import { MantineProvider } from '@mantine/core';

const theme = {
  components: {
    Table: {
      defaultProps: {
        striped: true,
        highlightOnHover: true,
        withBorder: true,
      },
    },
    Card: {
      defaultProps: {
        shadow: 'sm',
        radius: 'md',
        withBorder: true,
      },
    },
    Badge: {
      defaultProps: {
        variant: 'light',
        size: 'sm',
      },
    },
  },
};

import { Table, ScrollArea } from '@mantine/core';

function ResponsiveTable({ data }) {
  return (
    <ScrollArea>
      <Table>
        <Table.Thead>
          <Table.Tr>
            {data.headers.map(header => (
              <Table.Th key={header}>{header}</Table.Th>
            ))}
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {data.rows.map(row => (
            <Table.Tr key={row.id}>
              {row.cells.map(cell => (
                <Table.Td key={cell.id}>{cell.value}</Table.Td>
              ))}
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>
    </ScrollArea>
  );
}

import { Card, SimpleGrid, Image, Text, Badge, Button } from '@mantine/core';

function DataCardGrid({ items }) {
  return (
    <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
      {items.map(item => (
        <Card key={item.id} shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image src={item.image} height={160} alt={item.title} />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>{item.title}</Text>
            <Badge color={item.status === 'new' ? 'pink' : 'gray'}>
              {item.status}
            </Badge>
          </Group>

          <Text size="sm" c="dimmed">
            {item.description}
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            View Details
          </Button>
        </Card>
      ))}
    </SimpleGrid>
  );
}