feat: add character sheet page (#774)

Signed-off-by: hxtree <[email protected]>

clients/admin-client/src/components/ArchetypeSelect.tsx

@@ -11,8 +11,6 @@ import {
   CodeSnippetLanguages
 } from '@cats-cradle/design-system/dist/main';
 
-// ... (imports remain the same)
-
 export default function ArchetypeSelect() {
   const [archetypes, setArchetypes] = useState<string[]>([]);
   const [archetypeId, setArchetypeId] = useState<string>("");

clients/admin-client/src/components/Header.tsx

@@ -18,7 +18,8 @@ const Header = () => {
   const menuItems: NavMenuItem[] = [
     {link: '/', title: 'Home'},
     {link: '/dice-analyzer', title: 'Dice analyzer'},
-    {link: '/archetypes', title: 'Archetypes'}
+    {link: '/archetypes', title: 'Archetypes'},
+    {link: '/character-sheets', title: 'Character Sheets'}
   ];
 
   return (

clients/admin-client/src/pages/archetypes.page.tsx

@@ -1,19 +1,13 @@
-import { Container } from '@cats-cradle/design-system/dist/main';
 import ArchetypeSelect from '../components/ArchetypeSelect';
 
 export default function ArchetypePage() {
   return (
-    <>
-     <main>
-       <div>
-        <Container>
-          <h1>Archetypes</h1>
-          <p>
-          Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.</p>
-          <ArchetypeSelect />
-        </Container>
-       </div>
+    <main className="container">
+      <h1>Archetypes</h1>
+      <p>
+        Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
+      </p>
+      <ArchetypeSelect />
     </main>
-    </>
   );
 }

clients/admin-client/src/pages/character-sheets.page.tsx

@@ -1,14 +1,7 @@
-import styles from '../src/app/page.module.css';
-import { Container } from '@cats-cradle/design-system/dist/main';
-
-export default function CharacterSheetPage() {
+export default function CharacterSheetsPage() {
   return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <Container>
-          <h1>Character Sheets</h1>
-        </Container>
-      </div>
+    <main className="container">
+      <h1>Character Sheets</h1>
     </main>
   );
 }

clients/admin-client/src/pages/dice.page.tsx

@@ -1,20 +1,15 @@
-import { Container } from '@cats-cradle/design-system/dist/main';
 import { DiceAnalyzer } from '../components/DiceAnalyzer';
 
 export default function DicePage() {
   return (
-    <main>
-      <div>
-        <Container>
-          <h1>Dice Notation Analyzer</h1>
-          <p>
-            Determine the appropriate dice notation for skill set rolls and
-            visualizes the impact of luck. Gain valuable insights into
-            chance&apos;s influence on game play outcomes.
-          </p>
-          <DiceAnalyzer />
-        </Container>
-      </div>
+    <main className="container">
+      <h1>Dice Notation Analyzer</h1>
+      <p>
+        Determine the appropriate dice notation for skill set rolls and
+        visualizes the impact of luck. Gain valuable insights into
+        chance&apos;s influence on game play outcomes.
+      </p>
+      <DiceAnalyzer />
     </main>
   );
 }

clients/admin-client/src/pages/home.page.tsx

@@ -1,15 +1,7 @@
-import { Container } from '@cats-cradle/design-system/dist/main';
-
 export default function HomePage() {
   return (
-    <>
-     <main>
-       <div>
-        <Container>
-          <h1>Game Master Portal</h1>
-        </Container>
-       </div>
+    <main className="container">
+      <h1>Game Master Portal</h1>
     </main>
-    </>
   );
 }

clients/admin-client/src/routing/Router.tsx

@@ -3,13 +3,15 @@ import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider }
 import Header from "../components/Header";
 import DicePage from "../pages/dice.page";
 import ArchetypesPage from "../pages/archetypes.page";
+import CharacterSheetsPage from '../pages/character-sheets.page';
 import HomePage from '../pages/home.page';
 
 export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Header />}>
       <Route index element={<HomePage />} />
       <Route path="dice-analyzer" element={<DicePage />} />
+      <Route path="character-sheets" element={<CharacterSheetsPage />} />
       <Route path="archetypes" element={<ArchetypesPage />} />
     </Route>
   )