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 AnimatedProgressBar from "./components/AnimatedProgressBar";
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";
@ -134,9 +138,11 @@ function App() {
{/* <GridListTable /> */}
{/* <PopupCard /> */}
{/* <TimeLine /> */}
{/* <CardTrelloDesign /> */}
<ReligiousTimes />
<NumOfGuestsEmployees />
<CardTrelloDesign />
{/* <ReligiousTimes /> */}
{/* <DistributedData /> */}
{/* <CardDesign1 /> */}
{/* <CardDesign2 /> */}
{/* *************************************************** mini components *************************************************** */}
{/* <AnimatedProgressBar /> */}
{/* <CircleInCircle /> */}
@ -156,6 +162,8 @@ function App() {
{/* <SemiDonut /> */}
{/* <FolderTree /> */}
{/* <IndianaDragScroll /> */}
{/* <IconText /> */}
{/* <CustomToast /> */}
{/* <div className="flex">
<SidebarDesign2 className="w-1/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 ButtonNewDesign from "../ButtonNewDesign";
import Button from "../Button";
import CircleInCircle from "../CircleInCircle";
import NewTagDesign from "../NewTagDesign";
@ -9,13 +9,25 @@ import messageText from "./images/message-text.svg";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
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 (
<div className="w-3/12 mx-auto bg-white mt-10 rounded-md shadow p-3">
{/* 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"}}
>
>
{/* right */}
{circle && (
<CircleInCircle
@ -29,21 +41,20 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
)}
{/* left */}
<div className="flex flex-row gap-x-1 items-center place-content-end">
{showBtn && buttons.map(btn=> <ButtonNewDesign
bgColor={`bg-[${btn.color}]`}
bgHoverColor={"bg-transparent"}
border={"border-none"}
paddingX={"p-1"}
paddingY={"p-0.5"}
fontSize={"text-xs"}
borderRadius={"rounded-sm"}
icon={false}
text={btn.name}
/>
)}
{showEmptyCards && emptyCards.map((card,idx) => (
<div className={`w-5 h-1.5 rounded ${card.backgroundColor}`}></div>
))}
{showBtn &&
buttons.map((btn) => (
<Button
className={`${btn.className} border-none px-1 py-0.5 text-xs rounded-sm text-white`}
text={btn.name}
/>
))}
{showEmptyCards &&
emptyCards.map((card, idx) => (
<div
key={idx}
className={`w-5 h-1.5 rounded ${card.backgroundColor}`}
></div>
))}
</div>
</div>
{/* 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">
{/* right */}
<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>
{/* left */}
<div className="flex flex-row items-center gap-x-1">
{/* comment Icon */}
{commnets && (
<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">
<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>
</div>
</div>
)}
{showTag && tags.map(tag =>
{showTag &&
tags.map((tag) => (
<NewTagDesign
title={tag.title}
align={"flex-row-reverse"}
titleColor={`text-[${tag.color}]`}
tagBgColor={`bg-[${tag.bgColor}]`}
border={"border-none"}
borderRadius={"rounded-sm"}
iconWidth={"w-4"}
marginRight="mr-0"
marginLeft="ml-1"
icon={tag.icon}
paddingY={"p-1"}
paddingX={"p-1"}
/>
)}
title={tag.title}
align={"flex-row-reverse"}
titleColor={`text-[${tag.color}]`}
tagBgColor={`bg-[${tag.backgroundColor}]`}
border={"border-none"}
borderRadius={"rounded-sm"}
iconWidth={"w-4"}
marginRight="mr-0"
marginLeft="ml-1"
icon={tag.icon}
paddingY={"p-1"}
paddingX={"p-1"}
/>
))}
</div>
</div>
{/* 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>
);
};
@ -106,45 +133,44 @@ CardTrelloDesign.defaultProps = {
buttons: [
{
name: "رابط کاربری",
color: "#FF0A3A"
className: "bg-[#0000ff55]",
},
{
name: "فرانت اند",
color: "#0AABFF"
className: "bg-[#00ff00]",
},
{
name: "بک اند",
color: "#C7FF0A"
}
className: "bg-[#ff0000]",
},
],
showTag:true,
showTag: true,
tags: [
{
title:"29 فروردین",
title: "29 فروردین",
color: "#007987",
bgColor: "#06BACE33",
icon: clock
backgroundColor: "#06BACE33",
icon: clock,
},
{
title:"12 از 13",
color: "#FFB300",
bgColor: "#FFAA0033",
icon: nike
title: "12 از 13",
color: "#FFAA00",
backgroundColor: "#FFAA0033",
icon: nike,
},
],
showEmptyCards:false,
showEmptyCards: false,
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";
const NumOfGuestsEmployees = ({ items }) => {
const DistributedData = ({ items }) => {
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) => (
<div
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>
<span
className={` ${items ? "mt-0" : "mt-2"} ${
className={` ${
item.remaining ? "text-[#E16524]" : "text-[#2483E1]"
}`}
>
@ -32,9 +32,9 @@ const NumOfGuestsEmployees = ({ items }) => {
);
};
export default NumOfGuestsEmployees;
export default DistributedData;
NumOfGuestsEmployees.defaultProps = {
DistributedData.defaultProps = {
items1: [
[
{

@ -99,10 +99,10 @@ const FileManager = () => {
</div>
{/* left Section */}
<div className="w-3/12 py-5 flex flex-col">
<TitleSubtitle subTitleShow={false} />
<TitleSubtitle subTitle={false} />
<SemiDonut />
<div className="px-4" style={{ marginTop: "-113px" }}>
<TitleSubtitle subTitleShow={false} />
<TitleSubtitle subTitle={false} />
<div className="flex flex-col items-center justify-center">
{/* {[0, 1, 2].map((item, index) => (
<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: "کتاب",
align: "flex-row",
titleColor: "text-blue-600",
tagBgColor: "bg-blue-300 bg-opacity-10",
tagBgColor: "bg-blue-300",
border: "border-2",
borderRadius: "rounded-full",
tagBorderColor: "border-blue-600",

@ -6,9 +6,9 @@ import profilePic3 from "./images/profilePic3.svg";
import profilePic4 from "./images/profilePic4.svg";
import profilePic5 from "./images/profilePic5.svg";
const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
const ProfilePicNextToEachOther = ({ users, num, marginLeft, width }) => {
return (
<div className="flex">
<div className="flex cursor-pointer">
{users.slice(0, num).map((user, i) => (
<div className="flex flex-row items-center">
<img
@ -18,13 +18,13 @@ const ProfilePicNextToEachOther = ({ users,num,marginLeft,width }) => {
alt="profile-pic"
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">
+ {users.length - (num)}
+ {users.length - num}
</div>
)}
</div>
))}
))}
</div>
);
};

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

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

Loading…
Cancel
Save