Konstrui tipografion

kliento/src/elementoj/Tipografio/Tipografio.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentMeta } from '@storybook/react';
+
+import { Ligilo, Subtitolo, Teksto, Titolo } from "./Tipografio";
+
+export default {
+  title: 'Elementoj/Tipografioj',
+}
+
+export const TipogafiaRakontoj = () =>
+  <div>
+    <Titolo>Opal Harris</Titolo>
+    <Subtitolo>An Adaptable Jack who Speaks with a Silver Tongue</Subtitolo>
+    <div>
+      <Teksto>This is the descriptor of a focus or some such</Teksto>
+    </div>
+    <div>
+      <Ligilo destino="localhost">A link</Ligilo>
+    </div>
+  </div>
+

kliento/src/elementoj/Tipografio/Tipografio.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import styles from 'styled-components';
+
+interface TitolaEcoj { children: ReactNode };
+const TitolaStilo = styles.h1`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+  font-size: 24px;
+`;
+export const Titolo = ({ children }: TitolaEcoj) => <TitolaStilo>{children}</TitolaStilo>;
+
+interface SubtitolaEcoj { children: ReactNode };
+const SubtitolaStilo = styles.h2`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Subtitolo = ({ children }: SubtitolaEcoj) => <SubtitolaStilo>{children}</SubtitolaStilo>;
+
+interface TekstaEcoj { children: ReactNode };
+const TekstaStilo = styles.span`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Teksto = ({ children }: TekstaEcoj) => <TekstaStilo>{children}</TekstaStilo>;
+
+interface LigilaEcoj { destino: string, children: ReactNode };
+const LigilaStilo = styles.span`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Ligilo = ({ destino, children }: LigilaEcoj) => (
+  <a href={destino}><LigilaStilo>{children}</LigilaStilo></a>
+);
+
+

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

@@ -31,6 +31,7 @@ const fokusoj = [
 
 const opal = {
   nomo: "Opal",
+  nivelo: "Tier 1",
   frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
   priaĵo: "Adaptable",
   tipo: "Jack",

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

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
-import styled from "styled-components"
+import styled from "styled-components";
+import { Teksto } from "../../elementoj/Tipografio/Tipografio";
 
 interface Ecoj {
   flankMenuo: string[];
@@ -39,15 +40,16 @@ const Ujo = styled.div`
   display: grid;
   grid-template-columns: 150px auto;
   grid-template-rows: 40px auto;
+  font-family: sans-serif;
 `;
 
 const bildigu = ({ flankMenuo, topMenuo, children }: Ecoj) => <Ujo>
   <FlankPanelo>
-    {flankMenuo.map((ejo) => <div>{ejo}</div>)}
+    {flankMenuo.map((ejo) => <div><Teksto>{ejo}</Teksto></div>)}
   </FlankPanelo>
   <TopPanelo>
     <TopListo>
-      {topMenuo.map((ejo) => <div>{ejo}</div>)}
+      {topMenuo.map((ejo) => <Teksto>{ejo}</Teksto>)}
     </TopListo>
   </TopPanelo>
   <PrecipaPanelo>

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

@@ -10,6 +10,7 @@ export default {
 
 const opal = {
   nomo: "Opal",
+  nivelo: "(Tier 1)",
   frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
   ecGrupoj: [
     {

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

@@ -1,30 +1,37 @@
 import styled from "styled-components"
 import { EcGrupo, Lerteco, Kapablo, Rolulo } from "../../tipoj";
+import { Titolo, Subtitolo, Teksto } from "../../elementoj/Tipografio/Tipografio";
 
 const EcGrupElemento = ( { eco, aktuala, maksimuma, avantaĝo }: EcGrupo ) => <tr>
-  <th key={eco}> {eco} </th>
-  <td> {aktuala} <button>+</button> <button>-</button> </td>
-  <td> {maksimuma} </td>
-  <td> {avantaĝo} </td>
+  <th key={eco}> <Teksto>{eco}</Teksto> </th>
+  <td> <Teksto>{aktuala}</Teksto> <button>+</button> <button>-</button> </td>
+  <td> <Teksto>{maksimuma}</Teksto> </td>
+  <td> <Teksto>{avantaĝo}</Teksto> </td>
 </tr>;
 
 const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
-  <dt key={nomo}> {nomo} {kosto && <span>({kosto})</span>} </dt>
+  <dt key={nomo}> <Teksto>{nomo} {kosto && <span>({kosto})</span>}</Teksto> </dt>
 </>;
 
 const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
-  <th key={nomo}> {nomo} </th>
-  <td> {nivelo} </td>
+  <th key={nomo}> <Teksto>{nomo}</Teksto> </th>
+  <td> <Teksto>{nivelo}</Teksto> </td>
 </tr>;
 
 interface RolulEcoj {
   rolulo: Rolulo;
 }
 
-const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
+const Vico = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+
+const RolulPaĝo = ({ rolulo: { nomo, nivelo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
   <>
-    <h1> {nomo} </h1>
-    <h2> {frazo} </h2>
+    <Titolo>{nomo} ({nivelo})</Titolo>
+    <Subtitolo>{frazo}</Subtitolo>
+    <Vico>
       <table>
         {ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
       </table>
@@ -32,6 +39,7 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
         <div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
         <div> <button> Resaniĝu </button> </div>
       </div>
+    </Vico>
     <dl>
       {kapabloj.map((kapablo) => <KapablaElemento {...kapablo} />)}
     </dl>

kliento/src/tipoj.ts

@@ -17,6 +17,7 @@ export interface Kapablo {
 
 export interface Rolulo {
   nomo: string;
+  nivelo: string;
   frazo: string;
   ecGrupoj: EcGrupo[];
   kapabloj: Kapablo[];