Main feature/135 create studysession page (#136)

* add simple page * add variant main for Container * fix studySessionCard width * card styles * add create button
frontendcafe · Sep 9, 2022 · 87ef285 · 87ef285
1 parent e7d36eb
commit 87ef285
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 5 deletions.
diff --git a/modules/StudySession/components/StudySessionCard.tsx b/modules/StudySession/components/StudySessionCard.tsx
@@ -41,6 +41,7 @@ const StudySessionCard = ({
       <Box
         bg="white"
         boxSize="xs"
+        w={{ base: "100%", desktop: "320px" }}
         h="153px"
         boxShadow="lg"
         borderColor="gray.50"
@@ -63,7 +64,14 @@ const StudySessionCard = ({
             <Box>
               <Text fontWeight="400">{name}</Text>
               <Box color="primary.50" display="flex" alignItems="center" justifyContent="start">
-                <Text fontSize="sm" bg="primary.100" borderRadius="lg" p="1" color="white">
+                <Text
+                  fontSize="sm"
+                  bg="primary.100"
+                  mt="14px"
+                  borderRadius="lg"
+                  p="5px 12px"
+                  color="white"
+                >
                   {collection}
                 </Text>
               </Box>

diff --git a/modules/shared/components/Icons/Add.tsx b/modules/shared/components/Icons/Add.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  width: number;
+  height: number;
+}
+
+export default function AddIcon({ height, width }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={height}
+      height={width}
+      viewBox="0 0 28 28"
+      fill="none"
+    >
+      <path
+        d="M13.5417 1V26.0833M1 13.5417H26.0833"
+        stroke="#1867FF"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/modules/shared/theme/index.ts b/modules/shared/theme/index.ts
@@ -203,6 +203,19 @@ const components: Theme["components"] = {
       variant: "primary",
     },
   },
+
+  Container: {
+    variants: {
+      main: {
+        maxWidth: "auto",
+        padding: {
+          sm: "0px 21px",
+          md: "0px 48px",
+          lg: "30px 160px",
+        },
+      },
+    },
+  },
 };
 
 const fonts: Theme["fonts"] = {

diff --git a/pages/study-sessions/index.tsx b/pages/study-sessions/index.tsx
@@ -1,7 +1,111 @@
-import React from "react";
+import type { NextPage } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
 
-const index = () => {
-  return <div>index</div>;
+import AddIcon from "@/modules/shared/components/Icons/Add";
+import Menu from "@/modules/shared/components/Menu/Menu";
+import StudySessionCard from "@/modules/StudySession/components/StudySessionCard";
+import { Center, Container, Flex, Grid, GridItem, Select, Text } from "@chakra-ui/react";
+
+const StudySessions: NextPage = () => {
+  const router = useRouter();
+  const deleteFunction = (id: string) => {
+    console.log(id);
+  };
+
+  // TODO: Obtener studysessions del usuario
+  // useEffect(() => {
+  // getUserStudySessions
+  // setStudySessions()
+  // }, [])
+
+  const handleCreate = () => {
+    router.push("/study-sessions/create");
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Study sessions / Flashcards</title>
+        <meta name="description" content="Flashcards study app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Container variant="main">
+        {/* TODO: Layout Component */}
+        <Menu />
+        <Text color="#151F33" fontWeight={600} fontSize="20px" mt="50px">
+          Mis rondas de estudio
+        </Text>
+        <Select placeholder="Recientes" w="142px" borderColor="gray.50" m="26px 0px 45px 0px">
+          <option value="option1">Option 1</option>
+        </Select>
+        <Grid
+          templateColumns={{
+            base: "repeat(1, 1fr)",
+            desktop: "repeat(3, 1fr)",
+          }}
+          gap={{ base: "25", lg: "10" }}
+          justifyContent="center"
+        >
+          <GridItem
+            w="100%"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            cursor="pointer"
+            onClick={handleCreate}
+          >
+            <Flex flexDirection="column">
+              <Center flexDirection="column">
+                <AddIcon width={25} height={25} />
+                <Text>Crear nueva sesión</Text>
+              </Center>
+            </Flex>
+          </GridItem>
+          <GridItem w="100%">
+            <StudySessionCard
+              id="asd123"
+              name="hola"
+              cardsAmount={30}
+              collection="Medicina"
+              percentage={50}
+              deleteFunction={deleteFunction}
+            />
+          </GridItem>
+          <GridItem w="100%">
+            <StudySessionCard
+              id="asd123"
+              name="hola"
+              cardsAmount={30}
+              collection="Medicina"
+              percentage={50}
+              deleteFunction={deleteFunction}
+            />
+          </GridItem>
+          <GridItem w="100%">
+            <StudySessionCard
+              id="asd123"
+              name="hola"
+              cardsAmount={30}
+              collection="Medicina"
+              percentage={50}
+              deleteFunction={deleteFunction}
+            />
+          </GridItem>
+          <GridItem w="100%">
+            <StudySessionCard
+              id="asd123"
+              name="hola"
+              cardsAmount={30}
+              collection="Medicina"
+              percentage={50}
+              deleteFunction={deleteFunction}
+            />
+          </GridItem>
+        </Grid>
+      </Container>
+    </>
+  );
 };
 
-export default index;
+export default StudySessions;