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}
+
+
+
+
+ );
+ })}
+
+
+
-
-
- ))}
+
+ 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})`;
+}