master
mahdi andalib 3 years ago
parent b814d25939
commit 937a511e19
  1. BIN
      build.zip
  2. 6
      src/App.js
  3. 4
      src/components/PopupCard/index.js
  4. 2
      src/components/SearchBox/index.js
  5. 35
      src/components/TimeLine/TimeLineItem.js
  6. 15
      src/components/TimeLine/Timeline.js
  7. 31
      src/components/TimeLine/data.js
  8. 7
      src/components/TimeLine/gray-search-icon.svg
  9. 21
      src/components/TimeLine/index.js
  10. 84
      src/components/TimeLine/index.scss

Binary file not shown.

@ -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() {
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
<CourseChapter />
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */}
@ -121,6 +123,7 @@ function App() {
{/* <BreadCrumb /> */}
{/* <SearchBox /> */}
{/* <FileManager /> */}
{/* <TitleSubtitle /> */}
{/* <Playlist /> */}
{/* <Folderlists /> */}
{/* <Blogs /> */}
@ -134,6 +137,7 @@ function App() {
{/* <FolderTree /> */}
{/* <GridListTable /> */}
<PopupCard />
<TimeLine />
{/* <SidebarDesign2 className="w-1/5" /> */}
</div>
</Provider>

@ -18,6 +18,10 @@ const PopupCard = ({ selectedChecklist }) => {
return (
<section className="">
<p>
به دایره های ابی وقتی که پاپ اپ باز میشود لطفا نگاه نکنید مربوط به تسک
بعدی است
</p>
<button
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"

@ -13,7 +13,7 @@ const SearchBox = ({
}) => {
const [activeSearchBox, setActiveSearchBox] = useState(false);
return (
<div className="flex flex-row-reverse items-center relative ml-2 ">
<div className={`flex flex-row-reverse items-center relative ml-2`}>
{activeSearchBox && (
<img
src={cancleIcon}

@ -0,0 +1,35 @@
import "./index.scss";
const TimeLineItem = ({ data }) => (
<div
className="timeline-item flex flex-row mt-5 w-1/2 justify-end"
style={{ paddingLeft: "30px" }}
>
<div
className="timeline-item-content relative bg-white rounded shadow-md flex flex-col items-end border border-[#D6D6D6] "
style={{ maxWidth: "70%", width: "400px" }}
>
<div className="flex flex-row-reverse gap-x-2 p-3">
<time className="text-xs text-[#0A7C9F]">{data.date}</time>
<span className="text-xs text-[#0A7C9F]"> - </span>
<time className="text-xs text-[#0A7C9F]">{data.time}</time>{" "}
</div>
{/* <div className="flex flex-row-reverse items-center justify-between w-full">
<div className="bg-[#D4E6FF] w-10 h-10 rounded-full">
<div className="bg-[#D4E6FF99] w-10 h-10 rounded-full"></div>
</div>
</div> */}
<div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center">
<p className="text-right text-sm font-bold text-[#00253A]">
{data.text}
</p>
</div>
<p className="text-xs text-justify px-4 text-[#00253A99] text-light leading-6">
{data.content}
</p>
<span className="circle"></span>
</div>
</div>
);
export default TimeLineItem;

@ -0,0 +1,15 @@
import React from "react";
import timeLineData from "./data.js";
import TimeLineItem from "./TimeLineItem.js";
const TimeLine = () =>
timeLineData.length > 0 && (
<div className="timeline-container flex flex-col relative bg-white">
{timeLineData.slice(0, 3).map((data, idx) => (
<TimeLineItem data={data} key={idx} />
))}
</div>
);
export default TimeLine;

@ -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;

@ -0,0 +1,7 @@
<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="26.075" height="26.075" viewBox="0 0 26.075 26.075">
<g id="search-normal">
<path id="Vector" d="M20.642,10.321A10.321,10.321,0,1,1,10.321,0,10.321,10.321,0,0,1,20.642,10.321Z" transform="translate(2.173 2.173)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M2.173,2.173,0,0" transform="translate(21.729 21.729)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H26.075V26.075H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 742 B

@ -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 (
<div className="px-10 py-4 mx-auto ">
<div className="flex flex-row items-center justify-between">
<TitleSubtitle />
<SearchBox inputWidth={"100%"} searchIcon={search} borderClr="#ddd" />
</div>
<Timeline />
</div>
);
};
export default TimeLine;

@ -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;
}
}
Loading…
Cancel
Save