add advanced settings

components/input-generation.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
-import { useRef, useState } from "react";
-import { HiLightBulb } from "react-icons/hi";
+import { useRef } from "react";
+import { HiLightBulb, HiSearch } from "react-icons/hi";
 
 interface Props {
   prompt: string;
@@ -36,7 +36,7 @@ export const InputGeneration: React.FC<Props> = ({
       <button
         disabled={!prompt}
         className={classNames(
-          "bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-4 py-2 text-base transition-all duration-200",
+          "bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-2 lg:px-4 py-2 text-base transition-all duration-200",
           {
             "animate-pulse": loading,
           }
@@ -46,7 +46,10 @@ export const InputGeneration: React.FC<Props> = ({
           onSubmit();
         }}
       >
-        {loading ? "Generating..." : "Generate"}
+        <span className="hidden lg:block">
+          {loading ? "Generating..." : "Generate"}
+        </span>
+        <HiSearch className="w-5 h-5 lg:hidden" />
       </button>
     </div>
   );

components/main/index.tsx

@@ -33,7 +33,7 @@ export const Main = () => {
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
-          <div className="flex items-center justify-start gap-3 w-full">
+          <div className="flex items-center justify-start gap-3 w-full flex-col lg:flex-row">
             <InputGeneration
               prompt={prompt}
               onChange={setPrompt}
@@ -41,14 +41,14 @@ export const Main = () => {
               loading={loading}
             />
             <p
-              className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer"
+              className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-2 lg:mt-0"
               onClick={() => setAdvancedSettings(!advancedSettings)}
             >
               <HiAdjustmentsHorizontal className="w-5 h-5" />
               Advanced settings
             </p>
           </div>
-          <div className="flex items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0">
+          <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
             {categories.map(({ key, label, icon }) => (
               <Button
                 key={key}