diff --git a/src/App.js b/src/App.js index 575006d..103afff 100644 --- a/src/App.js +++ b/src/App.js @@ -95,6 +95,7 @@ import CustomToast2 from "./components/CustomToast2"; import ContactUsInfoCard from "./components/ContactUsInfoCard"; import RoomCardInfo from "./components/RoomCardInfo"; import FormInput from "./components/FormInput"; +import OutlineTextarea from "./components/OutlineTextarea"; function App() { return ( @@ -203,6 +204,7 @@ function App() { {/* ----------------------------$$$ start---------------------------- */} {/* */} + {/* */} {/* */} {/* */} {/* ----------------------------$$$ end---------------------------- */} diff --git a/src/components/AnimatedInput/Input.js b/src/components/AnimatedInput/Input.js index f48e46a..313ad65 100644 --- a/src/components/AnimatedInput/Input.js +++ b/src/components/AnimatedInput/Input.js @@ -1,7 +1,4 @@ -import React from "react"; - -import { useState } from "react"; - +import React, { useState } from "react"; import fixNumbers from "./fixNumbers"; const Input = ({ @@ -18,6 +15,7 @@ const Input = ({ min, register, onClick, + icon, }) => { const [value, setValue] = useState(defaultValue); console.log(value); @@ -25,9 +23,9 @@ const Input = ({
setValue(e.target.value)} > {value} )} + {icon && calender}
); }; @@ -78,6 +79,7 @@ export default Input; Input.defaultProps = { inputClassname: "", - placeholderClass: "text-red-600", + placeholderClass: "text-[#bdc3c7]", activePlaceholderClass: "text-blue-600 bg-white", + icon: false, }; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index b178964..d0913c9 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -1,5 +1,12 @@ import React from "react"; -const Button = ({ className, iconClassName, icon, text, onClick }) => { +const Button = ({ + className, + iconClassName, + iconHolderClassName, + icon, + text, + onClick, +}) => { return ( @@ -19,6 +26,7 @@ export default Button; Button.defaultProps = { className: "bg-red-400 text-white hover:bg-gray-900 border border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4", - iconClassName: "bg-darkGreenBg mr-2", + iconHolderClassName: "bg-darkGreenBg mr-2", + iconClassName: "w-4", text: "اطلاعات بیشتر", }; diff --git a/src/components/CancleIcon/index.js b/src/components/CancleIcon/index.js index 4a8510c..6237ae9 100644 --- a/src/components/CancleIcon/index.js +++ b/src/components/CancleIcon/index.js @@ -9,7 +9,7 @@ const CancleIcon = ({ backgroundColor, icon }) => { data-modal-toggle="defaultModal" className={`p-2 cursor-pointer rounded ${backgroundColor}`} > - + cancel-icon
); }; diff --git a/src/components/PopupCard/index.js b/src/components/PopupCard/index.js index e9ef929..ab0a90c 100644 --- a/src/components/PopupCard/index.js +++ b/src/components/PopupCard/index.js @@ -4,20 +4,19 @@ import React, { useState } from "react"; import { useForm } from "react-hook-form"; import Input from "../AnimatedInput/Input"; - import CancleIcon from "../CancleIcon"; +import Button from "../Button"; +import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther"; +import TitleSubtitle from "../TitleSubtitle"; -import cancleIcon from "./cancle-icon.svg"; import calender from "./calender.svg"; +import cancleIcon from "./cancle-icon.svg"; + import documentCloud from "./document-cloud.svg"; -import plus from "./plus.svg"; -import OutlineInput from "../OutlineInput"; -import OutlineTextarea from "../OutlineTextarea"; -import ButtonNewDesign from "../ButtonNewDesign"; -import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther"; +import plus from "./plus.svg"; -const PopupCard = ({ selectedChecklist }) => { +const PopupCard = ({ selectedChecklist, buttons }) => { // const [activeInput, setActiveInput] = useState(false); const [checklist, setChecklist] = useState(0); @@ -48,37 +47,44 @@ const PopupCard = ({ selectedChecklist }) => { {/* modalBody */}
{/* top */} -
+
{/* right */} -
+
{/* left */} -
+
{/* divider */} -
+
{/* middle */} -
+
{/* right */} -
- +
{/* checkLIst input field */} @@ -103,7 +109,14 @@ const PopupCard = ({ selectedChecklist }) => { %
- + {" "} {selectedChecklist.slice(0, 3).map((item, index) => (
{ ))}
- {/* divider */} -
{/* left */} -
- - افراد عضو این کارت - -
+
+ +
-
{/* divider */} -
- - لیبل های کارت - -
- - - -
-
+ +
+ {buttons.map((btn) => ( +
+ ))}
{/* divider */}
@@ -239,6 +212,26 @@ PopupCard.defaultProps = { title: "خرید شماره 3", }, ], + + buttons: [ + { + name: "برنامه نویس اندروید", + className: "bg-[#08E678]", + }, + { + name: "رابط کاربری", + className: "bg-[#1100FF]", + }, + { + name: "فرایند قانونگذاری", + className: "bg-[#FFE600]", + }, + { + name: null, + className: "bg-[#dddddd]", + icon: calender, + }, + ], }; { diff --git a/src/components/TitleSubtitle/index.js b/src/components/TitleSubtitle/index.js index a3cb737..e73427d 100644 --- a/src/components/TitleSubtitle/index.js +++ b/src/components/TitleSubtitle/index.js @@ -5,21 +5,23 @@ const TitleSubtitle = ({ subTitle, titleClassName, titleBorderClassName, + subtitleClassName, + subtitleBorderClassName, }) => { return (
{/* page Title */} {title && ( -
+
-

{title}

+

{title}

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

{subTitle}

+
+
+

{subTitle}

)}
@@ -33,4 +35,7 @@ TitleSubtitle.defaultProps = { subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", titleClassName: "text-base font-normal text-[#233876]", titleBorderClassName: "w-1 h-5 bg-blue-600 ml-1", + + subtitleClassName: "text-gray-900", + subtitleBorderClassName: "w-1 h-5 bg-gray-400", };