master
mahdi andalib 3 years ago
parent 49fead0ab1
commit b74b529b38
  1. 10
      src/App.js
  2. 42
      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 TimeLine from "./components/TimeLineComponent/Timeline";
import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther";
// import Digikala from "./components/Digikala/ImageSlider";
@ -96,7 +97,7 @@ function App() {
{/* <Feedback /> */}
{/* <Alert /> */}
{/* <Toast /> */}
{/* <ProductSuggestion /> */}
<ProductSuggestion />
<ProductImage />
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
@ -123,7 +124,7 @@ function App() {
<FooterDesign1 />
</span>
</div> */}
{/* <BreadCrumb /> */}
<BreadCrumb />
{/* <SearchBox /> */}
{/* <FileManager /> */}
{/* <TitleSubtitle /> */}
@ -136,12 +137,13 @@ function App() {
{/* <OutlineInput /> */}
{/* <ButtonNewDesign /> */}
{/* <CancleIcon /> */}
<ProfilePicNextToEachOther />
{/* <SemiDonut /> */}
{/* <FolderTree /> */}
{/* <GridListTable /> */}
{/* <PopupCard /> */}
<PopupCard />
<TimeLine />
{/* <TimeLineComponent /> */}
<TimeLineComponent />
{/* <SidebarDesign2 className="w-1/5" /> */}
</div>

@ -7,7 +7,7 @@ const TimeLineItem = ({ data }) => (
>
<div
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 */}
<div className="flex flex-row-reverse p-3 self-end">
@ -28,15 +28,37 @@ const TimeLineItem = ({ data }) => (
{/* divider */}
<div className="border border-[#F3F3F3] w-11/12 mt-4 mx-auto"></div>
{/* bottom --> users */}
<div className="flex flex-row items-center self-start px-4 py-2">
{data.users.map((user, index) => (
<div key={index} className="flex flex-row items-center">
<p className="mr-1 text-sm text-[#00253A]">
{user.name + " " + user.lname}
</p>
{"،"}
</div>
))}
<div className="flex flex-row justify-between px-4 py-2 w-full">
<div className="flex flex-row items-center">
{data.users.slice(0, 3).map((user, index) => (
<div key={index} className="flex flex-row items-center">
<p className="mr-1 text-xs text-[#00253A]">
{user.name + " " + user.lname}
</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>
{/* 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>
<span className="circle"></span>
</div>

@ -6,7 +6,7 @@ import TimeLineItem from "./TimeLineItem.js";
const TimeLine = () =>
timeLineData.length > 0 && (
<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} />
))}
</div>

@ -21,6 +21,150 @@ const data = [
lname: "قلی نژاد",
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