chore: add label for input numberChapters

Me-d-c-truy-n · Jun 10, 2024 · 53c60dd · 53c60dd
1 parent 424a9bf
commit 53c60dd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/src/components/Export/CustomInputNumber.tsx b/src/components/Export/CustomInputNumber.tsx
@@ -13,16 +13,27 @@ const preventMinus = (e: React.KeyboardEvent<HTMLInputElement>) => {
 
 const CustomInputNumber = ({ placeholder, value, setValue }: Props) => {
   return (
-    <input
-      type="number"
-      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-slate-950 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder={placeholder}
-      min={0}
-      onKeyPress={preventMinus}
-      value={value}
-      onChange={(e) => setValue(e.target.value)}
-      required
-    />
+    <div className="flex">
+      <label
+        id="states-button"
+        data-dropdown-toggle="dropdown-states"
+        className=" border-r-0 flex-shrink-0 z-10 inline-flex items-center p-2.5 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-slate-950 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-700"
+        htmlFor="numberChapters"
+      >
+        Số chương
+      </label>
+      <input
+        type="number"
+        id="numberChapters"
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-e-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-slate-950 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        placeholder={placeholder}
+        min={0}
+        onKeyPress={preventMinus}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        required
+      />
+    </div>
   );
 };
 

diff --git a/src/components/Filter/SelectChangeServer.tsx b/src/components/Filter/SelectChangeServer.tsx
@@ -17,7 +17,7 @@ const SelectChangeServer = ({ myServer, func }: Props) => {
           <label
             id="states-button"
             data-dropdown-toggle="dropdown-states"
-            className="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-slate-950 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-700"
+            className="flex-shrink-0 z-10 inline-flex items-center p-2.5 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-s-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-slate-950 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:text-white dark:border-gray-700"
             htmlFor="states"
           >
             Nguồn
@@ -27,7 +27,7 @@ const SelectChangeServer = ({ myServer, func }: Props) => {
             value={myServer}
             onChange={(e) => func(e.target.value)}
             id="states"
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-e-lg border-s-gray-100 dark:border-s-gray-900 border-s-2 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-900 dark:border-gray-800 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            className="bg-gray-50 border border-l-0 border-gray-300 text-gray-900 text-sm rounded-e-lg border-s-gray-100 dark:border-s-gray-900 border-s-2 focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-900 dark:border-gray-800 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           >
             {listServer.map((srv) => (
               <option value={srv} key={srv}>