add Polar route

Author: dagda1

apps/website/src/components/Nav/VizPopover.tsx

@@ -12,6 +12,7 @@ const Links: { to: `/${string}`; children: ReactNode }[] = [
   { to: '/viz/function-plot', children: 'FUNCTIONS' },
   { to: '/viz/sine2', children: 'MORE SINE' },
   { to: '/viz/tan', children: 'TAN' },
+  { to: '/viz/polar', children: 'POLAR' },
 ];
 
 interface VizPopoverProps {

apps/website/src/components/Polar/Polar.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  flex: 1,
+});

apps/website/src/components/Polar/Polar.tsx

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+
+import { ApplicationLayout } from '~/layouts/ApplicationLayout';
+
+import * as styles from './Polar.css';
+
+export function Polar(): JSX.Element {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <ApplicationLayout heading="Polar">
+      <section ref={containerRef} className={styles.container}>
+        <h1>Polar</h1>
+      </section>
+    </ApplicationLayout>
+  );
+}
+
+export default Polar;

apps/website/src/pages/Viz/Viz.tsx

@@ -10,6 +10,7 @@ const FunctionPlot = lazy(() => import('~/components/FunctionPlot/FunctionPlot')
 const Sine2 = lazy(() => import('~/components/BigSine/Sine2'));
 const Tan = lazy(() => import('~/components/Tan/Tan'));
 const Sinusoidal = lazy(() => import('~/components/Sinusoidal/Sinusoidal'));
+const Polar = lazy(() => import('~/components/Polar/Polar'));
 
 export function Viz(): JSX.Element {
   return (
@@ -55,6 +56,14 @@ export function Viz(): JSX.Element {
             </Suspense>
           }
         />
+        <Route
+          path={Urls.Polar}
+          element={
+            <Suspense fallback={<Fallback />}>
+              <Polar />
+            </Suspense>
+          }
+        />
       </Routes>
     </MathJaxProvider>
   );

apps/website/src/urls.ts

@@ -11,3 +11,4 @@ export const FunctionPlot = '/function-plot';
 export const Sine2 = '/sine2';
 export const Tan = '/tan';
 export const Sinusoidal = '/sinusoidal';
+export const Polar = '/polar';