Feat/timeline data

src/components/EventBody.tsx

@@ -1,23 +1,36 @@
 import { Box, Text } from "@chakra-ui/react";
 
-interface EventBodyProps {
+interface Session {
+  room: string;
+  type: string;
+  speaker: string;
   title: string;
+}
+
+interface EventBodyProps {
   schedule: string;
-  description: string;
+  sessions: Session[];
 }
 
-const EventBody = ({ title, schedule, description }: EventBodyProps) => {
+const EventBody = ({ schedule, sessions }: EventBodyProps) => {
   return (
-    <Box marginLeft={[0, 0, 0, "40px", "40px"]} textAlign="center">
+    <Box  textAlign="center">
       <Text fontSize="30px" fontWeight={700}>
-        {title}
-      </Text>
-      <Text fontSize="18px" color="red" marginBottom="40px">
         {schedule}
       </Text>
-      <Text>{description}</Text>
+      {sessions.map((session) => (
+        <Box key={session.title + session.room + session.speaker}>
+          <Text fontSize="18px" color="red" marginBottom="10px">
+            Room {session.room}
+          </Text>
+          <Text>
+            Type: {session.type} - {session.title}{" "}
+            {session.speaker ? `- ${session.speaker}` : ""}
+          </Text>
+        </Box>
+      ))}
     </Box>
   );
 };
 
-export default EventBody;
+export default EventBody;

src/components/EventTitle.tsx

@@ -24,7 +24,7 @@ const EventTitle = ({ title, active = false }: EventTitleProps) => {
   return (
     <Flex
       width="100%"
-      h="10"
+      h="4"
       paddingRight={["15px", "15px", "15px", "50px", "50px"]}
     >
       <Flex
@@ -37,7 +37,7 @@ const EventTitle = ({ title, active = false }: EventTitleProps) => {
       >
         <Text
           color={active ? "red.500" : "blue.1000"}
-          fontSize={["12px", "22px", "22px", "22px", "32px"]}
+          fontSize={["12px", "14px", "14px", "14px", "24px"]}
           fontWeight={700}
           minWidth={["120px", "120px", "120px", "auto", "auto"]}
           paddingRight={["15px", "15px", "15px", "50px", "50px"]}

src/components/Timeline.tsx

@@ -1,82 +1,122 @@
 import { EVENTS } from "@/utils/data";
-import { Text, Flex, Box } from "@chakra-ui/react";
+import { Text, Flex, Box, Button } from "@chakra-ui/react";
 import { useState } from "react";
 import EventBody from "./EventBody";
 import EventTitle from "./EventTitle";
 
 const Timeline = () => {
   const [selectedEvent, setSelectedEvent] = useState(0);
 
+  const handleNextEvent = () => {
+    if (selectedEvent < EVENTS.length - 1) {
+      setSelectedEvent(selectedEvent + 1);
+    }
+  };
+
+  const handlePrevEvent = () => {
+    if (selectedEvent > 0) {
+      setSelectedEvent(selectedEvent - 1);
+    }
+  };
+
   return (
-    <Flex
-      bgColor="gray.50"
-      direction="column"
-      alignItems="center"
-      justifyContent="center"
-      width="full"
-    >
+    <>
       <Flex
-        py={["60px", "135px"]}
-        px={["30px", "70px"]}
+        bgColor="gray.50"
         direction="column"
-        width="full"
         alignItems="center"
+        justifyContent="center"
+        width="full"
       >
-        <Box>
-          <Text
-            marginBottom="80px"
-            variant={["h2", "main-title"]}
-            maxW={700}
-            lineHeight="100%"
-            align="center"
-          >
-            Descubre nuestro{" "}
-            <Text as="span" color="red">
-              itinerario
-            </Text>
-          </Text>
-        </Box>
-
         <Flex
+          py={["60px", "135px"]}
+          px={["30px", "70px"]}
+          direction="column"
           width="full"
           alignItems="center"
-          justifyContent="center"
-          mb="32px"
-          direction={["column", "column", "column", "row", "row"]}
         >
+          <Flex justifyItems="start">
+            <Text
+              marginBottom="80px"
+              variant={["h2", "main-title"]}
+              maxW={700}
+              lineHeight="100%"
+              align="center"
+            >
+              Descubre nuestro{" "}
+              <Text as="span" color="red">
+                itinerario
+              </Text>
+            </Text>
+          </Flex>
+
           <Flex
-            width={["100%", "100%", "100%", "50%", "50%"]}
-            direction={["row", "row", "row", "column", "column"]}
-            gap={[0, 0, 0, 10, 10]}
-            height={["200px", "200px", "200px", "auto", "auto"]}
+            width="full"
+            alignItems="center"
             justifyContent="center"
-            flexWrap="wrap"
-            marginBottom={["40px", "40px", "40px", "0px", "0px"]}
+            mb="32px"
+            direction={["column", "column", "column", "row", "row"]}
           >
-            {EVENTS.map((event, index) => (
+            <Flex
+              width={["100%", "100%", "100%", "50%", "50%"]}
+              direction={["row", "row", "row", "column", "column"]}
+              gap={[0, 0, 0, 10, 10]}
+              height={["200px", "200px", "200px", "auto", "auto"]}
+              justifyContent="center"
+              flexWrap="wrap"
+              marginBottom={["40px", "40px", "40px", "0px", "0px"]}
+            >
+              {EVENTS.map((event, index) => (
+                <Flex
+                  onClick={() => setSelectedEvent(index)}
+                  cursor="pointer"
+                  key={index + event.schedule}
+                  flexWrap="wrap"
+                >
+                  <EventTitle
+                    title={event.schedule}
+                    active={index === selectedEvent}
+                  />
+                </Flex>
+              ))}
+            </Flex>
+            <Flex
+              width={["100%", "100%", "100%", "50%", "50%"]}
+              align="center"
+              justify="center"
+            >
               <Flex
-                onClick={() => setSelectedEvent(index)}
-                cursor="pointer"
-                key={index + event.title}
-                flexWrap="wrap"
+                alignContent="center"
+                alignItems="center"
+                direction="column"
+                width="400px"
+                maxWidth="100%"
               >
-                <EventTitle
-                  title={event.title}
-                  active={index === selectedEvent}
+                <Flex
+                  display={["none", "none", "block", "block", "block"]}
+                  justify="center"
+                  textAlign="center"
+                  justifySelf="center"
+                  mb="10px"
+                >
+                  <Button onClick={handlePrevEvent} mr="5px">
+                    ←
+                  </Button>
+                  <Button onClick={handleNextEvent}> →</Button>
+                </Flex>
+
+                <EventBody
+                  schedule={EVENTS[selectedEvent].schedule}
+                  sessions={EVENTS[selectedEvent].sessions}
                 />
               </Flex>
-            ))}
-          </Flex>
-          <Flex width={["100%", "100%", "100%", "50%", "50%"]}>
-            <EventBody
-              title={EVENTS[selectedEvent].title}
-              schedule={EVENTS[selectedEvent].schedule}
-              description={EVENTS[selectedEvent].description}
-            />
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
-    </Flex>
+    </>
   );
+
+
 };
 export default Timeline;