diff --git a/src/app/tools/tankopedia/[id]/components/Videos.tsx b/src/app/tools/tankopedia/[id]/components/Videos.tsx
new file mode 100644
index 000000000..24e9481d2
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Videos.tsx
@@ -0,0 +1,59 @@
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { videoDefinitions } from '../../../../../core/blitzkrieg/videos';
+import { useDuel } from '../../../../../stores/duel';
+
+export function Videos() {
+ const id = useDuel((state) => state.protagonist!.tank.id);
+ const awaitedVideoDefinitions = use(videoDefinitions);
+ const videos = awaitedVideoDefinitions[id] ?? [];
+
+ return (
+
+ Review videos
+
+
+ {videos.map((video) => (
+
+
+
+ ))}
+
+
+
+
+
+ {videos.length === 0 ? 'Suggest' : 'Suggest more'}
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 5b5561b64..63f127128 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -17,6 +17,7 @@ import { Provisions } from './components/Characteristics/components/Provisions';
import { Skills } from './components/Characteristics/components/Skills';
import { TankSandbox } from './components/Model/TankSandbox';
import { Title } from './components/Title';
+import { Videos } from './components/Videos';
export default function Page({ params }: { params: { id: string } }) {
const initialId = parseInt(params.id);
@@ -83,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
style={{
flex: 1,
width: '100%',
- top: 64,
+ top: 64 + 16,
position: wideFormat ? 'sticky' : undefined,
}}
>
@@ -91,7 +92,6 @@ export default function Page({ params }: { params: { id: string } }) {
-
@@ -110,6 +110,8 @@ export default function Page({ params }: { params: { id: string } }) {
+
+
>
)}
diff --git a/src/core/blitzkrieg/videos.ts b/src/core/blitzkrieg/videos.ts
new file mode 100644
index 000000000..dca8788b8
--- /dev/null
+++ b/src/core/blitzkrieg/videos.ts
@@ -0,0 +1,18 @@
+import { asset } from './asset';
+
+export const videoDefinitions = fetch(asset('definitions/videos.csv'))
+ .then((response) => response.text())
+ .then((text) =>
+ text
+ .split('\n')
+ .map((line) => {
+ const [idString, ...videos] = line.split(',');
+ const id = Number(idString);
+ return { id, videos };
+ })
+ .filter(({ videos }) => videos.length > 0)
+ .reduce>((accumulator, { id, videos }) => {
+ accumulator[id] = videos;
+ return accumulator;
+ }, {}),
+ );