feat: display videos

.vscode/settings.json

@@ -188,6 +188,7 @@
     "XMLDVPL",
     "YAMLDVPL",
     "yolo",
+    "youtuber",
     "youtubers",
     "zustand"
   ],

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 (
     <PageWrapper noFlex1>
       <Flex direction="column" gap="6" align="center">
-        <Flex direction="column" gap="2" align="center">
+        <Flex direction="column" align="center">
           <Heading size="6">Review videos</Heading>
 
-          <Callout.Root size="1">
-            <Callout.Icon>
-              <InfoCircledIcon />
-            </Callout.Icon>
-            <Callout.Text>
-              BlitzKit does not endorse any review videos.
-            </Callout.Text>
-          </Callout.Root>
+          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
         </Flex>
 
         <Flex gap="3" wrap="wrap">
-          {videos.map((video) => (
-            <Link
-              key={video.id}
-              href={`https://www.youtube.com/watch?v=${video.id}`}
-              target="_blank"
+          {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
+                  direction="column"
+                  style={{
+                    borderRadius: 'var(--radius-3)',
+                    overflow: 'hidden',
+                    background: `url(${image})`,
+                    backgroundSize: 'cover',
+                  }}
+                >
+                  <Box
+                    style={{
+                      background: `url(${image})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      height: 128,
+                      aspectRatio: '16 / 9',
+                    }}
+                  />
+                  <Flex
+                    p="2"
+                    justify="center"
+                    style={{
+                      backdropFilter: 'blur(4rem)',
+                      WebkitBackdropFilter: 'blur(4rem)',
+                    }}
+                    align="center"
+                    gap="1"
+                  >
+                    <Text>{youtuber.name}</Text>
+                    <VerifiedIcon width="1em" height="1em" />
+                  </Flex>
+                </Flex>
+              </Link>
+            );
+          })}
+
+          <Link href="discord.gg/nDt7AjGJQH" target="_blank" color="gray">
+            <Flex
+              align="center"
+              justify="center"
+              gap="2"
+              p="3"
+              direction="column"
+              height="100%"
+              style={{
+                backgroundColor: Var('color-panel-solid'),
+                borderRadius: Var('radius-3'),
+                width: '9rem',
+              }}
             >
-              <img
-                alt="Video thumbnail"
-                src={`https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`}
-                style={{
-                  aspectRatio: '16 / 9',
-                  objectFit: 'cover',
-                  height: 128,
-                  borderRadius: 8,
-                }}
-              />
-            </Link>
-          ))}
+              <PlusIcon />
+              <Text align="center">Apply to feature your video</Text>
+            </Flex>
+          </Link>
         </Flex>
       </Flex>
     </PageWrapper>

src/app/tools/tankopedia/[id]/page.tsx

@@ -80,7 +80,7 @@ export default function Page({ params }: { params: { id: string } }) {
   }, []);
 
   return (
-    <PageWrapper p="0" noMaxWidth color="purple" size={1600}>
+    <PageWrapper p="0" noMaxWidth color="purple" size={1600} gap="9">
       <HeroSection id={id} />
       <MetaSection />
       <ShotDisplaySection />

src/components/VerifiedIcon.tsx

@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+
+export function VerifiedIcon(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="m344-60-76-128-144-32 14-148-98-112 98-112-14-148 144-32 76-128 136 58 136-58 76 128 144 32-14 148 98 112-98 112 14 148-144 32-76 128-136-58-136 58Zm34-102 102-44 104 44 56-96 110-26-10-112 74-84-74-86 10-112-110-24-58-96-102 44-104-44-56 96-110 24 10 112-74 86 74 84-10 114 110 24 58 96Zm102-318Zm-42 142 226-226-56-58-170 170-86-84-56 56 142 142Z" />
+    </svg>
+  );
+}

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