Kreu paĝon
This commit is contained in:
parent
fcfcc1be12
commit
681a3dc660
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { ComponentMeta } from '@storybook/react';
|
||||
|
||||
import RolulPaĝo from "./Rolulo";
|
||||
|
||||
|
|
|
@ -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>;
|
||||
|
|
Loading…
Reference in New Issue