Building the First Content Components

Unit Info Tab

The first major piece of our UI will allow displaying and editing the details for whatever fictional Battletech combat group we’ve created. That includes things like what the name of the group is, what faction they work for, and so on.

Per the mockup shown earlier, the Unit Info tab is a basic form with a few fields. We’ll just add the “Name” and “Affiliation” fields for now, and deal with the other fields another time.

Filling out the <UnitInfo> component is pretty straightforward:

Commit 4bc7287: Add initial form layout for UnitInfo

features/unitInfo/UnitInfo.jsx

import React from "react";
import {Form, Dropdown, Segment} from "semantic-ui-react";

const FACTIONS = [
    {value : "cc", text : "Capellan Confederation"},
    {value : "dc", text : "Draconis Combine"},
    {value : "fs", text : "Federated Suns"},
    {value : "fwl", text : "Free Worlds League"},
    {value : "lc", text : "Lyran Commonwealth"},
];

const UnitInfo = () => (
    <Segment attached="bottom">
        <Form size="large">
            <Form.Field name="name" width={6} >
                <label>Unit Name</label>
                <input placeholder="Name" />
            </Form.Field>
            <Form.Field name="affiliation" width={6}>
                <label>Affiliation</label>
                <Dropdown
                    selection
                    options={FACTIONS}
                />
            </Form.Field>
        </Form>
    </Segment>
);

export default UnitInfo;

And now we finally have something slightly more visible to show off: