From 448062258e0b2b956702ec03a02c9f68af81b38a Mon Sep 17 00:00:00 2001
From: bruno <bruno@process.st>
Date: Sun, 10 Dec 2023 13:43:23 -0300
Subject: [PATCH] add layout

---
 web/src/App.tsx                      |  5 ++---
 web/src/Routes.tsx                   |  3 +++
 web/src/components/.keep             |  0
 web/src/index.css                    |  0
 web/src/layouts/.keep                |  0
 web/src/layouts/index.ts             |  1 +
 web/src/layouts/layout.tsx           | 18 ++++++++++++++++++
 web/src/pages/HomePage/home-page.tsx | 16 ++++++++++++++++
 web/src/pages/HomePage/index.ts      |  1 +
 9 files changed, 41 insertions(+), 3 deletions(-)
 delete mode 100644 web/src/components/.keep
 delete mode 100644 web/src/index.css
 delete mode 100644 web/src/layouts/.keep
 create mode 100644 web/src/layouts/index.ts
 create mode 100644 web/src/layouts/layout.tsx
 create mode 100644 web/src/pages/HomePage/home-page.tsx
 create mode 100644 web/src/pages/HomePage/index.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 1e60c5f..948c600 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -5,9 +5,8 @@ import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
-import Routes from 'src/Routes'
 
-import './index.css'
+import { Layout } from './layouts'
 
 const extendedTheme = extendTheme(theme)
 
@@ -17,7 +16,7 @@ const App = () => (
       <ColorModeScript />
       <ChakraProvider theme={extendedTheme}>
         <RedwoodApolloProvider>
-          <Routes />
+          <Layout />
         </RedwoodApolloProvider>
       </ChakraProvider>
     </RedwoodProvider>
diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 2c8f02a..f9af536 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -9,10 +9,13 @@
 
 import { Router, Route } from '@redwoodjs/router'
 
+import { HomePage } from './pages/HomePage'
+
 const Routes = () => {
   return (
     <Router>
       <Route notfound page={NotFoundPage} />
+      <Route path="/" page={HomePage} name="home" />
     </Router>
   )
 }
diff --git a/web/src/components/.keep b/web/src/components/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/index.css b/web/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/layouts/.keep b/web/src/layouts/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/layouts/index.ts b/web/src/layouts/index.ts
new file mode 100644
index 0000000..626835b
--- /dev/null
+++ b/web/src/layouts/index.ts
@@ -0,0 +1 @@
+export * from './layout'
diff --git a/web/src/layouts/layout.tsx b/web/src/layouts/layout.tsx
new file mode 100644
index 0000000..0ee887f
--- /dev/null
+++ b/web/src/layouts/layout.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { Box, Container, Flex, HStack } from '@chakra-ui/react'
+
+import Routes from 'src/Routes'
+
+export const Layout: React.FC = () => {
+  return (
+    <HStack>
+      <Box bgColor="teal.50">{/* navbar */}</Box>
+      <Flex h="100vh" flexGrow="1" bgColor="white">
+        <Container maxW="lg" py="10" flexGrow="1">
+          <Routes />
+        </Container>
+      </Flex>
+    </HStack>
+  )
+}
diff --git a/web/src/pages/HomePage/home-page.tsx b/web/src/pages/HomePage/home-page.tsx
new file mode 100644
index 0000000..58bb37c
--- /dev/null
+++ b/web/src/pages/HomePage/home-page.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Box, Heading, Text } from '@chakra-ui/react'
+
+export const HomePage: React.FC = () => {
+  return (
+    <Box>
+      <Heading as="h1" size="xl" mb="6">
+        Welcome to My App
+      </Heading>
+      <Text fontSize="lg" mb="4">
+        This is a simple example of how to add content to your app.
+      </Text>
+    </Box>
+  )
+}
diff --git a/web/src/pages/HomePage/index.ts b/web/src/pages/HomePage/index.ts
new file mode 100644
index 0000000..f98af6b
--- /dev/null
+++ b/web/src/pages/HomePage/index.ts
@@ -0,0 +1 @@
+export * from './home-page'
-- 
GitLab