update App.js, src/components/NumOfGuestsEmployees/index.js and src/components/ReligiousTimes/index.js

master
Your Name 2 years ago
parent 28822615f7
commit f2034bec89
  1. 2
      src/App.js
  2. 55
      src/components/NumOfGuestsEmployees/index.js
  3. 2
      src/components/ReligiousTimes/index.js

@ -135,7 +135,7 @@ function App() {
{/* <PopupCard /> */} {/* <PopupCard /> */}
{/* <TimeLine /> */} {/* <TimeLine /> */}
{/* <CardTrelloDesign /> */} {/* <CardTrelloDesign /> */}
{/* <ReligiousTimes /> */} <ReligiousTimes />
<NumOfGuestsEmployees /> <NumOfGuestsEmployees />
{/* *************************************************** mini components *************************************************** */} {/* *************************************************** mini components *************************************************** */}
{/* <AnimatedProgressBar /> */} {/* <AnimatedProgressBar /> */}

@ -2,7 +2,7 @@ import React from "react";
const NumOfGuestsEmployees = ({ items }) => { const NumOfGuestsEmployees = ({ items }) => {
return ( return (
<div className="mt-20 flex flex-col items-center gap-y-4 max-w-[400px] mx-auto bg-white shadow-sm rounded-lg pt-3"> <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[465px] mx-auto bg-white shadow-sm rounded-lg pt-3">
{items.map((row, index) => ( {items.map((row, index) => (
<div <div
className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${ className={`flex flex-row items-center justify-around w-full border-[#9DACD344] pb-3 ${
@ -12,17 +12,17 @@ const NumOfGuestsEmployees = ({ items }) => {
> >
{row.map((item, index) => ( {row.map((item, index) => (
<div <div
className={`flex flex-col items-center font-bold text-xs border-[#9DACD344] flex-1 ${ className={`flex items-center font-bold text-xs border-[#9DACD344] flex-1 justify-around ${
index + 1 < row.length ? "border-l" : "" index + 1 < row.length ? "border-l" : ""
}`} } ${item?.className || ""}`}
> >
<p className="text-[#0F0543]">{item.name}</p> <p className="text-[#0F0543]">{item.name}</p>
<span <span
className={` mt-2 ${ className={` ${items ? "mt-0" : "mt-2"} ${
item.remaining ? "text-[#E16524]" : "text-[#2483E1]" item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
}`} }`}
> >
{item.number} نفر {item.number}
</span> </span>
</div> </div>
))} ))}
@ -35,30 +35,63 @@ const NumOfGuestsEmployees = ({ items }) => {
export default NumOfGuestsEmployees; export default NumOfGuestsEmployees;
NumOfGuestsEmployees.defaultProps = { NumOfGuestsEmployees.defaultProps = {
items: [ items1: [
[ [
{ {
name: "تعداد کارمندان محترم", name: "تعداد کارمندان محترم",
number: "259", number: "259 نفر",
remaining: false, className: "flex-col",
}, },
{ {
name: "تعداد مهمانان محترم", name: "تعداد مهمانان محترم",
number: "569", number: "569 نفر",
remaining: false, remaining: false,
className: "flex-col",
}, },
], ],
[ [
{ {
name: "ظرفیت باقیمانده کارمندان محترم", name: "ظرفیت باقیمانده کارمندان محترم",
number: "5", number: "5 نفر",
remaining: true, remaining: true,
className: "flex-col",
}, },
{ {
name: "ظرفیت باقیمانده مهمانان محترم", name: "ظرفیت باقیمانده مهمانان محترم",
number: "6", number: "6 نفر",
remaining: true, remaining: true,
className: "flex-col",
},
],
],
items: [
[
{
name: "صبح",
number: "5:03",
},
{
name: "طلوع",
number: "6:27",
},
{
name: "ظهر",
number: "12:15",
},
{
name: "غروب",
number: "18:05",
},
{
name: "مغرب",
number: "18:23",
},
{
name: "نیمه شب",
number: "18:23",
}, },
], ],
], ],
}; };
// distributedData

@ -49,7 +49,7 @@ ReligiousTimes.defaultProps = {
}, },
{ {
partOfDay: "نیمه شب", partOfDay: "نیمه شب",
time: "23:34", time: "18:23",
}, },
], ],
}; };

Loading…
Cancel
Save