From eb5b2e6a02e09b1d6e32191cc5658189ee9f07cb Mon Sep 17 00:00:00 2001
From: Mahen <mahennekkers27@gmail.com>
Date: Tue, 24 Feb 2026 21:58:51 +0700
Subject: [PATCH] style: adjust form input responsive layout

---
 src/components/dashboards/AnalysisClient.tsx | 121 +++++++------------
 1 file changed, 43 insertions(+), 78 deletions(-)

diff --git a/src/components/dashboards/AnalysisClient.tsx b/src/components/dashboards/AnalysisClient.tsx
index 664e576..063afbb 100644
--- a/src/components/dashboards/AnalysisClient.tsx
+++ b/src/components/dashboards/AnalysisClient.tsx
@@ -42,8 +42,8 @@ export default function AnalysisClient() {
         </div>
 
         <div className="flex flex-col gap-4">
-          <div className="flex w-full gap-4">
-            <div className="w-1/2">
+          <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">
                 Pilih Profesi
               </label>
@@ -53,7 +53,7 @@ export default function AnalysisClient() {
                 render={({ field }) => (
                   <Select onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger
-                      className={`w-full ${errors.profession ? "border-red-500" : ""}`}
+                      className={`w-full ${errors.profession ? "border-sentiment-negative" : ""}`}
                     >
                       <SelectValue placeholder="Pilih Profesi" />
                     </SelectTrigger>
@@ -75,130 +75,95 @@ export default function AnalysisClient() {
                 )}
               />
               {errors.profession && (
-                <p className="text-red-500 text-xs mt-1">
+                <p className="text-sentiment-negative text-xs mt-1">
                   {errors.profession.message}
                 </p>
               )}
             </div>
 
-            <div className="w-1/2">
+            <div className="w-full">
               <label className="block mb-1 text-sm font-medium text-gray-700">
                 Tautan Produk 1
               </label>
               <Input
                 type="text"
-                placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
-                className={`${errors.url1 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
+                placeholder="Contoh: https://tokopedia.com/..."
+                className={`${errors.url1 ? "border-sentiment-negative" : "focus:ring-primary"}`}
                 {...register("url1")}
               />
               {errors.url1 && (
-                <p className="text-red-500 text-xs mt-1">
+                <p className="text-sentiment-negative text-xs mt-1">
                   {errors.url1.message}
                 </p>
               )}
             </div>
-
-            {/* Field Merek Laptop (Sekarang bernama preferredBrand) */}
-            {/* <div className="w-1/2">
-              <label className="block mb-1 text-sm font-medium text-gray-700">
-                Pilih Merek
-              </label>
-              <Controller
-                name="brands"
-                control={control}
-                render={({ field }) => (
-                  <Select onValueChange={field.onChange} value={field.value}>
-                    <SelectTrigger
-                      className={`w-full ${errors.brands ? "border-red-500" : ""}`}
-                    >
-                      <SelectValue placeholder="Pilih Merek Laptop" />
-                    </SelectTrigger>
-                    <SelectContent className="bg-card" position="popper">
-                      {brandItems.map((item) => (
-                        <SelectItem key={item.value} value={item.value}>
-                          <div className="flex gap-2 items-center">
-                            <item.icon className="h-4 w-4" />
-                            <span>{item.label}</span>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-              />
-              {errors.brands && (
-                <p className="text-red-500 text-xs mt-1">
-                  {errors.brands.message}
-                </p>
-              )}
-            </div> */}
           </div>
 
-          <div className="flex w-full gap-4">
-            <div className="w-1/2">
+          <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
               </label>
               <Input
                 type="text"
-                placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
-                className={`w-full ${errors.url2 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
+                placeholder="Contoh: https://tokopedia.com/..."
+                className={`w-full ${errors.url2 ? "border-sentiment-negative" : "focus:ring-primary"}`}
                 {...register("url2")}
               />
               {errors.url2 && (
-                <p className="text-red-500 text-xs mt-1">
+                <p className="text-sentiment-negative text-xs mt-1">
                   {errors.url2.message}
                 </p>
               )}
             </div>
 
-            {showField ? (
-              <div className="w-1/2 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
-                </label>
-                <div className="flex gap-2">
-                  <Input
-                    type="text"
-                    placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
-                    className={`w-full ${errors.url3 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
-                    {...register("url3")}
-                  />
+            <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
+                  </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")}
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={() => setShowField(false)}
+                      className="text-sentiment-negative hover:text-sentiment-negative hover:bg-sentiment-negative-light shrink-0"
+                    >
+                      ✕
+                    </Button>
+                  </div>
                   {errors.url3 && (
-                    <p className="text-red-500 text-xs mt-1">
+                    <p className="text-sentiment-negative text-xs mt-1">
                       {errors.url3.message}
                     </p>
                   )}
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    onClick={() => {
-                      setShowField(false);
-                    }}
-                    className="text-red-500 hover:text-red-700 hover:bg-red-50 shrink-0"
-                  >
-                    ✕
-                  </Button>
                 </div>
-              </div>
-            ) : (
-              <div className="w-1/2 items-end flex">
+              ) : (
                 <Button
                   type="button"
                   onClick={() => setShowField(true)}
-                  className="w-full bg-card text-primary hover:bg-[#F8FBFF] border-dashed border border-primary/20 transition-all shadow-xs"
+                  className="w-full h-10 bg-card text-primary hover:bg-[#F8FBFF] border-dashed border border-primary/20 transition-all shadow-xs"
                 >
                   + Tambah Tautan Produk Lainnya
                 </Button>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </div>
 
         <Button
           type="submit"
           disabled={!isValid || loading}
-          className="bg-primary text-white px-6 py-3 mt-6 rounded-md transition-colors disabled:bg-gray-400"
+          className="w-full md:w-max bg-primary text-white px-6 py-3 mt-6 rounded-md transition-colors disabled:bg-gray-400"
         >
           <Sparkles className="h-4 w-4" />
           {loading ? "Menganalisis..." : "Analisis Sekarang"}