Konstrui tipografion

This commit is contained in:
Savanni D'Gerinel 2022-04-04 19:52:21 -04:00
parent 681a3dc660
commit 56e0d83834
7 changed files with 84 additions and 20 deletions

View File

@ -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>

View File

@ -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>
);

View File

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

View File

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

View File

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

View File

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

View File

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