Merge pull request #85 from jpcmf/feat/layout-component

Feat/layout component

Author: jpcmf

src/features/dashboard/index.tsx

@@ -0,0 +1,45 @@
+import { Box, SimpleGrid, Text } from "@chakra-ui/react";
+import { Layout } from "@/shared/components/Layout";
+
+type DashboardProps = {
+  user: any;
+};
+
+export function Dashboard({ user }: DashboardProps) {
+  return (
+    <Layout>
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }} w="100dvw">
+        <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
+          <Text fontSize="lg" fontWeight="bold" mb="4">
+            Status do cadastro do atleta
+          </Text>
+          <Text color="green.400">{user?.name}</Text>
+          <Text color="green.400">Regular</Text>
+        </Box>
+
+        <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
+          <Text fontSize="lg" fontWeight="bold" mb="4">
+            Dados de acesso da semana
+          </Text>
+          {user?.name} <br />
+          {user?.about} <br />
+        </Box>
+
+        <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
+          <Text fontSize="lg" fontWeight="bold" mb="4">
+            Documentações
+          </Text>
+          <Text color="green.400" as="a" href="#" textDecoration={"underline"}>
+            Instruções para inscrição em eventos
+          </Text>
+        </Box>
+
+        <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
+          <Text fontSize="lg" fontWeight="bold" mb="4">
+            Taxa de abertura
+          </Text>
+        </Box>
+      </SimpleGrid>
+    </Layout>
+  );
+}

src/pages/dashboard.tsx

@@ -1,56 +1,11 @@
 import { useContext } from "react";
 import { parseCookies } from "nookies";
-import { Box, Flex, SimpleGrid, Text } from "@chakra-ui/react";
-
-import { Header } from "@/components/Header";
-import { Sidebar } from "@/components/Sidebar";
 import { AuthContext } from "@/contexts/AuthContext";
+import { Dashboard } from "@/features/dashboard";
 
-export default function Dashboard() {
+export default function DashboardPage() {
   const { user } = useContext(AuthContext);
-
-  return (
-    <>
-      <Flex direction="column" h="100vh">
-        <Header />
-        <Flex w="100%" my="6" maxWidth={1480} mx="auto" px="6">
-          <Sidebar />
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }} w="100dvw">
-            <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
-              <Text fontSize="lg" fontWeight="bold" mb="4">
-                Status do cadastro do atleta
-              </Text>
-              <Text color="green.400">{user?.name}</Text>
-              <Text color="green.400">Regular</Text>
-            </Box>
-
-            <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
-              <Text fontSize="lg" fontWeight="bold" mb="4">
-                Dados de acesso da semana
-              </Text>
-              {user?.name} <br />
-              {user?.about} <br />
-            </Box>
-
-            <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
-              <Text fontSize="lg" fontWeight="bold" mb="4">
-                Documentações
-              </Text>
-              <Text color="green.400" as="a" href="#" textDecoration={"underline"}>
-                Instruções para inscrição em eventos
-              </Text>
-            </Box>
-
-            <Box p={["6", "8"]} bg="gray.800" borderRadius={8} flex="50%">
-              <Text fontSize="lg" fontWeight="bold" mb="4">
-                Taxa de abertura
-              </Text>
-            </Box>
-          </SimpleGrid>
-        </Flex>
-      </Flex>
-    </>
-  );
+  return <Dashboard user={user} />;
 }
 
 export const getServerSideProps = async (ctx: any) => {

src/pages/general.tsx

@@ -1,7 +1,10 @@
-export default function General() {
+import { Layout } from "@/shared/components/Layout";
+export default function GeneralPage() {
   return (
-    <div>
-      <h1>General Page</h1>
-    </div>
+    <Layout>
+      <div>
+        <h1>General Page</h1>
+      </div>
+    </Layout>
   );
 }

src/shared/components/Layout/index.tsx

@@ -0,0 +1,19 @@
+import { Flex } from "@chakra-ui/react";
+import { Header } from "@/components/Header";
+import { Sidebar } from "@/components/Sidebar";
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+export function Layout({ children }: LayoutProps) {
+  return (
+    <Flex direction="column" h="100vh">
+      <Header />
+      <Flex w="100%" my="6" maxWidth={1480} mx="auto" px="6">
+        <Sidebar />
+        {children}
+      </Flex>
+    </Flex>
+  );
+}