From 53c60dd88b99a44fc5d2afc35e18989005a776a9 Mon Sep 17 00:00:00 2001
From: 21120447 <haonhat2729@gmail.com>
Date: Mon, 10 Jun 2024 21:24:26 +0700
Subject: [PATCH] chore: add label for input numberChapters

---
 src/components/Export/CustomInputNumber.tsx  | 31 +++++++++++++-------
 src/components/Filter/SelectChangeServer.tsx |  4 +--
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/Export/CustomInputNumber.tsx b/src/components/Export/CustomInputNumber.tsx
index 1f4c950..b4d972f 100644
--- 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
index d983dd6..5e9d9f7 100644
--- 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}>