style: add url input & form analyze layout adjustment

src/app/validation/analyze.schema.ts

@@ -1,25 +1,8 @@
 import z from "zod";
 
-// const brandEnum = z.enum([
-//   "APPLE",
-//   "ASUS",
-//   "ACER",
-//   "LENOVO",
-//   "HP",
-//   "DELL",
-//   "MSI",
-//   "AXIOO",
-//   "ADVAN",
-//   "ZYREX",
-//   "OTHER",
-// ]);
-
-// cony
-
 export const analyzeSchema = z.object({
-  // profession: professionEnum,
-  //   brands: brandEnum,
   url1: z.string().min(10, "Tautan 1 minimal 10 karakter"),
   url2: z.string().min(10, "Tautan 2 minimal 10 karakter"),
-  url3: z.string().optional().or(z.literal("")),
+  url3: z.string().min(10, "Tautan 3 minimal 10 karakter"),
+  url4: z.string().optional().or(z.literal("")),
 });

src/components/dashboards/AnalysisClient.tsx

@@ -8,15 +8,15 @@ import ResultSection from "./ResultSection";
 
 export default function AnalysisClient() {
   const {
-    register,
-    handleSubmit,
-    onSubmit,
     errors,
     isValid,
     loading,
     result,
     showField,
     resultRef,
+    register,
+    handleSubmit,
+    onSubmit,
     setShowField,
   } = useAnalyseText();
 
@@ -87,9 +87,6 @@ export default function AnalysisClient() {
                 </p>
               )}
             </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div className="w-full">
               <label className="block mb-1 text-sm font-medium text-gray-700">
                 Tautan Produk 2
@@ -106,20 +103,39 @@ export default function AnalysisClient() {
                 </p>
               )}
             </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="w-full">
+              <label className="block mb-1 text-sm font-medium text-gray-700">
+                Tautan Produk 3
+              </label>
+              <Input
+                type="text"
+                placeholder="Contoh: https://tokopedia.com/..."
+                className={`w-full ${errors.url3 ? "border-sentiment-negative" : "focus:ring-primary"}`}
+                {...register("url3")}
+              />
+              {errors.url3 && (
+                <p className="text-sentiment-negative text-xs mt-1">
+                  {errors.url3.message}
+                </p>
+              )}
+            </div>
 
             <div className="w-full flex flex-col justify-end">
               {showField ? (
                 <div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
                   <label className="block mb-1 text-sm font-medium text-gray-700">
-                    Tautan Produk 3
+                    Tautan Produk 4
                   </label>
                   <div className="flex gap-2">
                     <div className="flex-1">
                       <Input
                         type="text"
                         placeholder="Contoh: https://tokopedia.com/..."
-                        className={`${errors.url3 ? "border-sentiment-negative" : "focus:ring-primary"}`}
-                        {...register("url3")}
+                        className={`${errors.url4 ? "border-sentiment-negative" : "focus:ring-primary"}`}
+                        {...register("url4")}
                       />
                     </div>
                     <Button
@@ -131,9 +147,9 @@ export default function AnalysisClient() {
                       ✕
                     </Button>
                   </div>
-                  {errors.url3 && (
+                  {errors.url4 && (
                     <p className="text-sentiment-negative text-xs mt-1">
-                      {errors.url3.message}
+                      {errors.url4.message}
                     </p>
                   )}
                 </div>
@@ -141,7 +157,7 @@ export default function AnalysisClient() {
                 <Button
                   type="button"
                   onClick={() => setShowField(true)}
-                  className="w-full h-10 bg-card text-primary hover:bg-[#F8FBFF] border-dashed border border-primary/20 transition-all shadow-xs"
+                  className="w-full h-max bg-card text-primary hover:bg-[#F8FBFF] border-dashed border border-primary/20 transition-all shadow-xs"
                 >
                   + Tambah Tautan Produk Lainnya
                 </Button>

src/hooks/useAnalyzeText.ts

@@ -33,6 +33,7 @@ export const useAnalyseText = () => {
       url1: "",
       url2: "",
       url3: "",
+      url4: "",
     },
   });
 
@@ -104,10 +105,10 @@ export const useAnalyseText = () => {
     }
 
     setLoading(true);
-    setResult(null); 
+    setResult(null);
 
     try {
-      const urlsToScrape = [data.url1, data.url2, data.url3].filter(
+      const urlsToScrape = [data.url1, data.url2, data.url3, data.url4].filter(
         (url) => url && url.trim() !== "",
       ) as string[];
 
@@ -157,16 +158,16 @@ export const useAnalyseText = () => {
 
   return {
     control,
-    register,
-    handleSubmit,
-    setValue,
-    onSubmit,
     errors,
     isValid,
     loading,
     result,
     showField,
     resultRef,
+    register,
+    handleSubmit,
+    setValue,
+    onSubmit,
     setShowField,
   };
 };