diff --git a/kliento/src/elementoj/Tipografio/Tipografio.stories.tsx b/kliento/src/elementoj/Tipografio/Tipografio.stories.tsx
new file mode 100644
index 0000000..6916f64
--- /dev/null
+++ b/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 = () =>
+
+
Opal Harris
+
An Adaptable Jack who Speaks with a Silver Tongue
+
+ This is the descriptor of a focus or some such
+
+
+ A link
+
+
+
diff --git a/kliento/src/elementoj/Tipografio/Tipografio.tsx b/kliento/src/elementoj/Tipografio/Tipografio.tsx
new file mode 100644
index 0000000..8f8bc39
--- /dev/null
+++ b/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) => {children};
+
+interface SubtitolaEcoj { children: ReactNode };
+const SubtitolaStilo = styles.h2`
+ font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Subtitolo = ({ children }: SubtitolaEcoj) => {children};
+
+interface TekstaEcoj { children: ReactNode };
+const TekstaStilo = styles.span`
+ font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Teksto = ({ children }: TekstaEcoj) => {children};
+
+interface LigilaEcoj { destino: string, children: ReactNode };
+const LigilaStilo = styles.span`
+ font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Ligilo = ({ destino, children }: LigilaEcoj) => (
+ {children}
+);
+
+
diff --git a/kliento/src/paĝoj/Paĝo/Paĝo.stories.tsx b/kliento/src/paĝoj/Paĝo/Paĝo.stories.tsx
index f25ea58..5bd407d 100644
--- a/kliento/src/paĝoj/Paĝo/Paĝo.stories.tsx
+++ b/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",
diff --git a/kliento/src/paĝoj/Paĝo/Paĝo.tsx b/kliento/src/paĝoj/Paĝo/Paĝo.tsx
index 7c412ad..e7d5662 100644
--- a/kliento/src/paĝoj/Paĝo/Paĝo.tsx
+++ b/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) =>
- {flankMenuo.map((ejo) => {ejo}
)}
+ {flankMenuo.map((ejo) => {ejo}
)}
- {topMenuo.map((ejo) => {ejo}
)}
+ {topMenuo.map((ejo) => {ejo})}
diff --git a/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx b/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx
index 016f64f..9ed703b 100644
--- a/kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx
+++ b/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: [
{
diff --git a/kliento/src/paĝoj/Rolulo/Rolulo.tsx b/kliento/src/paĝoj/Rolulo/Rolulo.tsx
index 1be1a02..af81165 100644
--- a/kliento/src/paĝoj/Rolulo/Rolulo.tsx
+++ b/kliento/src/paĝoj/Rolulo/Rolulo.tsx
@@ -1,37 +1,45 @@
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 ) =>
- {eco} |
- {aktuala} |
- {maksimuma} |
- {avantaĝo} |
+ {eco} |
+ {aktuala} |
+ {maksimuma} |
+ {avantaĝo} |
;
const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
- {nomo} {kosto && ({kosto})}
+ {nomo} {kosto && ({kosto})}
>;
const LertecaElemento = ( { nomo, nivelo }: Lerteco ) =>
- {nomo} |
- {nivelo} |
+ {nomo} |
+ {nivelo} |
;
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) =>
<>
- {nomo}
- {frazo}
-
- {ecGrupoj.map((eco) => )}
-
-
-
Sekva Resaniĝo: {sekvaResaniĝo}
-
-
+ {nomo} ({nivelo})
+ {frazo}
+
+
+ {ecGrupoj.map((eco) => )}
+
+
+
Sekva Resaniĝo: {sekvaResaniĝo}
+
+
+
{kapabloj.map((kapablo) => )}
diff --git a/kliento/src/tipoj.ts b/kliento/src/tipoj.ts
index ef9b876..86075fd 100644
--- a/kliento/src/tipoj.ts
+++ b/kliento/src/tipoj.ts
@@ -17,6 +17,7 @@ export interface Kapablo {
export interface Rolulo {
nomo: string;
+ nivelo: string;
frazo: string;
ecGrupoj: EcGrupo[];
kapabloj: Kapablo[];