Initial commit

src/pages/Spectrum.jsx

@@ -0,0 +1,66 @@
+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;