Feat: Unit Description Card

components/unit-description-card.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Flex, Image, Text, Title, Tooltip } from "@mantine/core";
+
+/**
+ * These fields can be found at `sbps` inside each unit object.
+ *
+ * Most locstrings and symbol / icons are within:
+ * - `squadexts` -> `template_reference` which gives the group within the
+ *   Essence editor as `sbpextensions\\squad_ui_ext`.
+ * - The sibling `race_list` contains a list with an object `race_data/info`. In this
+ *   object the locstring values can be found.
+ *
+ * Specific paths defined per property.
+ */
+type UnitDescription = {
+  /** Locstring value. Found at `screen_name/locstring/value`. */
+  screen_name: string;
+  /** Locstring value. Found at `help_text/locstring/value`. */
+  help_text: string;
+  /** Locstring value. Found at `brief_text/locstring/value`. */
+  brief_text: string;
+  /** File path. Found at `symbol_icon_name`. */
+  symbol_icon_name: string;
+  /** File path. Found at `icon_name`. */
+  icon_name: string;
+};
+
+export const UnitDescriptionCard = (desc: UnitDescription) => (
+  <>
+    <Flex direction="row" align="center" gap={16}>
+      <Image
+        width={96}
+        height={96}
+        fit="contain"
+        src={`/icons/${desc.icon_name}.png`}
+        alt={desc.screen_name}
+      />
+      <Flex direction="column" gap={4}>
+        <Title order={6} transform="capitalize" color="yellow.4">
+          {desc.help_text}
+        </Title>
+        <Tooltip label={desc.screen_name}>
+          <Title order={4} transform="capitalize" lineClamp={1} color="dimmed">
+            {desc.screen_name}
+          </Title>
+        </Tooltip>
+        {/* Symbol horizontal aligned with brief text. */}
+        <Flex direction="row" align="center" gap={4}>
+          <Image
+            width={32}
+            height={32}
+            fit="contain"
+            src={`/icons/${desc.symbol_icon_name}.png`}
+            alt={`${desc.screen_name} symbol`}
+          />
+          <Tooltip label={desc.brief_text}>
+            <Text fz="xs" fw={700} lineClamp={2} color="dimmed">
+              {desc.brief_text}
+            </Text>
+          </Tooltip>
+        </Flex>
+      </Flex>
+    </Flex>
+  </>
+);

pages/unit-example.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { Container, Title, Text, Grid, Flex, Tooltip, Card } from "@mantine/core";
+import { Container, Title, Text, Grid, Flex, Tooltip, Card, SimpleGrid } from "@mantine/core";
 import { StatsCosts } from "../components/cost-card";
 import { StatsVehicleArmor } from "../components/vehicle-armor-card";
+import { UnitDescriptionCard } from "../components/unit-description-card";
 
 /**
  * This is example page you can find it by going on ur /unit-example
@@ -15,7 +16,30 @@ const UnitExample = () => {
       </Title>
       <Grid columns={3} gutter="md">
         <Grid.Col span={3} sm={2}>
-          <Text w={700}>Side Example description and components goes here!</Text>
+          <SimpleGrid cols={2}>
+            <Card bg="dark" p="lg" radius="md" withBorder>
+              <Flex h="100%">
+                <UnitDescriptionCard
+                  screen_name="L6/40 Light Tank"
+                  brief_text="Light tank armed with a 20mm autocannon."
+                  help_text="Anti-infantry"
+                  icon_name="races\\afrika_corps\\vehicles\\l6_40_ak"
+                  symbol_icon_name="races\\afrika_corps\\symbols\\l6_40_ak"
+                ></UnitDescriptionCard>
+              </Flex>
+            </Card>
+            <Card bg="dark" p="lg" radius="md" withBorder>
+              <Flex h="100%">
+                <UnitDescriptionCard
+                  screen_name="Carro Armato M13/40 Light Tank"
+                  brief_text="Light tank armed with a 47mm gun and three Breda 38 machine guns."
+                  help_text="Anti-infantry / Anti-vehicle"
+                  icon_name="races\\afrika_corps\\vehicles\\m13_40_ak"
+                  symbol_icon_name="races\\german\\symbols\\m13_40_ger"
+                ></UnitDescriptionCard>
+              </Flex>
+            </Card>
+          </SimpleGrid>
         </Grid.Col>
         <Grid.Col span={3} sm={1}>
           <Flex gap="md" direction="column">