Konstrui tipografion
This commit is contained in:
parent
681a3dc660
commit
56e0d83834
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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: [
|
||||||
{
|
{
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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[];
|
||||||
|
|
Loading…
Reference in New Issue