feat: start of embeds

src/app/tools/embed/customize/tanks/page.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Flex } from '@radix-ui/themes';
+import { Dispatch, SetStateAction, use, useState } from 'react';
+import { EmbedConfigInputs } from '../../../../../components/EmbedConfigInputs';
+import PageWrapper from '../../../../../components/PageWrapper';
+import {
+  TanksEmbedCard,
+  TanksEmbedWrapper,
+} from '../../../../../components/TanksEmbed';
+import { tanksDefinitionsArray } from '../../../../../core/blitzkit/tankDefinitions';
+import {
+  EmbedConfig,
+  EmbedConfigType,
+  ExtractEmbedConfigType,
+} from '../../types';
+import { extractEmbedConfigDefaults } from '../../utilities';
+
+const tankEmbedConfig = {
+  listWidth: { type: EmbedConfigType.Number, default: 320, unit: 'px' },
+  listGap: { type: EmbedConfigType.Size, default: '2' },
+  listMaxTanks: { type: EmbedConfigType.Number, default: 8 },
+
+  cardRadius: { type: EmbedConfigType.Radius, default: '2' },
+  cardHeaderPadding: { type: EmbedConfigType.Size, default: '2' },
+} satisfies EmbedConfig;
+
+export type TanksEmbedState = ExtractEmbedConfigType<typeof tankEmbedConfig>;
+
+export default function Page() {
+  const tanks = use(tanksDefinitionsArray);
+  const [state, setState] = useState(
+    extractEmbedConfigDefaults(tankEmbedConfig),
+  );
+
+  return (
+    <PageWrapper>
+      <Flex align="start" justify="between" gap="4">
+        <TanksEmbedWrapper state={state}>
+          {tanks.slice(0, state.listMaxTanks).map((tank) => (
+            <TanksEmbedCard key={tank.id} tank={tank} state={state} />
+          ))}
+        </TanksEmbedWrapper>
+
+        <EmbedConfigInputs
+          config={tankEmbedConfig}
+          state={state}
+          setState={
+            setState as Dispatch<
+              SetStateAction<ExtractEmbedConfigType<EmbedConfig>>
+            >
+          }
+        />
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/embed/page.tsx

@@ -0,0 +1,5 @@
+import PageWrapper from '../../../components/PageWrapper';
+
+export default function Page() {
+  return <PageWrapper></PageWrapper>;
+}

src/app/tools/embed/types.ts

@@ -0,0 +1,31 @@
+export enum EmbedConfigType {
+  Number,
+  Radius,
+  Size,
+}
+
+export type EmbedConfig = Record<string, EmbedConfigItem>;
+
+export type EmbedConfigItem =
+  | {
+      type: EmbedConfigType.Number;
+      default: number;
+      unit?: string;
+    }
+  | {
+      type: EmbedConfigType.Radius;
+      default: RadixRadius;
+    }
+  | {
+      type: EmbedConfigType.Size;
+      default: RadixSize;
+    };
+
+export type RadixRadius = `${1 | 2 | 3 | 4}` | 'full';
+export type RadixSize = `${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
+
+export type ExtractEmbedConfigType<Config extends EmbedConfig> = {
+  [Key in keyof Config]: ({
+    type: Config[Key]['type'];
+  } & EmbedConfigItem)['default'];
+};

src/app/tools/embed/utilities.ts

@@ -0,0 +1,9 @@
+import { EmbedConfig, ExtractEmbedConfigType } from './types';
+
+export function extractEmbedConfigDefaults<Config extends EmbedConfig>(
+  config: Config,
+) {
+  return Object.fromEntries(
+    Object.entries(config).map(([key, value]) => [key, value.default]),
+  ) as ExtractEmbedConfigType<Config>;
+}