use storage for the ask-ai landing

components/ask-ai/ask-ai-landing.tsx

@@ -1,25 +1,32 @@
 "use client";
 import { ArrowUp } from "lucide-react";
 import { useState } from "react";
-import { useInterval, useLocalStorage } from "react-use";
+import { useLocalStorage, useMount } from "react-use";
 import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
 import { ProviderType } from "@/lib/type";
 import { Models } from "./models";
-import { MODELS } from "@/lib/providers";
+import { DEFAULT_MODEL } from "@/lib/providers";
 import { cn } from "@/lib/utils";
-import { AiLoading } from "./loading";
-import { EXAMPLES_OF_PROJECT_SUGGESTIONS } from "@/lib/prompts";
 
 export function AskAiLanding({ className }: { className?: string }) {
-  const [model, setModel] = useState<string>(MODELS[0].value);
+  const [model = DEFAULT_MODEL, setModel] = useLocalStorage<string>(
+    "deepsite-model",
+    DEFAULT_MODEL
+  );
   const [provider, setProvider] = useLocalStorage<ProviderType>(
-    "provider",
+    "deepsite-provider",
     "auto" as ProviderType
   );
   const router = useRouter();
   const [prompt, setPrompt] = useState<string>("");
+  const [mounted, setMounted] = useState<boolean>(false);
+
+  useMount(() => {
+    setMounted(true);
+  });
+
   return (
     <div
       className={cn(
@@ -42,12 +49,14 @@ export function AskAiLanding({ className }: { className?: string }) {
       />
       <footer className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Models
-            model={model}
-            setModel={setModel}
-            provider={provider as ProviderType}
-            setProvider={setProvider}
-          />
+          {mounted && (
+            <Models
+              model={model}
+              setModel={setModel}
+              provider={provider as ProviderType}
+              setProvider={setProvider}
+            />
+          )}
         </div>
         <div>
           <Button

components/chat/index.tsx

@@ -147,7 +147,7 @@ export function AppEditorChat({
                       }
 
                       return (
-                        <code className="font-mono bg-indigo-500/10 text-indigo-500 text-[10px] px-1.5 py-0.5 rounded-md">
+                        <code className="font-mono bg-primary/10 text-primary text-[10px] px-1.5 py-0.5 rounded-md">
                           {children}
                         </code>
                       );

components/projects/project-card.tsx

@@ -1,10 +1,23 @@
 import { SpaceEntry } from "@huggingface/hub";
 
+// from-red-500 to-red-500
+// from-yellow-500 to-yellow-500
+// from-green-500 to-green-500
+// from-purple-500 to-purple-500
+// from-blue-500 to-blue-500
+// from-pink-500 to-pink-500
+// from-gray-500 to-gray-500
+// from-indigo-500 to-indigo-500
+
 export function ProjectCard({ project }: { project: SpaceEntry }) {
   return (
     <a href={`/deepsite/${project.name}`}>
       <div className="flex items-center justify-start gap-3 border-2 border-background ring-[1px] ring-border rounded-lg overflow-hidden transition-all hover:bg-accent">
-        <div className="size-10 bg-linear-to-br flex items-center justify-center text-lg from-blue-500 to-purple-500">
+        <div
+          className={`size-10 bg-linear-to-br flex items-center justify-center text-lg from-${
+            project?.cardData?.colorFrom || "blue"
+          }-500 to-${project?.cardData?.colorTo || "purple"}-500`}
+        >
           {project?.cardData?.emoji || "🚀"}
         </div>
         <div className="flex flex-col p-0">