feat: Add model page, closes #61

src/pages/Compute/Compute.tsx

@@ -0,0 +1,7 @@
+export const Compute = () => {
+  return (
+    <div>
+      <p>Compute models here!</p>
+    </div>
+  )
+}

src/pages/Model/Model.styled.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex: auto;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+`
+
+export const SidebarWrapper = styled.div`
+  heigth: 100%;
+  max-width: 256px;
+`

src/pages/Model/Model.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { Outlet, useParams } from 'react-router-dom'
+import { useAnalogueModels } from '../../hooks/useAnalogueModels'
+import { components } from '../../models/schema'
+import * as Styled from './Model.styled'
+
+import { ModelNameFrame } from '../../features/ModelView/ModelNameFrame/ModelNameFrame'
+import { ModelNavigationBar } from '../../features/ModelView/ModelNavigationBar/ModelNavigationBar'
+
+export type ModelType = Partial<
+  components['schemas']['GetAnalogueModelQueryResponse']['data']
+>
+
+export const Model = () => {
+  const [model, setModel] = useState<ModelType>()
+  const { id } = useParams()
+  const { fetchModel } = useAnalogueModels()
+
+  useEffect(() => {
+    async function getModel() {
+      return await fetchModel({
+        params: { path: { id: id ?? '' } },
+      }).then((response) => response?.data)
+    }
+    if (!model) {
+      getModel().then((model) => model && setModel(model as ModelType))
+    }
+  }, [id, model, fetchModel])
+
+  return (
+    <>
+      {model && <ModelNameFrame model={model} />}
+      <Styled.Wrapper>
+        <Styled.SidebarWrapper>
+          <ModelNavigationBar />
+        </Styled.SidebarWrapper>
+        <Outlet />
+      </Styled.Wrapper>
+    </>
+  )
+}

src/pages/Results/Results.tsx

@@ -0,0 +1,7 @@
+export const Results = () => {
+  return (
+    <div>
+      <p>Resukts for models here!</p>
+    </div>
+  )
+}

src/router.tsx

@@ -1,6 +1,10 @@
 import { createBrowserRouter, NonIndexRouteObject } from 'react-router-dom'
 import { App } from './App'
+import { ModelView } from './features/ModelView/ModelView'
 import { Browse } from './pages/Browse/Browse'
+import { Compute } from './pages/Compute/Compute'
+import { Model } from './pages/Model/Model'
+import { Results } from './pages/Results/Results'
 
 interface Tab extends Required<Pick<NonIndexRouteObject, 'path' | 'element'>> {
   title: string
@@ -17,12 +21,32 @@ const tabs: Tab[] = [
   { title: 'API', path: 'api', element: <NotImplemented /> },
   { title: 'About', path: 'about', element: <NotImplemented /> },
 ]
+const appRoutes = (tabs as NonIndexRouteObject[]).concat([
+  {
+    path: 'model/:id/',
+    element: <Model />,
+    children: [
+      {
+        path: 'details',
+        element: <ModelView />,
+      },
+      {
+        path: 'compute',
+        element: <Compute />,
+      },
+      {
+        path: 'results',
+        element: <Results />,
+      },
+    ],
+  },
+])
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
-    children: tabs,
+    children: appRoutes,
   },
   {
     path: '*',