Kreu paĝon

This commit is contained in:
Savanni D'Gerinel 2022-04-02 21:52:53 -04:00
parent fcfcc1be12
commit 681a3dc660
5 changed files with 158 additions and 5 deletions

View File

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

View File

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

View File

@ -45,8 +45,6 @@ const RolulKreilo = ( { rolulo, priaĵoj, tipoj, fokusoj }: RolulKreilaEcoj ) =>
</>; </>;
const Ujo = styled.div` const Ujo = styled.div`
background-color: #fcd7b7;
color: #552511;
`; `;
const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>; const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react'; import { ComponentMeta } from '@storybook/react';
import RolulPaĝo from "./Rolulo"; import RolulPaĝo from "./Rolulo";

View File

@ -43,8 +43,6 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
</>; </>;
const Ujo = styled.div` const Ujo = styled.div`
background-color: #fcd7b7;
color: #552511;
`; `;
const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>; const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;