diff --git a/src/App.js b/src/App.js index 813d59b..3f666ee 100644 --- a/src/App.js +++ b/src/App.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() { {/* */} {/* */} {/* */} - {/* */} - - + + {/* */} + {/* */} + {/* */} + {/* */} {/* *************************************************** mini components *************************************************** */} {/* */} {/* */} @@ -156,6 +162,8 @@ function App() { {/* */} {/* */} {/* */} + {/* */} + {/* */} {/*
diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 0000000..ae38dc3 --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1,24 @@ +import React from "react"; +const Button = ({ className, iconClassName, icon, text, onClick }) => { + return ( + + ); +}; + +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: "اطلاعات بیشتر", +}; diff --git a/src/components/CardDesign2/index.js b/src/components/CardDesign2/index.js new file mode 100644 index 0000000..76b8901 --- /dev/null +++ b/src/components/CardDesign2/index.js @@ -0,0 +1,7 @@ +import React from "react"; + +const CardDesign2 = () => { + return
CardDesign2
; +}; + +export default CardDesign2; diff --git a/src/components/CardTrelloDesign/index.js b/src/components/CardTrelloDesign/index.js index 50a9edc..d9d9431 100644 --- a/src/components/CardTrelloDesign/index.js +++ b/src/components/CardTrelloDesign/index.js @@ -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 (
{/* top */} -
+ > {/* right */} {circle && ( - {showBtn && buttons.map(btn=> - )} - {showEmptyCards && emptyCards.map((card,idx) => ( -
- ))} + {showBtn && + buttons.map((btn) => ( +
{/* middle */} @@ -58,40 +69,56 @@ const CardTrelloDesign = ({ circle,commnets,buttons,tags,showBtn,showTag,emptyCa
{/* right */}
- +
{/* left */}
{/* comment Icon */} {commnets && (
- 10 + + 10 +
- comment-icon + comment-icon
)} - {showTag && tags.map(tag => + {showTag && + tags.map((tag) => ( - )} + 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"} + /> + ))}
{/* progressBar */} - + + {/*
*/}
); }; @@ -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]", }, - ] - + ], }; diff --git a/src/components/CustomToast/index.js b/src/components/CustomToast/index.js new file mode 100644 index 0000000..27f5869 --- /dev/null +++ b/src/components/CustomToast/index.js @@ -0,0 +1,30 @@ +import React from "react"; + +import penIcon from "./pen-icon.svg"; + +const CustomToast = ({ + backgroundColor, + borderColor, + textColor, + padding, + icon, +}) => { + return ( +
+

ترسیم نقشه سالن

+ pen +
+ ); +}; + +export default CustomToast; + +CustomToast.defaultProps = { + backgroundColor: "bg-[#489BEC33]", + borderColor: "border-[#489BEC]", + textColor: "text-[#0555A4]", + padding: "p-4", + icon: penIcon, +}; diff --git a/src/components/CustomToast/pen-icon.svg b/src/components/CustomToast/pen-icon.svg new file mode 100644 index 0000000..a49016c --- /dev/null +++ b/src/components/CustomToast/pen-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/NumOfGuestsEmployees/index.js b/src/components/DistributedData/index.js similarity index 89% rename from src/components/NumOfGuestsEmployees/index.js rename to src/components/DistributedData/index.js index 5a6b020..14d8c55 100644 --- a/src/components/NumOfGuestsEmployees/index.js +++ b/src/components/DistributedData/index.js @@ -1,8 +1,8 @@ import React from "react"; -const NumOfGuestsEmployees = ({ items }) => { +const DistributedData = ({ items }) => { return ( -
+
{items.map((row, index) => (
{ >

{item.name}

@@ -32,9 +32,9 @@ const NumOfGuestsEmployees = ({ items }) => { ); }; -export default NumOfGuestsEmployees; +export default DistributedData; -NumOfGuestsEmployees.defaultProps = { +DistributedData.defaultProps = { items1: [ [ { diff --git a/src/components/FileManager/index.js b/src/components/FileManager/index.js index de0533e..61c4d82 100644 --- a/src/components/FileManager/index.js +++ b/src/components/FileManager/index.js @@ -99,10 +99,10 @@ const FileManager = () => {
{/* left Section */}
- +
- +
{/* {[0, 1, 2].map((item, index) => ( diff --git a/src/components/IconText/index.js b/src/components/IconText/index.js new file mode 100644 index 0000000..a432a17 --- /dev/null +++ b/src/components/IconText/index.js @@ -0,0 +1,23 @@ +import React from "react"; + +import infoIcon from "./info-icon.svg"; + +const IconText = ({ textColor, textSize }) => { + return ( +
+ info +

+ ابتدا باید دیوار ها به صورت حدودی ترسیم شوند و تمامی نقاط به یگ دیگر وصل + شوند تا طرح برای جایگذاری وسایل آماده شود +

+
+ ); +}; + +export default IconText; + +IconText.defaultProps = { + icon: infoIcon, + textColor: "text-[#2E2E2E]", + textSize: "text-xs", +}; diff --git a/src/components/IconText/info-icon.svg b/src/components/IconText/info-icon.svg new file mode 100644 index 0000000..639a202 --- /dev/null +++ b/src/components/IconText/info-icon.svg @@ -0,0 +1,6 @@ + + + + i + + diff --git a/src/components/NewTagDesign/index.js b/src/components/NewTagDesign/index.js index d8392fa..f9fe8a1 100644 --- a/src/components/NewTagDesign/index.js +++ b/src/components/NewTagDesign/index.js @@ -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", diff --git a/src/components/ProfilePicNextToEachOther/index.js b/src/components/ProfilePicNextToEachOther/index.js index f54eca2..ab4c03d 100644 --- a/src/components/ProfilePicNextToEachOther/index.js +++ b/src/components/ProfilePicNextToEachOther/index.js @@ -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 ( -
+
{users.slice(0, num).map((user, i) => (
{ alt="profile-pic" style={{ marginLeft: `${marginLeft}` }} /> - {Number(i) === (num - 1) && ( + {Number(i) === num - 1 && (
- + {users.length - (num)} + + {users.length - num}
)}
- ))} + ))}
); }; diff --git a/src/components/ReactTable5/index.js b/src/components/ReactTable5/index.js index 67c71ef..f055ec0 100644 --- a/src/components/ReactTable5/index.js +++ b/src/components/ReactTable5/index.js @@ -57,9 +57,9 @@ const ReactTable5 = ({ breadCrumbs, breadCrumb }) => {
))}
-
- -
+ {/*
+ +
*/} { +const TitleSubtitle = ({ + title, + subTitle, + titleColor, + titleFontWeight, + titleFontSize, + titleDividerBgColor, + titleDividerWidth, + titleDividerHeight, +}) => { return (
{/* page Title */} - {titleShow && ( + {title && (
-
-

{title}

+
+

+ {title} +

)} {/* page subTitle */} - {subTitleShow && ( + {subTitle && (

{subTitle}

@@ -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", };