یه دیفالت پراپس درست کردم که اول زمان انتخاب استان و شهر اول این ۲ گزینه را ببینه کاربر

|44

public/index.html

@@ -8,7 +8,11 @@
     <meta name="description" content="فروشگاه کتاب کمک آموزشی دانوین" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
     <script>
-      window.t = (x) => x;
+      const words = new Set();
+      window.t = (x) => {
+        words.add(x);
+        return x;
+      };
     </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/components/Select/index.js

@@ -11,6 +11,7 @@ function Select({
   name,
   defaultValue,
   width = "w-1/2",
+  selectProvince,
 }) {
   console.log({ options });
   return (
@@ -22,6 +23,11 @@ function Select({
         onChange={(e) => onChange(name, e.target.value)}
         defaultValue={defaultValue}
       >
+        {selectProvince && (
+          <option value="" disabled selected hidden>
+            {selectProvince}
+          </option>
+        )}
         {options.map((option, index) => (
           <option
             key={index}
@@ -50,4 +56,6 @@ export default Select;
 Select.defaultProps = {
   options: ["Really", "Option 2", "Option 3"],
   borderColor: "border-gray-300",
+
+  selectProvince: false,
 };

src/views/Address/index.js

@@ -523,6 +523,7 @@ export const Address = ({
 
         <div className="flex flex-col lg:flex-row items-center gap-3 lg:gap-5 w-full">
           <Select
+            selectProvince={"استان"}
             options={provinces.map((e) => ({ value: e.id, name: e.name }))}
             name="provinceId"
             defaultValue={
@@ -546,6 +547,7 @@ export const Address = ({
           {!cityLoading ? (
             // <div>fdfds</div>
             <Select
+              selectProvince={"شهر"}
               options={cities.map((e) => ({ value: e.id, name: e.name }))}
               name="cityId"
               defaultValue={
@@ -579,7 +581,6 @@ export const Address = ({
             </div>
           )}
         </div>
-
         <Input
           width={isMobile ? "100%" : "50%"}
           label={window.t("کد پستی")}
@@ -599,7 +600,6 @@ export const Address = ({
           direction="ltr"
           maxLength={10}
         />
-
         <div
           className={`flex ${
             profilePage ? "mt-10" : "lg:hidden"