feat: responsive

libs/ui/src/atoms/input/input.tsx

@@ -11,6 +11,7 @@ import { Button } from '../button';
 
 type TInputType = 'text' | 'email' | 'password' | 'file';
 type TInputSize = 'sm' | 'md' | 'lg';
+type Width = 'standard' | 'custom'
 
 type TInputProps = Omit<
   DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
@@ -18,6 +19,7 @@ type TInputProps = Omit<
 > & {
   type?: TInputType;
   size?: TInputSize;
+  widthform?: Width;
   disabled?: boolean;
 };
 
@@ -34,6 +36,7 @@ export const Input: FC<TInputProps> = ({
   type = 'text',
   size = 'md',
   placeholder = 'Placeholder',
+  widthform='standard',
   disabled,
   className,
   ...rest
@@ -45,7 +48,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
+    `px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree ${widthform === "standard" ? "min-w-70" : ""}`,
     sizeClasses[size].textSize,
     disabled && disabledClass,
     className

libs/ui/src/organisms/auth-banner/auth-banner.tsx

@@ -5,7 +5,7 @@ import { FC, ReactElement } from "react";
 
 function AuthBanner({text, href}: {text: string, href: string}){
     return (
-        <div className='relative rounded-md'>
+        <div className='hidden xl:block relative rounded-md'>
           <img src="/image/95319c4f9953dfe6180200e529dfcea5.webp" alt="Banner" className='w-[420px] h-[632px] object-[80%] object-cover rounded-lg' />
           <div className='absolute top-0 bg-gradient-to-b from-primary-500 to-transparent w-full rounded-t-lg h-[163px] py-5 px-5'>
             <Button variant='secondary' className='gap-2' onClick={() => document.location.href = `${href}`}>