TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-23 11:39:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: better sizing

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-04-04 11:04:27 -05:00
1 parent b5fdc4d5cf
commit 17ff8e0819
3 files changed
+66 -41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/compare/page.tsx
+53 -35
View File
@@ -28,7 +28,7 @@ export default function Page() {
);
return (
<PageWrapper color="crimson">
<PageWrapper color="crimson" size="100%">
<Flex justify="center">
<Dialog.Root
open={addTankDialogOpen}
@@ -66,45 +66,63 @@ export default function Page() {
</Dialog.Root>
</Flex>
<Table.Root variant="surface">
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell>Statistics</Table.ColumnHeaderCell>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
return (
<Table.ColumnHeaderCell>
<Flex direction="column">
<img src={tankIcon(id)} />
<Text>{tank.name}</Text>
</Flex>
{tanks.length > 0 && (
<Flex justify="center">
<Table.Root
variant="surface"
style={{
maxWidth: '100%',
}}
>
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell width="0">
Statistics
</Table.ColumnHeaderCell>
);
})}
</Table.Row>
</Table.Header>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
<Table.Body>
<Table.Row>
<Table.RowHeaderCell>Stat 1</Table.RowHeaderCell>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
return (
<Table.ColumnHeaderCell width="0">
<Flex direction="column" align="center">
<img
src={tankIcon(id)}
width={64}
height={64}
style={{
objectFit: 'contain',
}}
/>
<Text>{tank.name}</Text>
</Flex>
</Table.ColumnHeaderCell>
);
})}
</Table.Row>
</Table.Header>
return <Table.Cell>{Math.random()}</Table.Cell>;
})}
</Table.Row>
<Table.Body>
<Table.Row>
<Table.RowHeaderCell>Stat 1</Table.RowHeaderCell>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
<Table.Row>
<Table.RowHeaderCell>Stat 2</Table.RowHeaderCell>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
return <Table.Cell>{Math.random()}</Table.Cell>;
})}
</Table.Row>
return <Table.Cell>{Math.random()}</Table.Cell>;
})}
</Table.Row>
</Table.Body>
</Table.Root>
<Table.Row>
<Table.RowHeaderCell>Stat 2</Table.RowHeaderCell>
{tanks.map((id) => {
const tank = awaitedTankDefinitions[id];
return <Table.Cell>{Math.random()}</Table.Cell>;
})}
</Table.Row>
</Table.Body>
</Table.Root>
</Flex>
)}
</PageWrapper>
);
}
src/components/PageWrapper.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
type PageWrapperProps = FlexProps & {
color?: ComponentProps<typeof Theme>['accentColor'];
size?: number;
size?: number | string;
};
export default function PageWrapper({