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

fix: link the whole frame

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-08-18 11:21:16 -05:00
1 parent 69b2035cfc
commit d247e67690
2 files changed
+54 -56
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Tankopedia/GuideSection/components/GuidesBlitz.tsx
-51
View File
@@ -1,51 +0,0 @@
import { CaretRightIcon } from '@radix-ui/react-icons';
import { Box, Flex, Link, Text } from '@radix-ui/themes';
import { Var } from '../../../../core/radix/var';
import type { TankGuide } from '../../../../pages/[...locale]/tanks/[slug]/index.astro';
interface Props {
guide: TankGuide;
}
export function GuidesBlitz({ guide }: Props) {
return (
<>
<Flex direction="column" gap="4" position="relative">
<Text size="4" weight="medium">
<Flex width="100%" justify="start" align="center" gap="2">
<img
style={{
width: '1.5em',
height: '1.5em',
objectFit: 'contain',
}}
src="https://guidesblitz.com/wp-content/uploads/2023/11/cropped-logo-1.png"
/>
GuidesBlitz
</Flex>
</Text>
<Text size="2">{guide.description}</Text>
<img style={{ width: '100%' }} src={guide.image} />
<Box
position="absolute"
bottom="0"
width="100%"
height="100%"
left="0"
style={{
background: `linear-gradient(${Var('gray-a1')}, ${Var('gray-1')})`,
}}
/>
</Flex>
<Link underline="always" href={guide.url} target="_blank">
<Flex width="100%" justify="center" align="center" gap="1">
Read the full guide
<CaretRightIcon width="1em" height="1em" />
</Flex>
</Link>
</>
);
}
packages/website/src/components/Tankopedia/GuideSection/index.tsx
+54 -5
View File
@@ -1,6 +1,7 @@
import { Flex } from '@radix-ui/themes';
import { CaretRightIcon } from '@radix-ui/react-icons';
import { Box, Flex, Link, Text } from '@radix-ui/themes';
import { Var } from '../../../core/radix/var';
import type { TankGuide } from '../../../pages/[...locale]/tanks/[slug]/index.astro';
import { GuidesBlitz } from './components/GuidesBlitz';
interface Props {
guide: TankGuide;
@@ -9,9 +10,57 @@ interface Props {
export function GuideSection({ guide }: Props) {
return (
<Flex justify="center">
<Flex maxWidth="35rem" direction="column" gap="4">
<GuidesBlitz guide={guide} />
</Flex>
<Link
color="gray"
href={guide.url}
underline="none"
highContrast
style={{
display: 'flex',
maxWidth: '35rem',
flexDirection: 'column',
gap: Var('space-4'),
}}
>
<Flex maxWidth="35rem" direction="column" gap="4">
<Flex direction="column" gap="4" position="relative">
<Text size="4" weight="medium">
<Flex width="100%" justify="start" align="center" gap="2">
<img
style={{
width: '1.5em',
height: '1.5em',
objectFit: 'contain',
}}
src="https://guidesblitz.com/wp-content/uploads/2023/11/cropped-logo-1.png"
/>
GuidesBlitz
</Flex>
</Text>
<Text size="2">{guide.description}</Text>
<img style={{ width: '100%' }} src={guide.image} />
<Box
position="absolute"
bottom="0"
width="100%"
height="100%"
left="0"
style={{
background: `linear-gradient(${Var('gray-a1')}, ${Var('gray-1')})`,
}}
/>
</Flex>
<Text color="purple">
<Flex width="100%" justify="center" align="center" gap="1">
Read the full guide
<CaretRightIcon width="1em" height="1em" />
</Flex>
</Text>
</Flex>
</Link>
</Flex>
);
}