kemkas/kemkas-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: split page into smaller components part 3

Browse Source 
everything is nice and small now
This commit is contained in:
Balint Morasz
2023-07-27 00:08:58 +02:00
parent 9f38cff680
commit 9759b6fc81
3 changed files with 134 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FajSelector.tsx
+38 -25
View File
@@ -1,31 +1,44 @@
import React from "react";
import {Faj, FajLabel} from "../domain-models/faj";
import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
import {UseFormRegisterReturn} from "react-hook-form";
function FajSelector(props: {register: () => UseFormRegisterReturn}) {
const {register} = props
return <div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
<select className='col form-select' defaultValue={Faj.Ember} {...register()}>
<option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
<optgroup label='más emberi népek'>
<option key={Faj.Amazon} value={Faj.Amazon}>{FajLabel(Faj.Amazon)}</option>
<option key={Faj.Birodalmi} value={Faj.Birodalmi}>{FajLabel(Faj.Birodalmi)}</option>
<option key={Faj.Eszaki} value={Faj.Eszaki}>{FajLabel(Faj.Eszaki)}</option>
<option key={Faj.Etuniai} value={Faj.Etuniai}>{FajLabel(Faj.Etuniai)}</option>
<option key={Faj.Osember} value={Faj.Osember}>{FajLabel(Faj.Osember)}</option>
</optgroup>
<optgroup label='nem emberi fajok'>
<option key={Faj.Elf} value={Faj.Elf}>{FajLabel(Faj.Elf)}</option>
<option key={Faj.Felelf} value={Faj.Felelf}>{FajLabel(Faj.Felelf)}</option>
<option key={Faj.Felork} value={Faj.Felork}>{FajLabel(Faj.Felork)}</option>
<option key={Faj.Felszerzet}
value={Faj.Felszerzet}>{FajLabel(Faj.Felszerzet)}</option>
<option key={Faj.Gnom} value={Faj.Gnom}>{FajLabel(Faj.Gnom)}</option>
<option key={Faj.Torpe} value={Faj.Torpe}>{FajLabel(Faj.Torpe)}</option>
</optgroup>
</select>
</div>
function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) {
const {register, currentFaj} = props
return <>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
<select className='col form-select' defaultValue={Faj.Ember} {...register()}>
<option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
<optgroup label='más emberi népek'>
<option key={Faj.Amazon} value={Faj.Amazon}>{FajLabel(Faj.Amazon)}</option>
<option key={Faj.Birodalmi} value={Faj.Birodalmi}>{FajLabel(Faj.Birodalmi)}</option>
<option key={Faj.Eszaki} value={Faj.Eszaki}>{FajLabel(Faj.Eszaki)}</option>
<option key={Faj.Etuniai} value={Faj.Etuniai}>{FajLabel(Faj.Etuniai)}</option>
<option key={Faj.Osember} value={Faj.Osember}>{FajLabel(Faj.Osember)}</option>
</optgroup>
<optgroup label='nem emberi fajok'>
<option key={Faj.Elf} value={Faj.Elf}>{FajLabel(Faj.Elf)}</option>
<option key={Faj.Felelf} value={Faj.Felelf}>{FajLabel(Faj.Felelf)}</option>
<option key={Faj.Felork} value={Faj.Felork}>{FajLabel(Faj.Felork)}</option>
<option key={Faj.Felszerzet}
value={Faj.Felszerzet}>{FajLabel(Faj.Felszerzet)}</option>
<option key={Faj.Gnom} value={Faj.Gnom}>{FajLabel(Faj.Gnom)}</option>
<option key={Faj.Torpe} value={Faj.Torpe}>{FajLabel(Faj.Torpe)}</option>
</optgroup>
</select>
</div>
<div className='row m-2'>
<label className='col-lg-1 col-sm-2 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{FajDescription(currentFaj())}
</p>
<ul>
{FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))}
</ul>
</div>
</div>
</>
}
export default FajSelector