Feature: Updated suggestion model (#15)

groq · Jan 31, 2025 · d33e97b · d33e97b
1 parent 62ab83f
commit d33e97b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/public/Groq_Bolt.svg b/public/Groq_Bolt.svg
diff --git a/src/app/components/prompt-view.tsx b/src/app/components/prompt-view.tsx
@@ -10,7 +10,7 @@ import { Info, Pencil } from "lucide-react";
 import Link from "next/link";
 import toast from "react-hot-toast";
 import ModelSelector from "@/components/model-selector";
-
+import Groq_bolt from "public/groq_bolt.svg"
 import { GalleryListing } from "./gallery-listing";
 import { MAINTENANCE_GENERATION } from "@/lib/settings";
 import { MODEL_OPTIONS } from "@/data/models";
@@ -63,14 +63,15 @@ export default function PromptView() {
 
 	return (
 		<div className="flex flex-col gap-6 items-center justify-center">
-			<AppLogo className="mt-10" size={120} />
-			<div className="flex flex-col gap-3 items-center justify-center min-w-[50%] px-4 md:px-0 mt-20">
+			<AppLogo className="self-start mt-10 ml-10" size={120} />
+			<div className="flex flex-col gap-3 items-center justify-center min-w-[50%] px-4 md:px-0 mt-10">
 			<div>
 					<h1 className="text-[2em] md:text-[3em] font-montserrat text-center">
 						Build a micro-app
 					</h1>
-					<h2 className="text-[1.2em] md:text-[1.4em] font-montserrat mb-4 md:mb-8 text-center text-muted-foreground">
-						at Groq speed
+					<h2 className="text-[1.2em] md:text-[1.4em] font-montserrat mb-4 md:mb-8 text-center text-muted-foreground flex items-center justify-center gap-2">
+					at Groq speed
+						<img src="/Groq_Bolt.svg" alt="Groq Logo" className="w-8 h-8" />
 					</h2>
 				</div>
 				{MAINTENANCE_GENERATION && (
@@ -80,11 +81,10 @@ export default function PromptView() {
 					</div>
 				)}
 				<form
-					className="flex flex-col relative border-2 border-border border-solid rounded-lg p-4 w-full max-w-2xl focus-within:border-groq"
+					className="flex flex-col relative border-2 border-border border-solid rounded-lg p-4 w-full max-w-2xl focus-within:border-groq dark:border-[#666666]"
 					onSubmit={handleSubmit}
 				>
 					<textarea
-						autoFocus
 						disabled={MAINTENANCE_GENERATION}
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}

diff --git a/src/components/model-selector.tsx b/src/components/model-selector.tsx
@@ -44,31 +44,30 @@ const ModelSelector = ({ options = MODEL_OPTIONS, onChange }) => {
 
   return (
     <div ref={dropdownRef} className="relative w-full md:w-auto">
-      <button
-        type="button"
+      <div
         onClick={() => setIsOpen(!isOpen)}
-        className="flex justify-between items-center w-full md:w-[300px] px-6 py-3 bg-black text-white rounded-full border border-gray-700 hover:bg-gray-900 focus:ring-2 focus:ring-gray-600 transition-all min-w-[150px]"
+        className="flex items-center justify-end gap-2 cursor-pointer bg-transparent hover:bg-accent hover:text-accent-foreground
+rounded-lg p-2 transition-colors"
       >
-        <span className="truncate">{selectedModel}</span>
+        <span className="text-black dark:text-white text-right">{selectedModel}</span>
         <ChevronDown
-          className={`w-5 h-5 transition-transform ${
-            isOpen ? "rotate-180" : ""
-          }`}
+          className={`w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""} text-black dark:text-white`}
         />
-      </button>
+      </div>
 
       {isOpen && (
-        <ul className="absolute z-10 mt-2 w-full md:w-[300px] bg-black border border-gray-700 rounded-lg shadow-lg">
+        <ul className="absolute z-50 mt-2 w-full md:w-[300px] bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
           {options.map((option) => (
             <li
               key={option}
               onClick={() => handleSelect(option)}
-              className={`flex items-center justify-between px-6 py-3 cursor-pointer hover:bg-gray-800 transition-colors gap-4 ${
-                selectedModel === option ? "bg-gray-800 text-blue-400" : "text-white"
+              className={`flex items-center justify-between px-6 py-3 cursor-pointer hover:bg-accent hover:text-accent-foreground
+ transition-colors gap-4 ${
+                selectedModel === option ? "bg-transparent text-blue-600 dark:text-blue-400" : "text-black dark:text-white"
               }`}
             >
               <span>{option}</span>
-              {selectedModel === option && <Check className="w-4 h-4 text-blue-400" />}
+              {selectedModel === option && <Check className="w-4 h-4 text-blue-600 dark:text-blue-400" />}
             </li>
           ))}
         </ul>