feat: initial commit

frontend/src/App.tsx

@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {CloudServerOutlined, UnorderedListOutlined} from '@ant-design/icons';
+import {Breadcrumb, Layout, Menu, type MenuProps, theme, Typography} from 'antd';
+
+import "./App.css";
+import ApiKeyButton from "./ApiKeyButton.tsx";
+import TofuInstanceList from "./TofuInstanceList.tsx";
+import {Navigate, Route, Routes, useNavigate} from "react-router";
+import TofuInstanceDetail from "./TofuInstanceDetail.tsx";
+
+const {Header, Content, Footer, Sider} = Layout;
+const {Title, Paragraph} = Typography;
+
+const App: React.FC = () => {
+    const {
+        token: {colorBgContainer, borderRadiusLG},
+    } = theme.useToken();
+
+    const [apiKey, setApiKey] = useState<string | undefined>(undefined);
+    const [breadcrumb, setBreadcrumb] = useState();
+    const navigate = useNavigate();
+
+    const sideMenu: MenuProps['items'] = [{
+        key: 'tofu',
+        label: 'OpenTofu',
+        icon: React.createElement(CloudServerOutlined),
+        children: [
+            {
+                key: 'instances',
+                label: 'Instances',
+                icon: React.createElement(UnorderedListOutlined),
+                onClick: () => {
+                    navigate("/tofu/instances/")
+                }
+            }
+        ]
+    }]
+
+    return (
+        <Layout>
+            <Header style={{display: 'flex', alignItems: 'center'}}>
+                <div className="demo-logo"/>
+                <ApiKeyButton apiKey={apiKey} setApiKey={setApiKey}/>
+            </Header>
+            <div style={{padding: '0 48px'}}>
+                {apiKey && <Breadcrumb
+                    style={{margin: '16px 0'}}
+                    items={breadcrumb}
+                />}
+                <Layout
+                    style={{padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG}}
+                >
+                    {apiKey && <Sider style={{background: colorBgContainer}} width={200}>
+                        <Menu
+                            mode="inline"
+                            defaultSelectedKeys={['instances']}
+                            defaultOpenKeys={['tofu']}
+                            style={{height: '100%'}}
+                            items={sideMenu}
+                        />
+                    </Sider>}
+                    <Content style={{padding: '0 24px', minHeight: 280}}>
+                        {(apiKey && <Routes>
+                            <Route index element={<Navigate to="/tofu/instances"/>}/>
+                            <Route path="/tofu" element={<Navigate to="/tofu/instances"/>}/>
+                            <Route path="/tofu/instances"
+                                   element={<TofuInstanceList apiKey={apiKey} setBreadcrumb={setBreadcrumb}/>}/>
+                            <Route path="/tofu/instances/:instanceId"
+                                   element={<TofuInstanceDetail apiKey={apiKey} setBreadcrumb={setBreadcrumb}/>}/>
+                        </Routes>) || <>
+                            <Title>API Key Required</Title>
+                            <Paragraph>Use the button above to enter your API key.</Paragraph>
+                        </>}
+                    </Content>
+                </Layout>
+            </div>
+            <Footer style={{textAlign: 'center'}}>
+                Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
+            </Footer>
+        </Layout>
+    );
+};
+
+export default App;