Sectioned layout for project submission & view submitted project (#339)

frontend/src/layouts/types.ts

@@ -1,4 +1,8 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+
+export interface LayoutProps {
+    children?: ReactNode;
+}
 
 export type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type Width =

frontend/src/pages/index.tsx

@@ -4,9 +4,10 @@ import {
     FileUpload,
     Button,
     Dropdown,
-    AnchorLinks,
+    AnchorLinkItem,
 } from '@components';
-import { PageLayout, Section } from '@layouts';
+import { Section } from '@layouts';
+import { SectionedLayout as SectionedTemplate } from '@/templates';
 import { createFileRoute } from '@tanstack/react-router';
 
 // sample industries data
@@ -19,13 +20,24 @@ const industries = [
     { id: 6, label: 'Retail', value: 'retail' },
 ];
 
+const links: AnchorLinkItem[] = [
+    {
+        label: 'dropdown',
+        target: '#dropdown',
+    },
+    {
+        label: 'buttons',
+        target: '#buttons',
+    },
+];
+
 const Landing: React.FC = () => {
     const [selectedIndustry, setSelectedIndustry] = useState<
         (typeof industries)[0] | null
     >(null);
 
     return (
-        <PageLayout>
+        <SectionedTemplate asideTitle="Landing Page" links={links}>
             <Section width="narrow" padding="normal">
                 <h1 className="text-3xl font-bold mb-8">Landing</h1>
 
@@ -56,39 +68,8 @@ const Landing: React.FC = () => {
                         <Button liquid>Liquid</Button>
                     </div>
                 </div>
-
-                <div className="fixed top-2 left-10">
-                    <AnchorLinks
-                        onClick={(l, e) => {
-                            console.log(l, e);
-                        }}
-                        links={[
-                            {
-                                label: 'dropdown',
-                                target: '#dropdown',
-                            },
-                            {
-                                label: 'buttons',
-                                target: '#buttons',
-                            },
-                        ]}
-                    >
-                        {(link) => (
-                            <span
-                                className={
-                                    'transition hover:text-gray-800 ' +
-                                    (link.active
-                                        ? 'text-black'
-                                        : 'text-gray-400')
-                                }
-                            >
-                                {link.label}
-                            </span>
-                        )}
-                    </AnchorLinks>
-                </div>
             </Section>
-        </PageLayout>
+        </SectionedTemplate>
     );
 };
 

frontend/src/templates/SectionedTemplate/SectionedTemplate.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { AnchorLinkItem, AnchorLinks } from '@/components';
+import { ReactNode } from '@tanstack/react-router';
+
+export interface SectionedLayoutProps {
+    children?: ReactNode;
+    /*
+     * asideTitle is the bolded title that goes before the links on the side
+     */
+    asideTitle: string;
+    /*
+     * links is an array of AnchorLinkItem which are passed to the component AnchorLinks
+     */
+    links: AnchorLinkItem[];
+}
+
+/*
+ * SectionedLayout is composed of a aside sticky links and a centered main content section.
+ * The links are displayed using a
+ */
+export const SectionedLayout: FC<SectionedLayoutProps> = ({
+    children,
+    links,
+    asideTitle,
+}) => {
+    return (
+        <div>
+            <nav
+                data-testid="sectioned-layout-aside"
+                className="fixed bottom-0 left-0 top-14 px-6 w-64"
+            >
+                <h1 className="text-lg font-bold mb-2">{asideTitle}</h1>
+                <AnchorLinks links={links} />
+            </nav>
+            <div data-testid="sectione-layout-main" className="pt-14 px-64">
+                {children}
+            </div>
+        </div>
+    );
+};

frontend/src/templates/index.tsx

@@ -1 +1,2 @@
 export { DashboardTemplate } from './DashboardTemplate/DashboardTemplate';
+export { SectionedLayout } from './SectionedTemplate/SectionedTemplate';