mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-24 03:59:50 +02:00
fix: max width
This commit is contained in:
TrèsAbhi committed
1 parent
3d2b443dc7
commit
87b0824523
1 file changed
+103
-100
+103
-100
@@ -1,124 +1,127 @@
|
|||||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||||
import { Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
|
import { Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import PageWrapper from '../components/PageWrapper';
|
||||||
import { TOOLS } from '../constants/tools';
|
import { TOOLS } from '../constants/tools';
|
||||||
import { imgur } from '../core/blitzkit/imgur';
|
import { imgur } from '../core/blitzkit/imgur';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Grid
|
<PageWrapper size={1028}>
|
||||||
p="4"
|
<Grid
|
||||||
gap="4"
|
p="4"
|
||||||
columns={{
|
gap="4"
|
||||||
initial: undefined,
|
columns={{
|
||||||
sm: '2',
|
initial: undefined,
|
||||||
}}
|
sm: '2',
|
||||||
flow="row-dense"
|
}}
|
||||||
>
|
flow="row-dense"
|
||||||
{TOOLS.map((tool) => {
|
>
|
||||||
return (
|
{TOOLS.map((tool) => {
|
||||||
<Flex
|
return (
|
||||||
key={tool.id}
|
<Flex
|
||||||
style={{
|
key={tool.id}
|
||||||
position: 'relative',
|
|
||||||
borderRadius: 'var(--radius-2)',
|
|
||||||
overflow: 'hidden',
|
|
||||||
backgroundImage: `url(${imgur(tool.image)})`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'center',
|
|
||||||
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
|
||||||
}}
|
|
||||||
gridColumn={{
|
|
||||||
initial: undefined,
|
|
||||||
sm: tool.significant ? '1 / 3' : undefined,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Link
|
|
||||||
href={tool.href ?? `/tools/${tool.id}`}
|
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
position: 'relative',
|
||||||
width: '100%',
|
borderRadius: 'var(--radius-2)',
|
||||||
height: '100%',
|
overflow: 'hidden',
|
||||||
alignItems: 'end',
|
backgroundImage: `url(${imgur(tool.image)})`,
|
||||||
textDecoration: 'none',
|
backgroundSize: 'cover',
|
||||||
color: 'inherit',
|
backgroundPosition: 'center',
|
||||||
|
height: tool.significant ? 'min(320px, 50vh)' : '256px',
|
||||||
|
}}
|
||||||
|
gridColumn={{
|
||||||
|
initial: undefined,
|
||||||
|
sm: tool.significant ? '1 / 3' : undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Flex
|
<Link
|
||||||
px={{
|
href={tool.href ?? `/tools/${tool.id}`}
|
||||||
initial: '6',
|
|
||||||
md: '8',
|
|
||||||
}}
|
|
||||||
py="6"
|
|
||||||
gap="4"
|
|
||||||
align="center"
|
|
||||||
justify="between"
|
|
||||||
width="100%"
|
|
||||||
direction={{
|
|
||||||
initial: 'column',
|
|
||||||
sm: 'row',
|
|
||||||
}}
|
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'var(--color-panel-translucent)',
|
display: 'flex',
|
||||||
backdropFilter: 'blur(16px)',
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
alignItems: 'end',
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Flex
|
<Flex
|
||||||
direction="column"
|
px={{
|
||||||
justify="center"
|
initial: '6',
|
||||||
align={{
|
md: '8',
|
||||||
initial: 'center',
|
|
||||||
sm: 'start',
|
|
||||||
}}
|
}}
|
||||||
>
|
py="6"
|
||||||
<Heading
|
gap="4"
|
||||||
align={{
|
align="center"
|
||||||
initial: 'center',
|
justify="between"
|
||||||
sm: 'left',
|
width="100%"
|
||||||
}}
|
direction={{
|
||||||
size={{
|
initial: 'column',
|
||||||
initial: '7',
|
sm: 'row',
|
||||||
sm: tool.significant ? '7' : '5',
|
|
||||||
}}
|
|
||||||
weight="medium"
|
|
||||||
>
|
|
||||||
{tool.title}
|
|
||||||
</Heading>
|
|
||||||
<Text
|
|
||||||
align={{
|
|
||||||
initial: 'center',
|
|
||||||
sm: 'left',
|
|
||||||
}}
|
|
||||||
size={{
|
|
||||||
initial: '4',
|
|
||||||
sm: tool.significant ? '4' : '3',
|
|
||||||
}}
|
|
||||||
color="gray"
|
|
||||||
>
|
|
||||||
{tool.description}
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
size={{
|
|
||||||
initial: undefined,
|
|
||||||
sm: tool.significant ? '3' : undefined,
|
|
||||||
}}
|
}}
|
||||||
color={tool.button.color}
|
|
||||||
style={{
|
style={{
|
||||||
cursor: 'inherit',
|
backgroundColor: 'var(--color-panel-translucent)',
|
||||||
|
backdropFilter: 'blur(16px)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tool.button.text}
|
<Flex
|
||||||
<CaretRightIcon />
|
direction="column"
|
||||||
</Button>
|
justify="center"
|
||||||
</Flex>
|
align={{
|
||||||
</Link>
|
initial: 'center',
|
||||||
</Flex>
|
sm: 'start',
|
||||||
);
|
}}
|
||||||
})}
|
>
|
||||||
</Grid>
|
<Heading
|
||||||
|
align={{
|
||||||
|
initial: 'center',
|
||||||
|
sm: 'left',
|
||||||
|
}}
|
||||||
|
size={{
|
||||||
|
initial: '7',
|
||||||
|
sm: tool.significant ? '7' : '5',
|
||||||
|
}}
|
||||||
|
weight="medium"
|
||||||
|
>
|
||||||
|
{tool.title}
|
||||||
|
</Heading>
|
||||||
|
<Text
|
||||||
|
align={{
|
||||||
|
initial: 'center',
|
||||||
|
sm: 'left',
|
||||||
|
}}
|
||||||
|
size={{
|
||||||
|
initial: '4',
|
||||||
|
sm: tool.significant ? '4' : '3',
|
||||||
|
}}
|
||||||
|
color="gray"
|
||||||
|
>
|
||||||
|
{tool.description}
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
size={{
|
||||||
|
initial: undefined,
|
||||||
|
sm: tool.significant ? '3' : undefined,
|
||||||
|
}}
|
||||||
|
color={tool.button.color}
|
||||||
|
style={{
|
||||||
|
cursor: 'inherit',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tool.button.text}
|
||||||
|
<CaretRightIcon />
|
||||||
|
</Button>
|
||||||
|
</Flex>
|
||||||
|
</Link>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</PageWrapper>
|
||||||
|
|
||||||
<div style={{ flex: 1 }} />
|
<div style={{ flex: 1 }} />
|
||||||
</>
|
</>
|
||||||
|
|||||||
Reference in new issue
Block a user