feat: separator

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
@@ -12,9 +13,9 @@ export function CharacteristicsSection() {
   const wideFormat = useWideFormat(720);
 
   return (
-    <Flex justify="center" mt="4" direction={wideFormat ? 'row' : 'column'}>
-      <Flex gap="4">
-        <Flex style={{ flex: 1, maxWidth: 320 }} direction="column" gap="4">
+    <PageWrapper>
+      <Flex gap="4" style={{ width: '100%' }}>
+        <Flex style={{ flex: 1 }} direction="column" gap="4">
           <Heading>Configure</Heading>
           <Modules />
           <Equipment />
@@ -24,11 +25,11 @@ export function CharacteristicsSection() {
           <Miscellaneous />
         </Flex>
 
-        <Flex direction="column" gap="4">
+        <Flex style={{ flex: 1 }} direction="column" gap="4">
           <Heading>Characteristics</Heading>
           <Characteristics />
         </Flex>
       </Flex>
-    </Flex>
+    </PageWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -36,8 +36,13 @@ export function HeroSection() {
             flex: 1,
           }}
         >
-          <Flex gap={wideFormat ? '4' : '2'} direction="column">
-            <Heading size={wideFormat ? '9' : '8'}>{tank.name}</Heading>
+          <Flex
+            gap={wideFormat ? '4' : '2'}
+            direction="column"
+            ml="8"
+            align={wideFormat ? undefined : 'center'}
+          >
+            <Heading size="9">{tank.name}</Heading>
             <Text color="gray">
               Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
               {

src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx

@@ -0,0 +1,16 @@
+import { Heading, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { useDuel } from '../../../../../../stores/duel';
+
+export function HistoricalSection() {
+  const tank = useDuel((state) => state.protagonist!.tank);
+
+  if (!tank.description) return null;
+
+  return (
+    <PageWrapper>
+      <Heading>History of the {tank.name}</Heading>
+      <Text>{tank.description}</Text>
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx

@@ -0,0 +1,26 @@
+import { Flex, Link, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { PatreonIcon } from '../../../../../../icons/Patreon';
+
+export function TankopediaPlug() {
+  return (
+    <PageWrapper>
+      <Flex justify="center">
+        <Text>
+          Liking BlitzKit? Consider donating on{' '}
+          <Link href="https://www.patreon.com/tresabhi" target="_blank">
+            <PatreonIcon
+              style={{
+                width: '1em',
+                height: '1em',
+                transform: 'translateY(12.5%)',
+              }}
+            />{' '}
+            Patreon
+          </Link>
+          .
+        </Text>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx

@@ -0,0 +1,10 @@
+import { Separator } from '@radix-ui/themes';
+import PageWrapper from '../../../../../components/PageWrapper';
+
+export function TankopediaSeparator() {
+  return (
+    <PageWrapper>
+      <Separator mt="4" style={{ width: '100%' }} />
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -1,6 +1,6 @@
-import { PlusIcon } from '@radix-ui/react-icons';
-import { Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { Flex, Heading, Link, Separator } from '@radix-ui/themes';
 import { use } from 'react';
+import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
 import { useFullScreen } from '../../../../../hooks/useFullScreen';
 import { useDuel } from '../../../../../stores/duel';
@@ -11,54 +11,34 @@ export function Videos() {
   const awaitedVideoDefinitions = use(videoDefinitions);
   const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
 
-  if (isFullScreen) return null;
+  if (isFullScreen || videos.length === 0) return null;
 
   return (
-    <Flex direction="column" gap="4" mt="4" align="start">
-      <Heading size="6">Review videos</Heading>
+    <PageWrapper>
 
-      <Flex gap="3" wrap="wrap">
-        {videos.map((video) => (
-          <Link
-            key={video}
-            href={`https://www.youtube.com/watch?v=${video}`}
-            target="_blank"
-          >
-            <img
-              src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
-              style={{
-                aspectRatio: '16 / 9',
-                objectFit: 'cover',
-                height: 128,
-                borderRadius: 8,
-              }}
-            />
-          </Link>
-        ))}
+      <Flex direction="column" gap="4" mt="4" align="start">
+        <Heading size="6">Review videos</Heading>
 
-        <Link href="https://discord.gg/nDt7AjGJQH" target="_blank">
-          <Card
-            style={{
-              aspectRatio: '16 / 9',
-              height: 128,
-            }}
-          >
-            <Flex
-              align="center"
-              justify="center"
-              gap="1"
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
+        <Flex gap="3" wrap="wrap">
+          {videos.map((video) => (
+            <Link
+              key={video}
+              href={`https://www.youtube.com/watch?v=${video}`}
+              target="_blank"
             >
-              <Text color="purple">
-                {videos.length === 0 ? 'Suggest' : 'Suggest more'} <PlusIcon />
-              </Text>
-            </Flex>
-          </Card>
-        </Link>
+              <img
+                src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                style={{
+                  aspectRatio: '16 / 9',
+                  objectFit: 'cover',
+                  height: 128,
+                  borderRadius: 8,
+                }}
+              />
+            </Link>
+          ))}
+        </Flex>
       </Flex>
-    </Flex>
+    </PageWrapper>
   );
 }

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

@@ -3,16 +3,18 @@
 import { useEffect } from 'react';
 import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
-import { useWideFormat } from '../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
+import { HistoricalSection } from './components/Model/HistoricalSection';
+import { TankopediaPlug } from './components/Model/TankopediaPlug';
+import { TankopediaSeparator } from './components/TankopediaSeparator';
+import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
   const assigned = useDuel((state) => state.assigned);
-  const wideFormat = useWideFormat();
 
   useEffect(() => {
     assignDuelMember('both', initialId);
@@ -60,7 +62,11 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
+          <TankopediaPlug />
           <CharacteristicsSection />
+          <TankopediaSeparator />
+          <Videos />
+          <HistoricalSection />
         </>
       )}
     </PageWrapper>