diff --git a/build.zip b/build.zip deleted file mode 100644 index 9798c2b..0000000 Binary files a/build.zip and /dev/null differ diff --git a/src/App.js b/src/App.js index b25cb7f..38e14d5 100644 --- a/src/App.js +++ b/src/App.js @@ -63,6 +63,8 @@ import PopupCard from "./components/PopupCard"; import OutlineInput from "./components/OutlineInput"; import CancleIcon from "./components/CancleIcon"; import ButtonNewDesign from "./components/ButtonNewDesign"; +import TimeLine from "./components/TimeLine"; +import TitleSubtitle from "./components/TitleSubtitle"; // import Digikala from "./components/Digikala/ImageSlider"; @@ -98,7 +100,7 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} {/* */} {/* */} {/* */} @@ -121,6 +123,7 @@ function App() { {/* */} {/* */} {/* */} + {/* */} {/* */} {/* */} {/* */} @@ -134,6 +137,7 @@ function App() { {/* */} {/* */} + {/* */} diff --git a/src/components/PopupCard/index.js b/src/components/PopupCard/index.js index 4d79378..8f3d2d7 100644 --- a/src/components/PopupCard/index.js +++ b/src/components/PopupCard/index.js @@ -18,6 +18,10 @@ const PopupCard = ({ selectedChecklist }) => { return ( + + به دایره های ابی وقتی که پاپ اپ باز میشود لطفا نگاه نکنید مربوط به تسک + بعدی است + { const [activeSearchBox, setActiveSearchBox] = useState(false); return ( - + {activeSearchBox && ( ( + + + + {data.date} + - + {data.time}{" "} + + {/* + + + + */} + + + {data.text} + + + + {data.content} + + + + +); + +export default TimeLineItem; diff --git a/src/components/TimeLine/Timeline.js b/src/components/TimeLine/Timeline.js new file mode 100644 index 0000000..5ab3d03 --- /dev/null +++ b/src/components/TimeLine/Timeline.js @@ -0,0 +1,15 @@ +import React from "react"; + +import timeLineData from "./data.js"; +import TimeLineItem from "./TimeLineItem.js"; + +const TimeLine = () => + timeLineData.length > 0 && ( + + {timeLineData.slice(0, 3).map((data, idx) => ( + + ))} + + ); + +export default TimeLine; diff --git a/src/components/TimeLine/data.js b/src/components/TimeLine/data.js new file mode 100644 index 0000000..cd90eac --- /dev/null +++ b/src/components/TimeLine/data.js @@ -0,0 +1,31 @@ +const data = [ + { + date: "1400/12/28", + time: " 14:30", + text: "انجام عملیات بازگردانی و ذخیره سازی", + content: ` + جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت +پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید + `, + }, + { + date: "1400/12/28", + time: " 14:30", + text: "انجام عملیات بازگردانی و ذخیره سازی", + content: ` + جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت +پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید + `, + }, + { + date: "1400/12/28", + time: " 14:30", + text: "انجام عملیات بازگردانی و ذخیره سازی", + content: ` + جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت +پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید + `, + }, +]; + +export default data; diff --git a/src/components/TimeLine/gray-search-icon.svg b/src/components/TimeLine/gray-search-icon.svg new file mode 100644 index 0000000..c239010 --- /dev/null +++ b/src/components/TimeLine/gray-search-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/TimeLine/index.js b/src/components/TimeLine/index.js new file mode 100644 index 0000000..672373c --- /dev/null +++ b/src/components/TimeLine/index.js @@ -0,0 +1,21 @@ +import React from "react"; +import SearchBox from "../SearchBox"; +import TitleSubtitle from "../TitleSubtitle"; + +import Timeline from "./Timeline.js"; + +import search from "./gray-search-icon.svg"; + +const TimeLine = ({ data }) => { + return ( + + + + + + + + ); +}; + +export default TimeLine; diff --git a/src/components/TimeLine/index.scss b/src/components/TimeLine/index.scss new file mode 100644 index 0000000..09c4add --- /dev/null +++ b/src/components/TimeLine/index.scss @@ -0,0 +1,84 @@ +#root { + width: 100%; +} + +.timeline-container::after { + background-color: #06bace; + content: ""; + position: absolute; + right: calc(50% - 2px); + width: 4px; + height: 100%; +} + +.timeline-item:nth-child(odd) { + align-self: flex-end; + justify-content: flex-start; + padding-right: 30px; + padding-left: 0px; +} + +.timeline-item-content::after { + content: ""; + background-color: #fff; + box-shadow: -1px 1px 1px rgba(0, 0, 0.2); + width: 15px; + height: 15px; + position: absolute; + transform: rotate(45deg); + left: -7.5px; + top: calc(50% - 7.5px); +} + +.timeline-item:nth-child(odd) .timeline-item-content { + align-items: flex-start; + text-align: left; +} + +.timeline-item:nth-child(odd) .timeline-item-content::after { + box-shadow: 1px -1px 1px rgba(0, 0, 0.2); + left: auto; + right: -7.5px; +} + +.timeline-item-content .circle { + background-color: #06bace; + border: solid 4px #fff; + border-radius: 50%; + width: 20px; + height: 20px; + position: absolute; + top: calc(50% - 10px); + left: -40px; + z-index: 100; +} + +.timeline-item:nth-child(odd) .timeline-item-content .circle { + left: auto; + right: -40px; +} + +@media only screen and (max-width: 767px) { + .timeline-item-content, + .timeline-item:nth-child(odd) .timeline-item-content { + padding: 15px 10px; + text-align: center !important; + align-items: center !important; + } + + .timeline-item-content .tag { + width: calc(100% - 10px); + } + + .timeline-item-content time { + margin-top: 20px; + } + + .timeline-item-content a { + text-decoration: underline; + } + + .timeline-item-content a::after { + display: none; + } +}
+ به دایره های ابی وقتی که پاپ اپ باز میشود لطفا نگاه نکنید مربوط به تسک + بعدی است +
+ {data.text} +
+ {data.content} +