Kreu paĝon

kliento/src/paĝoj/Paĝo/Paĝo.stories.tsx

@@ -0,0 +1,98 @@
+import { ComponentMeta } from '@storybook/react';
+
+import RolulKreilo from "../RolulKreilo/RolulKreilo";
+import RolulPaĝo from "../Rolulo/Rolulo";
+import Paĝo from './Paĝo';
+
+export default {
+  title: 'Paĝoj/Paĝo',
+  component: Paĝo,
+} as ComponentMeta<typeof Paĝo>;
+
+const priaĵoj = [
+  "Adaptable",
+  "Articulate",
+  "Genteel",
+];
+
+const tipoj = [
+  "Glaive",
+  "Jack",
+  "Nano",
+];
+
+const fokusoj = [
+  "Commands a Starship",
+  "Builds Machines",
+  "Guards the Gate",
+  "Is Always Watching",
+  "Speaks with a Silver Tongue",
+];
+
+const opal = {
+  nomo: "Opal",
+  frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
+  priaĵo: "Adaptable",
+  tipo: "Jack",
+  fokuso: "Speaks with a Silver Tongue",
+  ecGrupoj: [
+    {
+      eco: "Forto",
+      aktuala: 11,
+      maksimuma: 11,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Rapideco",
+      aktuala: 12,
+      maksimuma: 12,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Intelekto",
+      aktuala: 13,
+      maksimuma: 13,
+      avantaĝo: 1
+    }
+  ],
+  kapabloj: [
+    { nomo: "Versatile" },
+    { nomo: "Flex Skill" },
+    { nomo: "Face Morph", kosto: "2+" },
+    { nomo: "Link Senses", kosto: "2" },
+  ],
+  lertecoj: [
+    { nomo: "Perception", nivelo: "Trained", },
+    { nomo: "Resilient", nivelo: "Trained", },
+    { nomo: "Social Interactions", nivelo: "Trained", },
+    { nomo: "Pleasant social interactions", nivelo: "Specialized", },
+    { nomo: "Crafting, Understanding Numenera", nivelo: "Inability", },
+  ],
+  sekvaResaniĝo: "unu ago",
+};
+
+const flankMenuo = [
+  "Opal",
+  "Dorian",
+  "Devan",
+  "Jacine",
+  "Janys",
+];
+
+const topMenuo = [
+  "Elsalutu",
+  "Agordoj",
+];
+
+export const RolulKreilPaĝRakonto = () => (
+  <Paĝo flankMenuo={flankMenuo} topMenuo={topMenuo}>
+    <RolulKreilo rolulo={opal} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
+  </Paĝo>);
+
+export const RulolPaĝRakonto = () => (
+  <Paĝo flankMenuo={flankMenuo} topMenuo={topMenuo}>
+  <RolulPaĝo rolulo={opal} />
+  </Paĝo>
+);
+
+

kliento/src/paĝoj/Paĝo/Paĝo.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+import styled from "styled-components"
+
+interface Ecoj {
+  flankMenuo: string[];
+  topMenuo: string[];
+  children: ReactNode;
+}
+
+const FlankPanelo = styled.div`
+  grid-column: 1;
+  grid-row: 2;
+`
+
+const TopListo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+`
+
+const TopPanelo = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 2px solid #c0a0b7;
+  grid-column: 1 / span 2;
+  padding: 10px;
+`
+
+const PrecipaPanelo = styled.div`
+  grid-row-start: 2;
+  grid-column-start: 2;
+`
+
+const Ujo = styled.div`
+  height: 100%;
+  background-color: #fcd7b7;
+  color: #552511;
+
+  display: grid;
+  grid-template-columns: 150px auto;
+  grid-template-rows: 40px auto;
+`;
+
+const bildigu = ({ flankMenuo, topMenuo, children }: Ecoj) => <Ujo>
+  <FlankPanelo>
+    {flankMenuo.map((ejo) => <div>{ejo}</div>)}
+  </FlankPanelo>
+  <TopPanelo>
+    <TopListo>
+      {topMenuo.map((ejo) => <div>{ejo}</div>)}
+    </TopListo>
+  </TopPanelo>
+  <PrecipaPanelo>
+    {children}
+  </PrecipaPanelo>
+</Ujo>;
+
+export default bildigu;
+

kliento/src/paĝoj/RolulKreilo/RolulKreilo.tsx

@@ -45,8 +45,6 @@ const RolulKreilo = ( { rolulo, priaĵoj, tipoj, fokusoj }: RolulKreilaEcoj ) =>
 </>;
 
 const Ujo = styled.div`
-    background-color: #fcd7b7;
-    color: #552511;
     `;
 
 const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;

kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 
 import RolulPaĝo from "./Rolulo";
 

kliento/src/paĝoj/Rolulo/Rolulo.tsx

@@ -43,8 +43,6 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
   </>;
 
 const Ujo = styled.div`
-  background-color: #fcd7b7;
-  color: #552511;
 `;
 
 const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;