update App.js, src/components/CurrentTime/index.js, src/components/DistributedData/index.js and src/components/UserProfileInfo/index.js

master
mahdi 2 years ago
parent 38c1e0cadf
commit 2e4c131c71
  1. 2
      src/App.js
  2. 20
      src/components/DistributedData/index.js
  3. 23
      src/components/UserProfileInfo/index.js

@ -140,7 +140,7 @@ function App() {
{/* <PopupCard /> */} {/* <PopupCard /> */}
{/* <TimeLineComponent /> */} {/* <TimeLineComponent /> */}
{/* <CardTrelloDesign /> */} {/* <CardTrelloDesign /> */}
{/* <ReligiousTimes /> */} <ReligiousTimes />
<DistributedData /> <DistributedData />
{/* <CardDesign1 /> */} {/* <CardDesign1 /> */}
{/* <CardDesign2 /> */} {/* <CardDesign2 /> */}

@ -2,7 +2,7 @@ import React from "react";
const DistributedData = ({ items }) => { const DistributedData = ({ 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-[550px] 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 ${
@ -16,14 +16,16 @@ const DistributedData = ({ items }) => {
index + 1 < row.length ? "border-l" : "" index + 1 < row.length ? "border-l" : ""
} ${item?.className || ""}`} } ${item?.className || ""}`}
> >
<p className="text-[#0F0543]">{item.name}</p> {item.name && <p className="text-[#0F0543]">{item.name}</p>}
<span {item.number && (
className={` ${ <span
item.remaining ? "text-[#E16524]" : "text-[#2483E1]" className={` ${
}`} item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
> }`}
{item.number} >
</span> {item.number}
</span>
)}
</div> </div>
))} ))}
</div> </div>

@ -6,10 +6,27 @@ import DateTime from "../DateTime";
const UserProfileInfo = () => { const UserProfileInfo = () => {
return ( return (
<DistributedData <div className="flex flex-row items-center bg-red-50 w-fit">
items={[[{ name: <DateTime /> }, { name: <ProfileInfo /> }]]} <DateTime />{" "}
/> <div
className="w-0.5 bg-[#9DACD344] mx-2"
style={{ height: "54px" }}
></div>
<ProfileInfo />
</div>
); );
}; };
export default UserProfileInfo; export default UserProfileInfo;
// <DistributedData
// items={[
// [
// {
// name: <DateTime />,
// number: null,
// },
// { name: <ProfileInfo />, number: null },
// ],
// ]}
// />

Loading…
Cancel
Save