66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import { Button, Card, Form, Input, Layout, Radio, theme } from "antd";
|
|
import { useState } from "react";
|
|
|
|
const { Content, Sider } = Layout;
|
|
|
|
const Spectrum = () => {
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
|
|
const [form] = Form.useForm();
|
|
const [mode, setMode] = useState('Angle');
|
|
|
|
const initialValues = {
|
|
mode: "Angle",
|
|
};
|
|
|
|
const onFormChange = ({ mode }) => {
|
|
setMode(mode);
|
|
};
|
|
|
|
const angleForm = (
|
|
<Form
|
|
form={form}
|
|
onValuesChange={onFormChange}
|
|
initialValues={initialValues}
|
|
layout="horizontal"
|
|
size="small"
|
|
>
|
|
<Form.Item label="Mode" name="mode">
|
|
<Radio.Group value={mode}>
|
|
<Radio.Button value="Angle">Angle</Radio.Button>
|
|
<Radio.Button value="Wavelength">Wavelength</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={`Target ${mode} (${mode == "Angle" ? '°' : 'Å'})`}>
|
|
<Input placeholder="30.127" />
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
|
|
return (
|
|
<Layout style={{ height: 500 }}>
|
|
<Content>
|
|
<h2>kk eae men</h2>
|
|
</Content>
|
|
|
|
<Sider width={300} style={{ background: colorBgContainer }}>
|
|
<Card
|
|
title="Motor control"
|
|
size="small"
|
|
actions={[
|
|
<Button type="primary" key='sendAngle' size="small" ghost>
|
|
Send
|
|
</Button>
|
|
]}
|
|
>
|
|
{angleForm}
|
|
</Card>
|
|
</Sider>
|
|
</Layout>
|
|
)
|
|
};
|
|
|
|
export default Spectrum; |