master
mahdi andalib 3 years ago
parent 49fead0ab1
commit b74b529b38
  1. 10
      src/App.js
  2. 32
      src/components/TimeLineComponent/TimeLineItem.js
  3. 2
      src/components/TimeLineComponent/Timeline.js
  4. 144
      src/components/TimeLineComponent/data.js

@ -68,6 +68,7 @@ import TimeLineComponent from "./components/TimeLineComponent";
import TitleSubtitle from "./components/TitleSubtitle"; import TitleSubtitle from "./components/TitleSubtitle";
import TimeLine from "./components/TimeLineComponent/Timeline"; import TimeLine from "./components/TimeLineComponent/Timeline";
import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther";
// import Digikala from "./components/Digikala/ImageSlider"; // import Digikala from "./components/Digikala/ImageSlider";
@ -96,7 +97,7 @@ function App() {
{/* <Feedback /> */} {/* <Feedback /> */}
{/* <Alert /> */} {/* <Alert /> */}
{/* <Toast /> */} {/* <Toast /> */}
{/* <ProductSuggestion /> */} <ProductSuggestion />
<ProductImage /> <ProductImage />
{/* <ProductTab /> */} {/* <ProductTab /> */}
{/* <ProductStatusCard /> */} {/* <ProductStatusCard /> */}
@ -123,7 +124,7 @@ function App() {
<FooterDesign1 /> <FooterDesign1 />
</span> </span>
</div> */} </div> */}
{/* <BreadCrumb /> */} <BreadCrumb />
{/* <SearchBox /> */} {/* <SearchBox /> */}
{/* <FileManager /> */} {/* <FileManager /> */}
{/* <TitleSubtitle /> */} {/* <TitleSubtitle /> */}
@ -136,12 +137,13 @@ function App() {
{/* <OutlineInput /> */} {/* <OutlineInput /> */}
{/* <ButtonNewDesign /> */} {/* <ButtonNewDesign /> */}
{/* <CancleIcon /> */} {/* <CancleIcon /> */}
<ProfilePicNextToEachOther />
{/* <SemiDonut /> */} {/* <SemiDonut /> */}
{/* <FolderTree /> */} {/* <FolderTree /> */}
{/* <GridListTable /> */} {/* <GridListTable /> */}
{/* <PopupCard /> */} <PopupCard />
<TimeLine /> <TimeLine />
{/* <TimeLineComponent /> */} <TimeLineComponent />
{/* <SidebarDesign2 className="w-1/5" /> */} {/* <SidebarDesign2 className="w-1/5" /> */}
</div> </div>

@ -7,7 +7,7 @@ const TimeLineItem = ({ data }) => (
> >
<div <div
className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] " className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] "
style={{ maxWidth: "70%", width: "400px" }} style={{ maxWidth: "100%", width: "400px" }}
> >
{/* top --> time & date */} {/* top --> time & date */}
<div className="flex flex-row-reverse p-3 self-end"> <div className="flex flex-row-reverse p-3 self-end">
@ -28,16 +28,38 @@ const TimeLineItem = ({ data }) => (
{/* divider */} {/* divider */}
<div className="border border-[#F3F3F3] w-11/12 mt-4 mx-auto"></div> <div className="border border-[#F3F3F3] w-11/12 mt-4 mx-auto"></div>
{/* bottom --> users */} {/* bottom --> users */}
<div className="flex flex-row items-center self-start px-4 py-2"> <div className="flex flex-row justify-between px-4 py-2 w-full">
{data.users.map((user, index) => ( <div className="flex flex-row items-center">
{data.users.slice(0, 3).map((user, index) => (
<div key={index} className="flex flex-row items-center"> <div key={index} className="flex flex-row items-center">
<p className="mr-1 text-sm text-[#00253A]"> <p className="mr-1 text-xs text-[#00253A]">
{user.name + " " + user.lname} {user.name + " " + user.lname}
</p> </p>
{"،"} {Number(index) >= 2 ? (
<p className=" text-xs mx-1 text-[#00253A]">و</p>
) : (
<p className=" text-xs text-[#00253A]">،</p>
)}
{Number(index) === 2 && (
<p className=" text-xs text-[#00253A]">
{data.users.length - 2}+ نفر دیگه
</p>
)}
</div>
))}
</div> </div>
{/* profilePic */}
<div className="flex flex-row items-center">
{data.users.slice(0, 3).map((user, i) => (
<img
key={i}
src={user.profilePic}
className="w-10"
style={{ marginLeft: "-10px" }}
/>
))} ))}
</div> </div>
</div>
<span className="circle"></span> <span className="circle"></span>
</div> </div>
</div> </div>

@ -6,7 +6,7 @@ import TimeLineItem from "./TimeLineItem.js";
const TimeLine = () => const TimeLine = () =>
timeLineData.length > 0 && ( timeLineData.length > 0 && (
<div className="timeline-container flex flex-col relative my-10"> <div className="timeline-container flex flex-col relative my-10">
{timeLineData.slice(0, 3).map((data, idx) => ( {timeLineData.slice(0, 6).map((data, idx) => (
<TimeLineItem data={data} key={idx} /> <TimeLineItem data={data} key={idx} />
))} ))}
</div> </div>

@ -21,6 +21,150 @@ const data = [
lname: "قلی نژاد", lname: "قلی نژاد",
profilePic: profilePic1, profilePic: profilePic1,
}, },
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
],
},
{
date: "1395/12/28",
time: " 12:30",
text: "انجام عملیات بازگردانی و ذخیره سازی2",
content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`,
users: [
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
],
},
{
date: "1400/12/28",
time: " 14:30",
text: "انجام عملیات بازگردانی و ذخیره سازی",
content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`,
users: [
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
],
},
{
date: "1395/12/28",
time: " 12:30",
text: "انجام عملیات بازگردانی و ذخیره سازی2",
content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`,
users: [
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
],
},
{
date: "1400/12/28",
time: " 14:30",
text: "انجام عملیات بازگردانی و ذخیره سازی",
content: `
جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت
پایان جنگ ایران و عراق هم زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق در تاریخ ۱۱ مرداد ۱۳۶۹ (۱۹۹۰ م) به کویت حمله و این کشور را اشغال کرد. عراق با این حمله باعث بروز بحرانی بینالمللی گردید
`,
users: [
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
{
name: "علی",
lname: "علوی",
profilePic: profilePic2,
},
{
name: "غلام",
lname: "قلی نژاد",
profilePic: profilePic1,
},
], ],
}, },
{ {

Loading…
Cancel
Save