Mantine Custom Components Skill

Here’s a reusable Mantine `DataTable` component optimized for healthcare dashboards with dark mode support, responsive layout, and TypeScript types:

```tsx
import { Table, TableProps, ScrollArea, Box, Text } from '@mantine/core';
import { useMantineTheme } from '@mantine/core';

export interface HealthcareDataTableProps extends TableProps {
  data: { id: string; patientName: string; diagnosis: string; status: 'active' | 'inactive' }[];
  loading?: boolean;
}

export function HealthcareDataTable({ data, loading = false, ...props }: HealthcareDataTableProps) {
  const theme = useMantineTheme();

  const rows = data.map((item) => (
    <Table.Tr key={item.id}>
      <Table.Td>
        <Text size="sm" fw={500}>
          {item.patientName}
        </Text>
      </Table.Td>
      <Table.Td>
        <Text size="sm" c="dimmed">
          {item.diagnosis}
        </Text>
      </Table.Td>
      <Table.Td>
        <Box
          bg={item.status === 'active' ? theme.colors.blue[1] : theme.colors.gray[1]}
          px="xs"
          py={4}
          style={{ borderRadius: theme.radius.sm }}
        >
          <Text size="xs" c={item.status === 'active' ? 'blue' : 'gray'}>
            {item.status === 'active' ? 'Active' : 'Inactive'}
          </Text>
        </Box>
      </Table.Td>
    </Table.Tr>
  ));

  return (
    <ScrollArea>
      <Table striped highlightOnHover withTableBorder {...props}>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Patient Name</Table.Th>
            <Table.Th>Diagnosis</Table.Th>
            <Table.Th>Status</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>{rows}</Table.Tbody>
      </Table>
    </ScrollArea>
  );
}
```

### Key Features:
- **Dark Mode Ready**: Uses `useMantineTheme` for dynamic color adaptation.
- **Responsive**: Wrapped in `ScrollArea` for overflow handling.
- **Type Safety**: Includes `HealthcareDataTableProps` with strict data types.
- **Status Indicators**: Color-coded badges for patient status.

### Usage Example:
```tsx
<HealthcareDataTable
  data={[
    { id: '1', patientName: 'John Doe', diagnosis: 'Hypertension', status: 'active' },
    { id: '2', patientName: 'Jane Smith', diagnosis: 'Diabetes', status: 'inactive' }
  ]}
  loading={false}
  style={{ width: '100%' }}
/>
```