Initial commit

src/views/Pages/Projects/Timeline.js

@@ -0,0 +1,95 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// Chakra imports
+import { Stack, Text, useColorModeValue } from "@chakra-ui/react";
+// Custom components
+import Card from "components/Card/Card";
+import CardBody from "components/Card/CardBody";
+import CardHeader from "components/Card/CardHeader";
+import TimelineRow from "components/Tables/TimelineRow";
+import React from "react";
+import { timelineProjectsData } from "variables/general";
+
+function Timeline() {
+  const textColor = useColorModeValue("gray.700", "white");
+  const bgCard = useColorModeValue(
+    "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
+    "linear-gradient(180deg, #3182CE 0%, #63B3ED 100%)"
+  );
+
+  return (
+    <Stack
+      direction={{ sm: "column", lg: "row" }}
+      spacing="24px"
+      pt={{ sm: "125px", lg: "75px" }}
+    >
+      <Card>
+        <CardHeader mb="30px">
+          <Text color={textColor} fontSize="lg" fontWeight="bold">
+            Timeline with dotted line
+          </Text>
+        </CardHeader>
+        <CardBody px="10px">
+          <Stack direction="column" spacing="4px">
+            {timelineProjectsData.map((row, index) => {
+              return (
+                <TimelineRow
+                  logo={row.logo}
+                  title={row.title}
+                  date={row.date}
+                  color={row.color}
+                  description={row.description}
+                  tags={row.tags}
+                  key={index}
+                />
+              );
+            })}
+          </Stack>
+        </CardBody>
+      </Card>
+      <Card bg={bgCard}>
+        <CardHeader mb="30px">
+          <Text color="#fff" fontSize="lg" fontWeight="bold">
+            Timeline dark with dashed line
+          </Text>
+        </CardHeader>
+        <CardBody px="10px">
+          <Stack direction="column" spacing="4px">
+            {timelineProjectsData.map((row, index) => {
+              return (
+                <TimelineRow
+                  logo={row.logo}
+                  title={row.title}
+                  titleColor={row.titleColor}
+                  date={row.date}
+                  color={row.color}
+                  description={row.description}
+                  tags={row.tags}
+                  isDark={true}
+                  key={index}
+                />
+              );
+            })}
+          </Stack>
+        </CardBody>
+      </Card>
+    </Stack>
+  );
+}
+
+export default Timeline;