Kreu la Elektilon
This commit is contained in:
parent
4fa332af6c
commit
fcfcc1be12
|
@ -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} />;
|
|
@ -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;
|
|
@ -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} />
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue