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 &&
}
);
};
@@ -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}`}
>
-
+
);
};
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 */}
-
+
- {/* 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 && (
-
+
)}
{/* page 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",
};