style: adjust form input responsive layout
This commit is contained in:
parent
c8eb618a3a
commit
eb5b2e6a02
|
|
@ -42,8 +42,8 @@ export default function AnalysisClient() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="flex w-full gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="w-1/2">
|
<div className="w-full">
|
||||||
<label className="block mb-1 text-sm font-medium text-gray-700">
|
<label className="block mb-1 text-sm font-medium text-gray-700">
|
||||||
Pilih Profesi
|
Pilih Profesi
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -53,7 +53,7 @@ export default function AnalysisClient() {
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<Select onValueChange={field.onChange} value={field.value}>
|
<Select onValueChange={field.onChange} value={field.value}>
|
||||||
<SelectTrigger
|
<SelectTrigger
|
||||||
className={`w-full ${errors.profession ? "border-red-500" : ""}`}
|
className={`w-full ${errors.profession ? "border-sentiment-negative" : ""}`}
|
||||||
>
|
>
|
||||||
<SelectValue placeholder="Pilih Profesi" />
|
<SelectValue placeholder="Pilih Profesi" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
|
|
@ -75,130 +75,95 @@ export default function AnalysisClient() {
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{errors.profession && (
|
{errors.profession && (
|
||||||
<p className="text-red-500 text-xs mt-1">
|
<p className="text-sentiment-negative text-xs mt-1">
|
||||||
{errors.profession.message}
|
{errors.profession.message}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-1/2">
|
<div className="w-full">
|
||||||
<label className="block mb-1 text-sm font-medium text-gray-700">
|
<label className="block mb-1 text-sm font-medium text-gray-700">
|
||||||
Tautan Produk 1
|
Tautan Produk 1
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
|
placeholder="Contoh: https://tokopedia.com/..."
|
||||||
className={`${errors.url1 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
|
className={`${errors.url1 ? "border-sentiment-negative" : "focus:ring-primary"}`}
|
||||||
{...register("url1")}
|
{...register("url1")}
|
||||||
/>
|
/>
|
||||||
{errors.url1 && (
|
{errors.url1 && (
|
||||||
<p className="text-red-500 text-xs mt-1">
|
<p className="text-sentiment-negative text-xs mt-1">
|
||||||
{errors.url1.message}
|
{errors.url1.message}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<div className="flex w-full gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="w-1/2">
|
<div className="w-full">
|
||||||
<label className="block mb-1 text-sm font-medium text-gray-700">
|
<label className="block mb-1 text-sm font-medium text-gray-700">
|
||||||
Tautan Produk 2
|
Tautan Produk 2
|
||||||
</label>
|
</label>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
|
placeholder="Contoh: https://tokopedia.com/..."
|
||||||
className={`w-full ${errors.url2 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
|
className={`w-full ${errors.url2 ? "border-sentiment-negative" : "focus:ring-primary"}`}
|
||||||
{...register("url2")}
|
{...register("url2")}
|
||||||
/>
|
/>
|
||||||
{errors.url2 && (
|
{errors.url2 && (
|
||||||
<p className="text-red-500 text-xs mt-1">
|
<p className="text-sentiment-negative text-xs mt-1">
|
||||||
{errors.url2.message}
|
{errors.url2.message}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showField ? (
|
<div className="w-full flex flex-col justify-end">
|
||||||
<div className="w-1/2 animate-in fade-in slide-in-from-bottom-2 duration-300">
|
{showField ? (
|
||||||
<label className="block mb-1 text-sm font-medium text-gray-700">
|
<div className="animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||||
Tautan Produk 3
|
<label className="block mb-1 text-sm font-medium text-gray-700">
|
||||||
</label>
|
Tautan Produk 3
|
||||||
<div className="flex gap-2">
|
</label>
|
||||||
<Input
|
<div className="flex gap-2">
|
||||||
type="text"
|
<div className="flex-1">
|
||||||
placeholder="Contoh: https://www.tokopedia.com/lenovo/thinkpad-x1-carbon"
|
<Input
|
||||||
className={`w-full ${errors.url3 ? "border-red-500 focus:ring-red-500" : "focus:ring-primary"}`}
|
type="text"
|
||||||
{...register("url3")}
|
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 && (
|
{errors.url3 && (
|
||||||
<p className="text-red-500 text-xs mt-1">
|
<p className="text-sentiment-negative text-xs mt-1">
|
||||||
{errors.url3.message}
|
{errors.url3.message}
|
||||||
</p>
|
</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>
|
) : (
|
||||||
) : (
|
|
||||||
<div className="w-1/2 items-end flex">
|
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setShowField(true)}
|
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
|
+ Tambah Tautan Produk Lainnya
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!isValid || loading}
|
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" />
|
<Sparkles className="h-4 w-4" />
|
||||||
{loading ? "Menganalisis..." : "Analisis Sekarang"}
|
{loading ? "Menganalisis..." : "Analisis Sekarang"}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue