From 4602493535be276da89c31ffdb0b351e3225c7b5 Mon Sep 17 00:00:00 2001 From: jc <46619361+juancwu@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:37:47 -0500 Subject: [PATCH 1/3] add SectionedLayout --- frontend/src/layouts/SectionedLayout.tsx | 41 ++++++++++++++++++++++++ frontend/src/layouts/index.tsx | 1 + frontend/src/layouts/types.ts | 6 +++- 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 frontend/src/layouts/SectionedLayout.tsx diff --git a/frontend/src/layouts/SectionedLayout.tsx b/frontend/src/layouts/SectionedLayout.tsx new file mode 100644 index 00000000..c7fba762 --- /dev/null +++ b/frontend/src/layouts/SectionedLayout.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react'; +import { LayoutProps } from './types'; +import { AnchorLinkItem, AnchorLinks } from '@/components'; + +export interface SectionedLayoutProps extends LayoutProps { + /* + * 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 + */ +const SectionedLayout: FC = ({ + children, + links, + asideTitle, +}) => { + return ( +
+ +
+ {children} +
+
+ ); +}; + +export { SectionedLayout }; diff --git a/frontend/src/layouts/index.tsx b/frontend/src/layouts/index.tsx index 5b2fd925..04387ab2 100644 --- a/frontend/src/layouts/index.tsx +++ b/frontend/src/layouts/index.tsx @@ -6,3 +6,4 @@ export { PageLayout } from './PageLayout'; export { Footer } from './Footer'; export { Header } from './Header'; export { FormContainer } from './FormContainer'; +export { SectionedLayout } from './SectionedLayout'; diff --git a/frontend/src/layouts/types.ts b/frontend/src/layouts/types.ts index b44bf4f3..915f2efc 100644 --- a/frontend/src/layouts/types.ts +++ b/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 = From 38a9fdd65f01efa429dc080132b9e1d418a261a7 Mon Sep 17 00:00:00 2001 From: jc <46619361+juancwu@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:38:22 -0500 Subject: [PATCH 2/3] update index to be wrapped with SectionedLayout this is to showcase the look of the SectionedLayout, and the landing page was already like that so... --- frontend/src/pages/index.tsx | 50 +++++++++++------------------------- 1 file changed, 15 insertions(+), 35 deletions(-) diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index fff2fbe8..32ac7883 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -4,9 +4,9 @@ import { FileUpload, Button, Dropdown, - AnchorLinks, + AnchorLinkItem, } from '@components'; -import { PageLayout, Section } from '@layouts'; +import { SectionedLayout, Section } from '@layouts'; import { createFileRoute } from '@tanstack/react-router'; // sample industries data @@ -19,13 +19,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 ( - +

Landing

@@ -56,39 +67,8 @@ const Landing: React.FC = () => { - -
- { - console.log(l, e); - }} - links={[ - { - label: 'dropdown', - target: '#dropdown', - }, - { - label: 'buttons', - target: '#buttons', - }, - ]} - > - {(link) => ( - - {link.label} - - )} - -
- + ); }; From fc3a63ac7adbcbc94ba0e79df3255b762e345c05 Mon Sep 17 00:00:00 2001 From: jc <46619361+juancwu@users.noreply.github.com> Date: Thu, 16 Jan 2025 20:50:29 -0500 Subject: [PATCH 3/3] move SectionedLayout to SectionedTemplate --- frontend/src/layouts/index.tsx | 1 - frontend/src/pages/index.tsx | 7 ++++--- .../SectionedTemplate/SectionedTemplate.tsx} | 9 ++++----- frontend/src/templates/index.tsx | 1 + 4 files changed, 9 insertions(+), 9 deletions(-) rename frontend/src/{layouts/SectionedLayout.tsx => templates/SectionedTemplate/SectionedTemplate.tsx} (84%) diff --git a/frontend/src/layouts/index.tsx b/frontend/src/layouts/index.tsx index 04387ab2..5b2fd925 100644 --- a/frontend/src/layouts/index.tsx +++ b/frontend/src/layouts/index.tsx @@ -6,4 +6,3 @@ export { PageLayout } from './PageLayout'; export { Footer } from './Footer'; export { Header } from './Header'; export { FormContainer } from './FormContainer'; -export { SectionedLayout } from './SectionedLayout'; diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 32ac7883..c5f3436a 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -6,7 +6,8 @@ import { Dropdown, AnchorLinkItem, } from '@components'; -import { SectionedLayout, Section } from '@layouts'; +import { Section } from '@layouts'; +import { SectionedLayout as SectionedTemplate } from '@/templates'; import { createFileRoute } from '@tanstack/react-router'; // sample industries data @@ -36,7 +37,7 @@ const Landing: React.FC = () => { >(null); return ( - +

Landing

@@ -68,7 +69,7 @@ const Landing: React.FC = () => {
- + ); }; diff --git a/frontend/src/layouts/SectionedLayout.tsx b/frontend/src/templates/SectionedTemplate/SectionedTemplate.tsx similarity index 84% rename from frontend/src/layouts/SectionedLayout.tsx rename to frontend/src/templates/SectionedTemplate/SectionedTemplate.tsx index c7fba762..ab4b2c8e 100644 --- a/frontend/src/layouts/SectionedLayout.tsx +++ b/frontend/src/templates/SectionedTemplate/SectionedTemplate.tsx @@ -1,8 +1,9 @@ import { FC } from 'react'; -import { LayoutProps } from './types'; import { AnchorLinkItem, AnchorLinks } from '@/components'; +import { ReactNode } from '@tanstack/react-router'; -export interface SectionedLayoutProps extends LayoutProps { +export interface SectionedLayoutProps { + children?: ReactNode; /* * asideTitle is the bolded title that goes before the links on the side */ @@ -17,7 +18,7 @@ export interface SectionedLayoutProps extends LayoutProps { * SectionedLayout is composed of a aside sticky links and a centered main content section. * The links are displayed using a */ -const SectionedLayout: FC = ({ +export const SectionedLayout: FC = ({ children, links, asideTitle, @@ -37,5 +38,3 @@ const SectionedLayout: FC = ({ ); }; - -export { SectionedLayout }; diff --git a/frontend/src/templates/index.tsx b/frontend/src/templates/index.tsx index 8353968c..d397f4a4 100644 --- a/frontend/src/templates/index.tsx +++ b/frontend/src/templates/index.tsx @@ -1 +1,2 @@ export { DashboardTemplate } from './DashboardTemplate/DashboardTemplate'; +export { SectionedLayout } from './SectionedTemplate/SectionedTemplate';