update

src/App.js

@@ -74,7 +74,7 @@ function App() {
         {/* <BookDesign /> */}
         {/* <ButtonDesign /> */}
         {/* <ProductTags /> */}
-        {/* <CounterDesign /> */}
+        <CounterDesign />
         {/* <BlogDesign1 /> */}
         {/* <BlogDesign2 /> */}
         {/* <BlogDesign3 /> */}
@@ -85,10 +85,10 @@ function App() {
         {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
-        {/* <Feedback /> */}
+        <Feedback />
         {/* <Alert /> */}
         {/* <Toast /> */}
-        {/* <ProductSuggestion /> */}
+        <ProductSuggestion />
         {/* <ProductImage /> */}
         {/* <ProductTab /> */}
         {/* <ProductStatusCard /> */}

src/components/PopupCard/index.js

@@ -4,7 +4,7 @@ import "./index.scss";
 import cancleIcon from "./cancle-icon.svg";
 import calender from "./calender.svg";
 
-const PopupCard = () => {
+const PopupCard = ({ textArea }) => {
   const [activeInput, setActiveInput] = useState(false);
 
   return (
@@ -78,30 +78,25 @@ const PopupCard = () => {
               {/* middle */}
               <div className="flex">
                 {/* right */}
-                <textarea
-                  class="resize-y relative w-1/2 border-2 rounded-md text-sm border-[#06BACE]
+                <div className="flex flex-col">
+                  <span
+                    class="resize-y relative w-1/2 h-fit p-4 text-justify border-2 rounded-md text-sm border-[#06BACE]
                 focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                ></textarea>
-                <span
-                  className={`absolute right-20 -mt-2 text-[#06BACE] bg-white text-xs px-2 font-bold`}
-                >
-                  نام کارت
-                </span>
-                {/* divider */}
-                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
-                {/* left */}
-                <div date-rangepicker className="flex items-center w-1/2">
-                  <div className="relative w-full">
-                    <img src={calender} className="absolute top-3 left-2" />
-                    <input
-                      name="start"
-                      type="text"
-                      className="w-full border-2 border-blue-400 rounded-md text-sm h-12
-                    focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                      placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
-                    />
+                  >
+                    {textArea}
+                  </span>
+                  <span
+                    className={`absolute right-20 -mt-2 text-[#06BACE] bg-white text-xs px-2 font-bold`}
+                  >
+                    نام کارت
+                  </span>
+                  <div className="my-5">
+                    <input type="checkbox" />
+                    <span className="text-sm mr-2">چک لیست ها</span>
                   </div>
                 </div>
+                {/* divider */}
+                <div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
               </div>
             </div>
           </div>
@@ -112,3 +107,8 @@ const PopupCard = () => {
 };
 
 export default PopupCard;
+
+PopupCard.defaultProps = {
+  textArea:
+    "جنگ اول خلیج فارس، جنگی به رهبری آمریکا و با همکاری ائتلافی از ۳۵ کشور مختلف بود که علیه عراق بعثی در واکنش به اشغال کویت توسط عراق انجام گرفت پایان جنگ ایران و عراق هم ‌زمان با بروز تشنّج عراق و کویت بود. ارتش عراق در زمان حکومت صدام حسین و حزب بعث عراق د",
+};