update 7 files and delete 1 file

master
Your Name 2 years ago
parent 43550749f7
commit f3b3cd67df
  1. 16
      src/App.js
  2. 24
      src/components/Button/index.js
  3. 7
      src/components/CardDesign2/index.js
  4. 138
      src/components/CardTrelloDesign/index.js
  5. 30
      src/components/CustomToast/index.js
  6. 10
      src/components/CustomToast/pen-icon.svg
  7. 10
      src/components/DistributedData/index.js
  8. 4
      src/components/FileManager/index.js
  9. 23
      src/components/IconText/index.js
  10. 6
      src/components/IconText/info-icon.svg
  11. 2
      src/components/NewTagDesign/index.js
  12. 10
      src/components/ProfilePicNextToEachOther/index.js
  13. 6
      src/components/ReactTable5/index.js
  14. 31
      src/components/TitleSubtitle/index.js

@ -77,7 +77,11 @@ import CircleInCircle from "./components/CircleInCircle";
import NewTagDesign from "./components/NewTagDesign"; import NewTagDesign from "./components/NewTagDesign";
import AnimatedProgressBar from "./components/AnimatedProgressBar"; import AnimatedProgressBar from "./components/AnimatedProgressBar";
import ReligiousTimes from "./components/ReligiousTimes"; import ReligiousTimes from "./components/ReligiousTimes";
import NumOfGuestsEmployees from "./components/NumOfGuestsEmployees"; import DistributedData from "./components/DistributedData";
import CardDesign1 from "./components/CardDesign1";
import CustomToast from "./components/CustomToast";
import IconText from "./components/IconText";
import CardDesign2 from "./components/CardDesign2";
// import Digikala from "./components/Digikala/ImageSlider"; // import Digikala from "./components/Digikala/ImageSlider";
@ -134,9 +138,11 @@ function App() {
{/* <GridListTable /> */} {/* <GridListTable /> */}
{/* <PopupCard /> */} {/* <PopupCard /> */}
{/* <TimeLine /> */} {/* <TimeLine /> */}
{/* <CardTrelloDesign /> */} <CardTrelloDesign />
<ReligiousTimes /> {/* <ReligiousTimes /> */}
<NumOfGuestsEmployees /> {/* <DistributedData /> */}
{/* <CardDesign1 /> */}
{/* <CardDesign2 /> */}
{/* *************************************************** mini components *************************************************** */} {/* *************************************************** mini components *************************************************** */}
{/* <AnimatedProgressBar /> */} {/* <AnimatedProgressBar /> */}
{/* <CircleInCircle /> */} {/* <CircleInCircle /> */}
@ -156,6 +162,8 @@ function App() {
{/* <SemiDonut /> */} {/* <SemiDonut /> */}
{/* <FolderTree /> */} {/* <FolderTree /> */}
{/* <IndianaDragScroll /> */} {/* <IndianaDragScroll /> */}
{/* <IconText /> */}
{/* <CustomToast /> */}
{/* <div className="flex"> {/* <div className="flex">
<SidebarDesign2 className="w-1/5" /> <SidebarDesign2 className="w-1/5" />
<span className="w-4/5 "> <span className="w-4/5 ">

@ -0,0 +1,24 @@
import React from "react";
const Button = ({ className, iconClassName, icon, text, onClick }) => {
return (
<button
onClick={onClick}
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${className}`}
>
{text}
{icon && (
<span className={`rounded-full ${iconClassName}}`}>
<img src={icon} alt="" className="w-full" />
</span>
)}
</button>
);
};
export default Button;
Button.defaultProps = {
className:
"bg-darkGreenBg hover:bg-gray-900 textColor border border-lightBlueBorderColor border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
iconClassName: "bg-darkGreenBg mr-2",
text: "اطلاعات بیشتر",
};

@ -0,0 +1,7 @@
import React from "react";
const CardDesign2 = () => {
return <div>CardDesign2</div>;
};
export default CardDesign2;

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import ButtonNewDesign from "../ButtonNewDesign"; import Button from "../Button";
import CircleInCircle from "../CircleInCircle"; import CircleInCircle from "../CircleInCircle";
import NewTagDesign from "../NewTagDesign"; import NewTagDesign from "../NewTagDesign";
@ -9,13 +9,25 @@ import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther"; import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
import AnimatedProgressBar from "../AnimatedProgressBar"; import AnimatedProgressBar from "../AnimatedProgressBar";
const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCards,showEmptyCards }) => { const CardTrelloDesign = ({
circle,
commnets,
buttons,
tags,
showBtn,
showTag,
emptyCards,
showEmptyCards,
}) => {
return ( return (
<div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3"> <div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
{/* top */} {/* top */}
<div className={`flex justify-between items-center ${circle === false ? "flex-row-reverse" : "flex-row"}`} <div
className={`flex justify-between items-center ${
circle === false ? "flex-row-reverse" : "flex-row"
}`}
// style={{direction: circle === false ? "ltr" : "rtl"}} // style={{direction: circle === false ? "ltr" : "rtl"}}
> >
{/* right */} {/* right */}
{circle && ( {circle && (
<CircleInCircle <CircleInCircle
@ -29,21 +41,20 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
)} )}
{/* left */} {/* left */}
<div className="flex flex-row gap-x-1 items-center place-content-end"> <div className="flex flex-row gap-x-1 items-center place-content-end">
{showBtn && buttons.map(btn=> <ButtonNewDesign {showBtn &&
bgColor={`bg-[${btn.color}]`} buttons.map((btn) => (
bgHoverColor={"bg-transparent"} <Button
border={"border-none"} className={`${btn.className} border-none px-1 py-0.5 text-xs rounded-sm text-white`}
paddingX={"p-1"} text={btn.name}
paddingY={"p-0.5"} />
fontSize={"text-xs"} ))}
borderRadius={"rounded-sm"} {showEmptyCards &&
icon={false} emptyCards.map((card, idx) => (
text={btn.name} <div
/> key={idx}
)} className={`w-5 h-1.5 rounded ${card.backgroundColor}`}
{showEmptyCards && emptyCards.map((card,idx) => ( ></div>
<div className={`w-5 h-1.5 rounded ${card.backgroundColor}`}></div> ))}
))}
</div> </div>
</div> </div>
{/* middle */} {/* middle */}
@ -58,40 +69,56 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
<div className="flex flex-row justify-between items-center mt-3"> <div className="flex flex-row justify-between items-center mt-3">
{/* right */} {/* right */}
<div className="flex flex-row items-center gap-x-1"> <div className="flex flex-row items-center gap-x-1">
<ProfilePicNextToEachOther num={3} marginLeft={"3px"} width={"w-10"} /> <ProfilePicNextToEachOther
num={3}
marginLeft={"3px"}
width={"w-10"}
/>
</div> </div>
{/* left */} {/* left */}
<div className="flex flex-row items-center gap-x-1"> <div className="flex flex-row items-center gap-x-1">
{/* comment Icon */} {/* comment Icon */}
{commnets && ( {commnets && (
<div class="flex flex-row items-center ml-1"> <div class="flex flex-row items-center ml-1">
<span className="text-xs ml-0.5 text-[10px] text-[#707070]">10</span> <span className="text-xs ml-0.5 text-[10px] text-[#707070]">
10
</span>
<div className="relative"> <div className="relative">
<img src={messageText} alt="comment-icon" class="w-5 rounded-full" /> <img
src={messageText}
alt="comment-icon"
class="w-5 rounded-full"
/>
<span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-2 border-white bg-[#0AABFF] rounded-full"></span> <span class="absolute bottom-3 right-3 w-2.5 h-2.5 border-2 border-white bg-[#0AABFF] rounded-full"></span>
</div> </div>
</div> </div>
)} )}
{showTag && tags.map(tag => {showTag &&
tags.map((tag) => (
<NewTagDesign <NewTagDesign
title={tag.title} title={tag.title}
align={"flex-row-reverse"} align={"flex-row-reverse"}
titleColor={`text-[${tag.color}]`} titleColor={`text-[${tag.color}]`}
tagBgColor={`bg-[${tag.bgColor}]`} tagBgColor={`bg-[${tag.backgroundColor}]`}
border={"border-none"} border={"border-none"}
borderRadius={"rounded-sm"} borderRadius={"rounded-sm"}
iconWidth={"w-4"} iconWidth={"w-4"}
marginRight="mr-0" marginRight="mr-0"
marginLeft="ml-1" marginLeft="ml-1"
icon={tag.icon} icon={tag.icon}
paddingY={"p-1"} paddingY={"p-1"}
paddingX={"p-1"} paddingX={"p-1"}
/> />
)} ))}
</div> </div>
</div> </div>
{/* progressBar */} {/* progressBar */}
<AnimatedProgressBar rangeWidth={"39%"} parentBg={"bg-[#E3E3E3]"} childBg={"bg-[#06BACE]"} /> <AnimatedProgressBar
rangeWidth={"39%"}
parentBg={"bg-[#E3E3E3]"}
childBg={"bg-[#06BACE]"}
/>
{/* <div className="hidden bg-[#0000ff] bg-[#00ff00] bg-[#ff0000] "></div> */}
</div> </div>
); );
}; };
@ -106,45 +133,44 @@ CardTrelloDesign.defaultProps = {
buttons: [ buttons: [
{ {
name: "رابط کاربری", name: "رابط کاربری",
color: "#FF0A3A" className: "bg-[#0000ff55]",
}, },
{ {
name: "فرانت اند", name: "فرانت اند",
color: "#0AABFF" className: "bg-[#00ff00]",
}, },
{ {
name: "بک اند", name: "بک اند",
color: "#C7FF0A" className: "bg-[#ff0000]",
} },
], ],
showTag:true, showTag: true,
tags: [ tags: [
{ {
title:"29 فروردین", title: "29 فروردین",
color: "#007987", color: "#007987",
bgColor: "#06BACE33", backgroundColor: "#06BACE33",
icon: clock icon: clock,
}, },
{ {
title:"12 از 13", title: "12 از 13",
color: "#FFB300", color: "#FFAA00",
bgColor: "#FFAA0033", backgroundColor: "#FFAA0033",
icon: nike icon: nike,
}, },
], ],
showEmptyCards:false, showEmptyCards: false,
emptyCards: [ emptyCards: [
{ {
backgroundColor: "bg-[#FF0A3C]" backgroundColor: "bg-[#FF0A3C]",
}, },
{ {
backgroundColor: "bg-[#0AABFF]" backgroundColor: "bg-[#0AABFF]",
}, },
{ {
backgroundColor: "bg-[#C7FF0A]" backgroundColor: "bg-[#C7FF0A]",
}, },
] ],
}; };

@ -0,0 +1,30 @@
import React from "react";
import penIcon from "./pen-icon.svg";
const CustomToast = ({
backgroundColor,
borderColor,
textColor,
padding,
icon,
}) => {
return (
<div
className={`flex flex-row items-center border-2 rounded mt-4 font-bold text-sm ${backgroundColor} ${borderColor} ${textColor} ${padding} `}
>
<p className="flex-1">ترسیم نقشه سالن</p>
<img src={icon} alt="pen" />
</div>
);
};
export default CustomToast;
CustomToast.defaultProps = {
backgroundColor: "bg-[#489BEC33]",
borderColor: "border-[#489BEC]",
textColor: "text-[#0555A4]",
padding: "p-4",
icon: penIcon,
};

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="vuesax_linear_path" data-name="vuesax/linear/path" transform="translate(-490 -254)">
<g id="path" transform="translate(490 254)">
<path id="Vector" d="M8.21,3.854,5.18.824C4.03-.326,2.46-.266,1.69.964L0,3.634l5.4,5.4,2.67-1.69A2.231,2.231,0,0,0,8.21,3.854Z" transform="translate(11.58 3.416)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M8.133.256,4.2.016c-2.19-.13-2.96.54-3.2,2.63l-.98,8.32a2.409,2.409,0,0,0,2.8,2.8l8.32-.98c2.09-.25,2.85-1.01,2.63-3.2l-.23-3.93" transform="translate(3.447 6.794)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,3.04,3.03,0" transform="translate(4.61 16.38)" fill="none" stroke="#0555a4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
const NumOfGuestsEmployees = ({ items }) => { const DistributedData = ({ items }) => {
return ( return (
<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"> <div className="mt-20 flex flex-col items-center gap-y-4 max-w-[500px] 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 ${
@ -18,7 +18,7 @@ const NumOfGuestsEmployees = ({ items }) => {
> >
<p className="text-[#0F0543]">{item.name}</p> <p className="text-[#0F0543]">{item.name}</p>
<span <span
className={` ${items ? "mt-0" : "mt-2"} ${ className={` ${
item.remaining ? "text-[#E16524]" : "text-[#2483E1]" item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
}`} }`}
> >
@ -32,9 +32,9 @@ const NumOfGuestsEmployees = ({ items }) => {
); );
}; };
export default NumOfGuestsEmployees; export default DistributedData;
NumOfGuestsEmployees.defaultProps = { DistributedData.defaultProps = {
items1: [ items1: [
[ [
{ {

@ -99,10 +99,10 @@ const FileManager = () => {
</div> </div>
{/* left Section */} {/* left Section */}
<div className="w-3/12 py-5 flex flex-col"> <div className="w-3/12 py-5 flex flex-col">
<TitleSubtitle subTitleShow={false} /> <TitleSubtitle subTitle={false} />
<SemiDonut /> <SemiDonut />
<div className="px-4" style={{ marginTop: "-113px" }}> <div className="px-4" style={{ marginTop: "-113px" }}>
<TitleSubtitle subTitleShow={false} /> <TitleSubtitle subTitle={false} />
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
{/* {[0, 1, 2].map((item, index) => ( {/* {[0, 1, 2].map((item, index) => (
<CardHolder /> <CardHolder />

@ -0,0 +1,23 @@
import React from "react";
import infoIcon from "./info-icon.svg";
const IconText = ({ textColor, textSize }) => {
return (
<div className="flex flex-row items-start mt-4">
<img src={infoIcon} alt="info" />
<p className={`${textColor} ${textSize} text-justify mr-3 leading-5`}>
ابتدا باید دیوار ها به صورت حدودی ترسیم شوند و تمامی نقاط به یگ دیگر وصل
شوند تا طرح برای جایگذاری وسایل آماده شود
</p>
</div>
);
};
export default IconText;
IconText.defaultProps = {
icon: infoIcon,
textColor: "text-[#2E2E2E]",
textSize: "text-xs",
};

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g id="Group_2122" data-name="Group 2122" transform="translate(-1813 -318)">
<circle id="Ellipse_2" data-name="Ellipse 2" cx="8" cy="8" r="8" transform="translate(1813 318)" fill="#489bec"/>
<text id="i" transform="translate(1822 329)" fill="#fff" font-size="9" font-family="IRANSansX-Medium, IRANSansX" font-weight="500"><tspan x="-2.241" y="0">i</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 471 B

@ -41,7 +41,7 @@ NewTagDesign.defaultProps = {
title: "کتاب", title: "کتاب",
align: "flex-row", align: "flex-row",
titleColor: "text-blue-600", titleColor: "text-blue-600",
tagBgColor: "bg-blue-300 bg-opacity-10", tagBgColor: "bg-blue-300",
border: "border-2", border: "border-2",
borderRadius: "rounded-full", borderRadius: "rounded-full",
tagBorderColor: "border-blue-600", tagBorderColor: "border-blue-600",

@ -6,9 +6,9 @@ import profilePic3 from "./images/profilePic3.svg";
import profilePic4 from "./images/profilePic4.svg"; import profilePic4 from "./images/profilePic4.svg";
import profilePic5 from "./images/profilePic5.svg"; import profilePic5 from "./images/profilePic5.svg";
const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => { const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => {
return ( return (
<div className="flex"> <div className="flex cursor-pointer">
{users.slice(0, num).map((user, i) => ( {users.slice(0, num).map((user, i) => (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img <img
@ -18,13 +18,13 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
alt="profile-pic" alt="profile-pic"
style={{ marginLeft: `${marginLeft}` }} style={{ marginLeft: `${marginLeft}` }}
/> />
{Number(i) === (num - 1) && ( {Number(i) === num - 1 && (
<div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600"> <div class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-gray-700 rounded-full hover:bg-gray-600">
+ {users.length - (num)} + {users.length - num}
</div> </div>
)} )}
</div> </div>
))} ))}
</div> </div>
); );
}; };

@ -57,9 +57,9 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
</div> </div>
))} ))}
</div> </div>
<div className=""> {/* <div className="">
<TitleSubtitle titleShow={false} subTitleShow={false} /> <TitleSubtitle title={false} subTitle={false} />
</div> </div> */}
<BasicTable <BasicTable
addTab={addTab} addTab={addTab}
tabs={tabs} tabs={tabs}

@ -1,17 +1,30 @@
import React from "react"; import React from "react";
const TitleSubtitle = ({ title, subTitle, titleShow, subTitleShow }) => { const TitleSubtitle = ({
title,
subTitle,
titleColor,
titleFontWeight,
titleFontSize,
titleDividerBgColor,
titleDividerWidth,
titleDividerHeight,
}) => {
return ( return (
<div> <div>
{/* page Title */} {/* page Title */}
{titleShow && ( {title && (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div> <div
<h2 className="text-base text-blue-900">{title}</h2> className={`rounded ml-1 ${titleDividerBgColor} ${titleDividerWidth} ${titleDividerHeight}`}
></div>
<h2 className={`${titleColor} ${titleFontWeight} ${titleFontSize}`}>
{title}
</h2>
</div> </div>
)} )}
{/* page subTitle */} {/* page subTitle */}
{subTitleShow && ( {subTitle && (
<div className="flex flex-row items-center mt-4"> <div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-xs">{subTitle}</h2> <h2 className="text-xs">{subTitle}</h2>
@ -27,6 +40,10 @@ TitleSubtitle.defaultProps = {
title: "میزان فروش محصولات", title: "میزان فروش محصولات",
subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
titleShow: true, titleColor: "text-[#233876]",
subTitleShow: true, titleFontWeight: "font-normal",
titleFontSize: "text-base",
titleDividerBgColor: "bg-blue-600",
titleDividerWidth: "w-1",
titleDividerHeight: "h-5",
}; };

Loading…
Cancel
Save