feat: initial commit

app/routes/base_layout.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {CloudServerOutlined, DashboardOutlined, GlobalOutlined, HomeOutlined} from '@ant-design/icons';
+import {Layout, Menu} from 'antd';
+import {Outlet, useNavigate} from "react-router";
+
+
+const {Content, Footer, Sider} = Layout;
+
+const items = [{
+    key: "home", icon: React.createElement(HomeOutlined), label: "Home", "data-navigate": "/",
+}, {
+    key: "proxy", icon: React.createElement(CloudServerOutlined), label: "Smart Proxy", children: [{
+        key: "proxy/overview",
+        icon: React.createElement(DashboardOutlined),
+        label: "Overview",
+        "data-navigate": "/proxy",
+    }, {
+        key: "proxy/origins",
+        icon: React.createElement(GlobalOutlined),
+        label: "Web Origins",
+        "data-navigate": "/proxy/origins",
+    }]
+}];
+
+export default function BaseLayout() {
+    const navigate = useNavigate();
+    // @ts-ignore TODO
+    const addOnClick = (items) => {
+        // @ts-ignore TODO
+        return items.map((item) => {
+            return item ? {
+                ...item,
+                children: item.children ? addOnClick(item.children) : null,
+                onClick: item["data-navigate"] ? () => {
+                    navigate(item["data-navigate"]);
+                } : undefined
+            } : null;
+        })
+    };
+    const menuItems = addOnClick(items);
+    return (<Layout>
+            <Sider
+                breakpoint="lg"
+                collapsedWidth="0"
+                onBreakpoint={(broken) => {
+                    console.log(broken);
+                }}
+                onCollapse={(collapsed, type) => {
+                    console.log(collapsed, type);
+                }}
+                style={{height: "100vh"}}
+            >
+                <h1 className="logo" onClick={() => navigate("/")}>
+                    <img src="https://jasima.app/img/logo.png" alt=""/>
+                    jasima.app
+                </h1>
+                <Menu theme="dark" mode="inline" defaultSelectedKeys={['a']} items={menuItems}/>
+            </Sider>
+            <Layout>
+                <Content style={{margin: '24px 16px 0'}}>
+                    <div
+                        style={{
+                            padding: 24, minHeight: 360, background: "white",
+                        }}
+                    >
+                        <Outlet/>
+                    </div>
+                </Content>
+                <Footer style={{textAlign: 'center'}}>
+                    Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
+                </Footer>
+            </Layout>
+        </Layout>)
+}

app/routes/home.tsx

@@ -0,0 +1,7 @@
+import {Typography} from "antd";
+
+const {Paragraph} = Typography;
+
+export default function Home() {
+    return <Paragraph>hi</Paragraph>;
+}

app/routes/proxy.tsx

@@ -0,0 +1,21 @@
+import type { Route } from "../+types/root";
+import {CloudServerOutlined} from "@ant-design/icons";
+import {Breadcrumb, Typography} from "antd";
+import {Outlet} from "react-router";
+
+const { Title } = Typography;
+
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Smart Proxy Administration" },
+        { name: "description", content: "Hi!" },
+    ];
+}
+
+export default function Proxy() {
+    return <>
+        <Title><CloudServerOutlined /> Smart Proxy</Title>
+        <Breadcrumb items={[{title: "Smart Proxy", href: "/proxy"}]} />
+        <Outlet />
+    </>;
+}

app/routes/proxy/origins.tsx

@@ -0,0 +1,4 @@
+
+export default function Origins() {
+    return "hello origins";
+}

app/routes/proxy/overview.tsx

@@ -0,0 +1,7 @@
+import {Typography} from "antd";
+
+const {Paragraph} = Typography;
+
+export default function Overview() {
+    return <Paragraph>hi</Paragraph>;
+}