96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
/*!
|
|
|
|
=========================================================
|
|
* 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;
|