mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-23 19:49:50 +02:00
feat: guidesblitz
This commit is contained in:
TrèsAbhi committed
1 parent
e145d7c6e8
commit
0b5c88531f
9 files changed
+220
-8
No files matched your search
@@ -0,0 +1,51 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
import { youtubers } from '@blitzkit/core';
|
||||
import { CaretRightIcon } from '@radix-ui/react-icons';
|
||||
import { Box, Flex, Link, Skeleton, Text } from '@radix-ui/themes';
|
||||
import { awaitableReviews } from '../../../../core/awaitables/reviews';
|
||||
import { Var } from '../../../../core/radix/var';
|
||||
import { Duel } from '../../../../stores/duel';
|
||||
import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
|
||||
import { VerifiedIcon } from '../../../VerifiedIcon';
|
||||
|
||||
const reviews = await awaitableReviews;
|
||||
|
||||
export function YouTube({ skeleton }: MaybeSkeletonComponentProps) {
|
||||
const tank = Duel.use((state) => state.protagonist.tank);
|
||||
const videos = reviews.reviews[tank.id]?.videos;
|
||||
|
||||
if (!videos) return null;
|
||||
|
||||
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://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/330px-YouTube_full-color_icon_%282017%29.svg.png"
|
||||
/>
|
||||
YouTube
|
||||
</Flex>
|
||||
</Text>
|
||||
|
||||
<Flex direction="column" gap="3">
|
||||
{videos.map((video) => {
|
||||
const image = `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`;
|
||||
const youtuber = youtubers.find(
|
||||
(youtuber) => youtuber.id === video.author,
|
||||
);
|
||||
|
||||
if (!youtuber) return null;
|
||||
|
||||
return (
|
||||
<Link
|
||||
color="gray"
|
||||
highContrast
|
||||
underline="hover"
|
||||
key={video.id}
|
||||
href={`https://www.youtube.com/watch?v=${video.id}`}
|
||||
target="_blank"
|
||||
>
|
||||
<Flex
|
||||
width="fit-content"
|
||||
direction="column"
|
||||
style={{
|
||||
borderRadius: 'var(--radius-3)',
|
||||
overflow: 'hidden',
|
||||
background: skeleton
|
||||
? Var('color-panel-solid')
|
||||
: `url(${image})`,
|
||||
backgroundPosition: '0 18px',
|
||||
backgroundSize: 'cover',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
background: skeleton ? 'transparent' : `url(${image})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
height: 128,
|
||||
aspectRatio: '16 / 9',
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
p="2"
|
||||
width="100%"
|
||||
justify="center"
|
||||
style={{
|
||||
backdropFilter: 'blur(4rem)',
|
||||
WebkitBackdropFilter: 'blur(4rem)',
|
||||
}}
|
||||
align="center"
|
||||
gap="1"
|
||||
>
|
||||
<Text>
|
||||
{!skeleton && youtuber.name}
|
||||
{skeleton && <Skeleton height="1em" width="7rem" />}
|
||||
</Text>
|
||||
{!skeleton && <VerifiedIcon width="1em" height="1em" />}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<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" target="_blank">
|
||||
<Flex width="100%" justify="center" align="center" gap="1">
|
||||
Read the full guide
|
||||
<CaretRightIcon width="1em" height="1em" />
|
||||
</Flex>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Flex } from '@radix-ui/themes';
|
||||
import type { TankGuide } from '../../../pages/[...locale]/tanks/[slug]/index.astro';
|
||||
import { GuidesBlitz } from './components/GuidesBlitz';
|
||||
|
||||
interface Props {
|
||||
guide: TankGuide;
|
||||
}
|
||||
|
||||
export function GuideSection({ guide }: Props) {
|
||||
return (
|
||||
<Flex justify="center">
|
||||
<Flex maxWidth="40rem" direction="column" gap="4">
|
||||
<GuidesBlitz guide={guide} />
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user