mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi andalib 3 years ago
parent 49fead0ab1
commit b74b529b38
4 changed files with 183 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

10
src/App.js
Unescape View File

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

32
src/components/TimeLineComponent/TimeLineItem.js
Unescape View File

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

2
src/components/TimeLineComponent/Timeline.js
Unescape View File

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

144
src/components/TimeLineComponent/data.js
Unescape View File

@ -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,
},
], ],
}, },
{ {

Write Preview
Loading…
Cancel
Save