From 05373ba7da31ade6acb450a8c407c58da5b0908e Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Sun, 3 Apr 2022 23:54:14 +0430 Subject: [PATCH] added time line --- src/App.js | 3 +- src/components/SelectYear/arrow-down.svg | 8 ++ src/components/SelectYear/arrow-up.svg | 8 ++ src/components/SelectYear/index.js | 100 +++++++++++++++------- src/components/SelectYear/index.scss | 11 +++ src/components/TimeLineComponent/index.js | 6 +- 6 files changed, 104 insertions(+), 32 deletions(-) create mode 100644 src/components/SelectYear/arrow-down.svg create mode 100644 src/components/SelectYear/arrow-up.svg create mode 100644 src/components/SelectYear/index.scss diff --git a/src/App.js b/src/App.js index 839b426..2ebb532 100644 --- a/src/App.js +++ b/src/App.js @@ -100,7 +100,7 @@ function App() { {/* */} {/* */} {/* */} - {/* */} + {/* */} {/* */} {/* */} @@ -117,6 +117,7 @@ function App() { {/* */} {/* */} {/* */} + {/* */} {/*
diff --git a/src/components/SelectYear/arrow-down.svg b/src/components/SelectYear/arrow-down.svg new file mode 100644 index 0000000..77c18d7 --- /dev/null +++ b/src/components/SelectYear/arrow-down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/SelectYear/arrow-up.svg b/src/components/SelectYear/arrow-up.svg new file mode 100644 index 0000000..f3daff9 --- /dev/null +++ b/src/components/SelectYear/arrow-up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/SelectYear/index.js b/src/components/SelectYear/index.js index 9196bc8..57c9bca 100644 --- a/src/components/SelectYear/index.js +++ b/src/components/SelectYear/index.js @@ -1,41 +1,81 @@ -import React from "react"; +import React, { useState } from "react"; + +import "./index.scss"; + +import arrowDown from "./arrow-down.svg"; +import arrowUp from "./arrow-up.svg"; +import Month from "./Month.js"; + +const SelectYear = ({ items }) => { + const [selectedYear, setSelectedYear] = useState(null); -const SelectYear = () => { return ( -
-
- 1400 +
+
+ +
+ {items.map((item, index) => ( +
+

setSelectedYear(item)} + className={`text-base my-2 cursor-pointer text-center ${ + selectedYear === item + ? "text-[#06BACE] font-bold text-2xl" + : "text-gray-300" + }`} + > + {item.year} +

+
+ ))} +
+
-
+
- فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین - فروردین + فروردین + اردیبهشت + خرداد + تیر + مرداد + شهریور + مهر + آبان + آذر + دی + بهمن + اسفند
+ {/*
+ {selectedYear?.components} +
*/}
); }; export default SelectYear; -// SelectYear.defaultProps = { -// date: [ -// { -// year: "1400", -// months: [ -// { - -// } -// ] -// } -// ] -// } +SelectYear.defaultProps = { + items: [ + { + year: "1400", + components: , + }, + { + year: "1399", + components: , + }, + { + year: "1398", + components: , + }, + { + year: "1397", + components: , + }, + { + year: "1396", + components: , + }, + ], +}; diff --git a/src/components/SelectYear/index.scss b/src/components/SelectYear/index.scss new file mode 100644 index 0000000..9b6c0a0 --- /dev/null +++ b/src/components/SelectYear/index.scss @@ -0,0 +1,11 @@ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.tabbar { + cursor: pointer; +} +.active2, +.active2 li a { + cursor: move !important; +} diff --git a/src/components/TimeLineComponent/index.js b/src/components/TimeLineComponent/index.js index 23b876f..fb3a3d4 100644 --- a/src/components/TimeLineComponent/index.js +++ b/src/components/TimeLineComponent/index.js @@ -5,12 +5,16 @@ import TitleSubtitle from "../TitleSubtitle"; import Timeline from "./Timeline.js"; import search from "./gray-search-icon.svg"; +import SelectYear from "../SelectYear"; const TimeLineComponent = ({ data }) => { return (
- +
+ + +