diff --git a/.vscode/settings.json b/.vscode/settings.json index 784528977..db1baa6b6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -188,6 +188,7 @@ "XMLDVPL", "YAMLDVPL", "yolo", + "youtuber", "youtubers", "zustand" ], diff --git a/src/app/tools/tankopedia/[id]/components/VideoSection.tsx b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx index 19d3f0527..70f54fb9c 100644 --- a/src/app/tools/tankopedia/[id]/components/VideoSection.tsx +++ b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx @@ -1,8 +1,12 @@ -import { InfoCircledIcon } from '@radix-ui/react-icons'; -import { Callout, Flex, Heading, Link } from '@radix-ui/themes'; +import { PlusIcon } from '@radix-ui/react-icons'; +import { Box, Flex, Heading, Text } from '@radix-ui/themes'; import { use } from 'react'; +import { Link } from '../../../../../components/Link'; import PageWrapper from '../../../../../components/PageWrapper'; +import { VerifiedIcon } from '../../../../../components/VerifiedIcon'; +import { youtubers } from '../../../../../constants/youtubers'; import { reviews } from '../../../../../core/blitzkit/reviews'; +import { Var } from '../../../../../core/blitzkit/var'; import * as Duel from '../../../../../stores/duel'; export function VideoSection() { @@ -15,38 +19,84 @@ export function VideoSection() { return ( - + Review videos - - - - - - BlitzKit does not endorse any review videos. - - + BlitzKit does not endorse any review videos. - {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 ( + + + + + {youtuber.name} + + + + + ); + })} + + + - Video thumbnail - - ))} + + Apply to feature your video + + diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index dbf1911fa..446db40e6 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -80,7 +80,7 @@ export default function Page({ params }: { params: { id: string } }) { }, []); return ( - + diff --git a/src/components/VerifiedIcon.tsx b/src/components/VerifiedIcon.tsx new file mode 100644 index 000000000..278a1bcf2 --- /dev/null +++ b/src/components/VerifiedIcon.tsx @@ -0,0 +1,16 @@ +import { ComponentProps } from 'react'; + +export function VerifiedIcon(props: ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/src/core/blitzkit/var.ts b/src/core/blitzkit/var.ts new file mode 100644 index 000000000..417008b2d --- /dev/null +++ b/src/core/blitzkit/var.ts @@ -0,0 +1,7 @@ +type Name = + | `color-${'background' | `panel-${'solid' | 'translucent'}` | 'surface' | 'overlay'}` + | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`; + +export function Var(name: Name) { + return `var(--${name})`; +}