diff --git a/web/src/components/FooterBar/FooterBar.stories.tsx b/web/src/components/FooterBar/FooterBar.stories.tsx new file mode 100644 index 0000000..6ded5a4 --- /dev/null +++ b/web/src/components/FooterBar/FooterBar.stories.tsx @@ -0,0 +1,26 @@ +// Pass props to your component by passing an `args` object to your story +// +// ```tsx +// export const Primary: Story = { +// args: { +// propName: propValue +// } +// } +// ``` +// +// See https://storybook.js.org/docs/react/writing-stories/args. + +import type { Meta, StoryObj } from '@storybook/react' + +import FooterBar from './FooterBar' + +const meta: Meta = { + component: FooterBar, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Primary: Story = {} diff --git a/web/src/components/FooterBar/FooterBar.test.tsx b/web/src/components/FooterBar/FooterBar.test.tsx new file mode 100644 index 0000000..147f5c0 --- /dev/null +++ b/web/src/components/FooterBar/FooterBar.test.tsx @@ -0,0 +1,14 @@ +import { render } from '@redwoodjs/testing/web' + +import FooterBar from './FooterBar' + +// Improve this test with help from the Redwood Testing Doc: +// https://redwoodjs.com/docs/testing#testing-components + +describe('FooterBar', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/components/FooterBar/FooterBar.tsx b/web/src/components/FooterBar/FooterBar.tsx new file mode 100644 index 0000000..51393d9 --- /dev/null +++ b/web/src/components/FooterBar/FooterBar.tsx @@ -0,0 +1,88 @@ +const FooterBar = () => { + return ( +
+ + +
+ ) +} + +export default FooterBar diff --git a/web/src/components/HeaderBar/HeaderBar.stories.tsx b/web/src/components/HeaderBar/HeaderBar.stories.tsx new file mode 100644 index 0000000..3f73392 --- /dev/null +++ b/web/src/components/HeaderBar/HeaderBar.stories.tsx @@ -0,0 +1,26 @@ +// Pass props to your component by passing an `args` object to your story +// +// ```tsx +// export const Primary: Story = { +// args: { +// propName: propValue +// } +// } +// ``` +// +// See https://storybook.js.org/docs/react/writing-stories/args. + +import type { Meta, StoryObj } from '@storybook/react' + +import HeaderBar from './HeaderBar' + +const meta: Meta = { + component: HeaderBar, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Primary: Story = {} diff --git a/web/src/components/HeaderBar/HeaderBar.test.tsx b/web/src/components/HeaderBar/HeaderBar.test.tsx new file mode 100644 index 0000000..f4df832 --- /dev/null +++ b/web/src/components/HeaderBar/HeaderBar.test.tsx @@ -0,0 +1,14 @@ +import { render } from '@redwoodjs/testing/web' + +import HeaderBar from './HeaderBar' + +// Improve this test with help from the Redwood Testing Doc: +// https://redwoodjs.com/docs/testing#testing-components + +describe('HeaderBar', () => { + it('renders successfully', () => { + expect(() => { + render() + }).not.toThrow() + }) +}) diff --git a/web/src/components/HeaderBar/HeaderBar.tsx b/web/src/components/HeaderBar/HeaderBar.tsx new file mode 100644 index 0000000..c8cff01 --- /dev/null +++ b/web/src/components/HeaderBar/HeaderBar.tsx @@ -0,0 +1,101 @@ +import { Link, routes } from '@redwoodjs/router' + +import { useAuth } from 'src/auth' +import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger' + +const HeaderBar = () => { + const { logOut } = useAuth() + + return ( +
+ +
+
    +
  • + Home +
    • +
  • +
    + Parent + +
    +
    • +
+
+
+
+
+ + + + 8 +
+
+
+
+ 8 Items + Subtotal: $999 +
+ +
+
+
+
+
+
+
+ Tailwind CSS Navbar component +
+
+ +
+
+ ) +} + +export default HeaderBar diff --git a/web/src/components/SideBar/SideBar.tsx b/web/src/components/SideBar/SideBar.tsx index 469f09b..aca3b74 100644 --- a/web/src/components/SideBar/SideBar.tsx +++ b/web/src/components/SideBar/SideBar.tsx @@ -1,9 +1,31 @@ const SideBar = () => { return ( -
-

{'SideBar'}

-

{'Find me in ./web/src/components/SideBar/SideBar.tsx'}

-
+ <> +
+ +
+ {/* Page content here */} + +
+
+ +
    + {/* Sidebar content here */} +
  • Sidebar Item 1
    • +
  • Sidebar Item 2
    • +
+
+
+ ) } diff --git a/web/src/layouts/ClientLayout/ClientLayout.tsx b/web/src/layouts/ClientLayout/ClientLayout.tsx index e3d0e62..6cf4bb7 100644 --- a/web/src/layouts/ClientLayout/ClientLayout.tsx +++ b/web/src/layouts/ClientLayout/ClientLayout.tsx @@ -1,222 +1,20 @@ -import { Link, routes } from '@redwoodjs/router' - -import { useAuth } from 'src/auth' -import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger' +import FooterBar from 'src/components/FooterBar/FooterBar' +import HeaderBar from 'src/components/HeaderBar/HeaderBar' +import SideBar from 'src/components/SideBar/SideBar' type ClientLayoutProps = { children?: React.ReactNode } const ClientLayout = ({ children }: ClientLayoutProps) => { - const { logOut } = useAuth() - return ( <> -
- -
- {/* Page content here */} - -
-
- - -
-
-
- -
-
    -
  • - Home -
    • -
  • -
    - Parent - -
    -
    • -
-
-
-
-
- - - - 8 -
-
-
-
- 8 Items - Subtotal: $999 -
- -
-
-
-
-
-
-
- Tailwind CSS Navbar component -
-
- -
-
+ +
{children}
- - + ) }