feat: display videos

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 />