mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/website/components/sponsors/TransactionTable.tsx
View File

@@ -1,9 +1,10 @@
import React from 'react';
import { Box, BoxProps } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Button } from '@/ui/Button';
import { Download, Receipt, Clock, Check, AlertTriangle } from 'lucide-react';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
export interface Transaction {
id: string;
@@ -59,67 +60,66 @@ const STATUS_CONFIG = {
*/
export function TransactionTable({ transactions, onDownload }: TransactionTableProps) {
return (
<Box border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
<Box display={{ base: 'none', md: 'grid' }} gridCols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
<Box colSpan={5}>
<Stack border rounded="xl" borderColor="border-charcoal-outline/50" overflow="hidden" bg="bg-iron-gray/10">
<Grid className="hidden md:grid" cols={12} gap={4} p={4} bg="bg-iron-gray/30" borderBottom borderColor="border-charcoal-outline/50">
<Stack colSpan={5}>
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Description</Text>
</Box>
<Box colSpan={2}>
</Stack>
<Stack colSpan={2}>
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Date</Text>
</Box>
<Box colSpan={2}>
</Stack>
<Stack colSpan={2}>
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Amount</Text>
</Box>
<Box colSpan={2}>
</Stack>
<Stack colSpan={2}>
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Status</Text>
</Box>
<Box colSpan={1} textAlign="right">
</Stack>
<Stack colSpan={1} textAlign="right">
<Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">Action</Text>
</Box>
</Box>
</Stack>
</Grid>
<Box>
<Stack>
{transactions.map((tx, index) => {
const status = STATUS_CONFIG[tx.status];
return (
<Box
<Grid
key={tx.id}
display="grid"
gridCols={{ base: 1, md: 12 }}
cols={1}
mdCols={12}
gap={4}
p={4}
alignItems="center"
borderBottom={index !== transactions.length - 1}
borderColor="border-charcoal-outline/30"
hoverBg="bg-iron-gray/20"
transition-colors
className="transition-colors hover:bg-bg-iron-gray/20"
>
<Box colSpan={{ base: 1, md: 5 }} display="flex" alignItems="center" gap={3}>
<Box w="8" h="8" rounded="lg" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
<Stack colSpan={{ base: 1, md: 5 } as any} direction="row" align="center" gap={3}>
<Stack w="8" h="8" rounded="lg" bg="bg-iron-gray/50" align="center" justify="center">
<Icon icon={Receipt} size={4} color="text-gray-400" />
</Box>
<Box>
</Stack>
<Stack>
<Text weight="medium" color="text-white" block>{tx.description}</Text>
<Text size="xs" color="text-gray-500">{tx.invoiceNumber} • {tx.type}</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box colSpan={{ base: 1, md: 2 }}>
<Stack colSpan={{ base: 1, md: 2 } as any}>
<Text size="sm" color="text-gray-400">{new Date(tx.date).toLocaleDateString()}</Text>
</Box>
</Stack>
<Box colSpan={{ base: 1, md: 2 }}>
<Stack colSpan={{ base: 1, md: 2 } as any}>
<Text weight="semibold" color="text-white">${tx.amount.toFixed(2)}</Text>
</Box>
</Stack>
<Box colSpan={{ base: 1, md: 2 }}>
<Box display="inline-flex" alignItems="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg as BoxProps<'div'>['bg']} border borderColor={status.border as BoxProps<'div'>['borderColor']}>
<Stack colSpan={{ base: 1, md: 2 } as any}>
<Stack direction="row" align="center" gap={1.5} px={2} py={0.5} rounded="full" bg={status.bg} border borderColor={status.border}>
<Icon icon={status.icon} size={3} color={status.color as any} />
<Text size="xs" weight="medium" color={status.color as any}>{status.label}</Text>
</Box>
</Box>
</Stack>
</Stack>
<Box colSpan={{ base: 1, md: 1 }} textAlign="right">
<Stack colSpan={{ base: 1, md: 1 } as any} textAlign="right">
<Button
variant="ghost"
size="sm"
@@ -128,11 +128,11 @@ export function TransactionTable({ transactions, onDownload }: TransactionTableP
>
PDF
</Button>
</Box>
</Box>
</Stack>
</Grid>
);
})}
</Box>
</Box>
</Stack>
</Stack>
);
}