diff --git a/src/App.js b/src/App.js index 38e14d5..cb792a7 100644 --- a/src/App.js +++ b/src/App.js @@ -63,8 +63,11 @@ 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 TimeLine from "./components/TimeLine"; +import TimeLineComponent from "./components/TimeLineComponent"; + import TitleSubtitle from "./components/TitleSubtitle"; +import TimeLine from "./components/TimeLineComponent/Timeline"; // import Digikala from "./components/Digikala/ImageSlider"; @@ -138,6 +141,8 @@ function App() { {/* */} + + {/* */} diff --git a/src/components/PopupCard/index.js b/src/components/PopupCard/index.js index 8f3d2d7..d4eb8c9 100644 --- a/src/components/PopupCard/index.js +++ b/src/components/PopupCard/index.js @@ -37,7 +37,7 @@ const PopupCard = ({ selectedChecklist }) => { className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center" >
-
+
{/* cancle icon */} @@ -109,22 +109,14 @@ const PopupCard = ({ selectedChecklist }) => { {selectedChecklist.slice(0, 3).map((item, index) => (
setChecklist(checklist + 25)} - // onChange={(e) => - // e.target.checked === true - // ? checklist - 25 - // : checklist + 25 - // } - // onClick={() => - // setChecklist( - // checked === true ? checklist - 25 : checklist + 25 - // ) - // } disabled={checklist >= 100} type="checkbox" className="form-checkbox text-blue-500" - onClick={() => setChecklist(checklist + 10)} + onClick={(e) => + e.target.checked + ? setChecklist(checklist + 10) + : setChecklist(checklist - 10) + } /> {item.title}
diff --git a/src/components/TimeLine/TimeLineItem.js b/src/components/TimeLineComponent/TimeLineItem.js similarity index 61% rename from src/components/TimeLine/TimeLineItem.js rename to src/components/TimeLineComponent/TimeLineItem.js index e0ff218..f98d3cc 100644 --- a/src/components/TimeLine/TimeLineItem.js +++ b/src/components/TimeLineComponent/TimeLineItem.js @@ -2,17 +2,17 @@ import "./index.scss"; const TimeLineItem = ({ data }) => (
-
+
- - - {" "} + - +
{/*
@@ -20,11 +20,12 @@ const TimeLineItem = ({ data }) => (
*/}
+

{data.text}

-

+

{data.content}

diff --git a/src/components/TimeLine/Timeline.js b/src/components/TimeLineComponent/Timeline.js similarity index 81% rename from src/components/TimeLine/Timeline.js rename to src/components/TimeLineComponent/Timeline.js index 5ab3d03..0ab9cb9 100644 --- a/src/components/TimeLine/Timeline.js +++ b/src/components/TimeLineComponent/Timeline.js @@ -5,7 +5,7 @@ import TimeLineItem from "./TimeLineItem.js"; const TimeLine = () => timeLineData.length > 0 && ( -
+
{timeLineData.slice(0, 3).map((data, idx) => ( ))} diff --git a/src/components/TimeLine/data.js b/src/components/TimeLineComponent/data.js similarity index 61% rename from src/components/TimeLine/data.js rename to src/components/TimeLineComponent/data.js index cd90eac..c5fe3fd 100644 --- a/src/components/TimeLine/data.js +++ b/src/components/TimeLineComponent/data.js @@ -14,16 +14,14 @@ const data = [ text: "انجام عملیات بازگردانی و ذخیره سازی", content: ` جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت -پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید - `, +پایان جنگ ای پایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ران و عراق هم ‌`, }, { date: "1400/12/28", time: " 14:30", text: "انجام عملیات بازگردانی و ذخیره سازی", content: ` - جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت -پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بین‌المللی گردید + جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثپایان جنگ ایران و عراق پایان جنگ ایران و عراق پایان جنگ ایران و عراق ی در واکنش به اشغال کویت توسط عراق انجام گرفت `, }, ]; diff --git a/src/components/TimeLine/gray-search-icon.svg b/src/components/TimeLineComponent/gray-search-icon.svg similarity index 100% rename from src/components/TimeLine/gray-search-icon.svg rename to src/components/TimeLineComponent/gray-search-icon.svg diff --git a/src/components/TimeLine/index.js b/src/components/TimeLineComponent/index.js similarity index 56% rename from src/components/TimeLine/index.js rename to src/components/TimeLineComponent/index.js index 672373c..23b876f 100644 --- a/src/components/TimeLine/index.js +++ b/src/components/TimeLineComponent/index.js @@ -6,16 +6,18 @@ import Timeline from "./Timeline.js"; import search from "./gray-search-icon.svg"; -const TimeLine = ({ data }) => { +const TimeLineComponent = ({ data }) => { return ( -
-
+
+
+
+ +
-
); }; -export default TimeLine; +export default TimeLineComponent; diff --git a/src/components/TimeLine/index.scss b/src/components/TimeLineComponent/index.scss similarity index 82% rename from src/components/TimeLine/index.scss rename to src/components/TimeLineComponent/index.scss index 09c4add..9ed932d 100644 --- a/src/components/TimeLine/index.scss +++ b/src/components/TimeLineComponent/index.scss @@ -9,25 +9,26 @@ right: calc(50% - 2px); width: 4px; height: 100%; + border-radius: 10px; } .timeline-item:nth-child(odd) { - align-self: flex-end; - justify-content: flex-start; - padding-right: 30px; - padding-left: 0px; + align-self: flex-start; + justify-content: flex-end; + padding-right: 0px; + padding-left: 30px; } .timeline-item-content::after { content: ""; background-color: #fff; - box-shadow: -1px 1px 1px rgba(0, 0, 0.2); + box-shadow: 1px -1px 1px #d6d6d6; width: 15px; height: 15px; position: absolute; transform: rotate(45deg); - left: -7.5px; - top: calc(50% - 7.5px); + right: -7.5px; + top: calc(50% - 5px); } .timeline-item:nth-child(odd) .timeline-item-content { @@ -36,9 +37,9 @@ } .timeline-item:nth-child(odd) .timeline-item-content::after { - box-shadow: 1px -1px 1px rgba(0, 0, 0.2); - left: auto; - right: -7.5px; + box-shadow: -1px 1px 1px #d6d6d6; + right: auto; + left: -7.5px; } .timeline-item-content .circle { @@ -49,13 +50,13 @@ height: 20px; position: absolute; top: calc(50% - 10px); - left: -40px; + right: -41px; z-index: 100; } .timeline-item:nth-child(odd) .timeline-item-content .circle { - left: auto; - right: -40px; + right: auto; + left: -41px; } @media only screen and (max-width: 767px) {