Kreu la Elektilon

This commit is contained in:
Savanni D'Gerinel 2022-04-02 15:12:13 -04:00
parent 4fa332af6c
commit fcfcc1be12
4 changed files with 47 additions and 15 deletions

View File

@ -0,0 +1,22 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from "@storybook/react";
import Elektilo from "./Elektilo";
export default {
title: "Elementoj/Elektilo",
component: Elektilo,
argTypes: {
aktuala: {
options: [ '', 'Adaptable', 'Articulate', 'Rugged', 'Genteel' ],
control: { type: 'radio' },
},
},
} as ComponentMeta<typeof Elektilo>;
export const ElektilRakonto: ComponentStory<typeof Elektilo> = ({ aktuala }) => <Elektilo elektoj={[
"Adaptable",
"Articulate",
"Rugged",
"Genteel",
]} aktuala={aktuala} />;

View File

@ -0,0 +1,14 @@
interface Ecoj {
elektoj: string[];
aktuala?: string;
};
const Elektilo = ({ elektoj, aktuala }: Ecoj) => <select>
<option selected={!aktuala}></option>
{elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
</select>;
const bildigu = ( ecoj: Ecoj ) => <Elektilo {...ecoj} />;
export default bildigu;

View File

@ -27,5 +27,10 @@ const fokusoj = [
"Is Always Watching", "Is Always Watching",
]; ];
export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} /> export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{
nomo: "Opal",
priaĵo: "Adaptable",
tipo: "Jack",
fokuso: "Commands a Starship",
}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />

View File

@ -1,4 +1,5 @@
import styled from "styled-components" import styled from "styled-components";
import Elektilo from "../../elementoj/Elektilo/Elektilo";
interface RolulaŜablono { interface RolulaŜablono {
nomo?: string; nomo?: string;
@ -17,21 +18,11 @@ interface FrazaKreilaEcoj {
fokusoj: string[]; fokusoj: string[];
} }
interface ElektEcoj {
elektoj: string[];
aktuala?: string;
};
const Elekto = ({ elektoj, aktuala }: ElektEcoj) => <select>
<option selected={!aktuala}></option>
{elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
</select>;
const FrazaKreilo = ( { priaĵo, priaĵoj, tipo, tipoj, fokuso, fokusoj }: FrazaKreilaEcoj) => <div> const FrazaKreilo = ( { priaĵo, priaĵoj, tipo, tipoj, fokuso, fokusoj }: FrazaKreilaEcoj) => <div>
<Elekto elektoj={priaĵoj} aktuala={priaĵo} /> <Elektilo elektoj={priaĵoj} aktuala={priaĵo} />
<Elekto elektoj={tipoj} aktuala={tipo} /> <Elektilo elektoj={tipoj} aktuala={tipo} />
who who
<Elekto elektoj={fokusoj} aktuala={fokuso} /> <Elektilo elektoj={fokusoj} aktuala={fokuso} />
</div>; </div>;
interface RolulKreilaEcoj { interface RolulKreilaEcoj {