wip

components/api-key-modal.tsx

@@ -1,58 +1,58 @@
-"use client";
+"use client"
 
-import type React from "react";
+import type React from "react"
-import { useState, useEffect } from "react";
+import { useState, useEffect } from "react"
-import { Key, ExternalLink, ArrowRight, X } from "lucide-react";
+import { Key, ExternalLink, ArrowRight, X } from "lucide-react"
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
-import { TOGETHER_LINK } from "@/lib/utils";
+import { TOGETHER_LINK } from "@/lib/utils"
-import { useApiKey } from "@/hooks/use-api-key";
+import { useApiKey } from "@/hooks/use-api-key"
 
 interface ApiKeyModalProps {
-  isOpen: boolean;
+  isOpen: boolean
-  onClose: () => void;
+  onClose: () => void
-  onSubmit: (key: string) => void;
+  onSubmit: (key: string) => void
 }
 
 export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
-  const [apiKeyInput, setApiKeyInput] = useState("");
+  const [apiKeyInput, setApiKeyInput] = useState("")
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
-  const [existingKey, setApiKey] = useApiKey();
+  const [existingKey, setApiKey] = useApiKey()
 
   useEffect(() => {
     if (isOpen) {
       setApiKeyInput((current) => {
         if (existingKey && current === "") {
-          return existingKey;
+          return existingKey
         }
-        return current;
+        return current
-      });
+      })
     }
-  }, [isOpen, existingKey]);
+  }, [isOpen, existingKey])
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+    e.preventDefault()
-    if (!apiKeyInput.trim()) return;
+    if (!apiKeyInput.trim()) return
 
-    setIsLoading(true);
+    setIsLoading(true)
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await new Promise((resolve) => setTimeout(resolve, 500))
-    setIsLoading(false);
+    setIsLoading(false)
-    onSubmit(apiKeyInput.trim());
+    onSubmit(apiKeyInput.trim())
-    setApiKeyInput("");
+    setApiKeyInput("")
-  };
+  }
 
   const handleDelete = () => {
-    setApiKey(null);
+    setApiKey(null)
-    setApiKeyInput("");
+    setApiKeyInput("")
-    onClose();
+    onClose()
-  };
+  }
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
@@ -70,11 +70,11 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
               : "Add your API key to continue"}
           </DialogTitle>
 
-           <DialogDescription className="text-center text-muted-foreground">
+          <DialogDescription className="text-center text-muted-foreground">
-             {existingKey
+            {existingKey
-               ? "Update your Together API key or add a new one. You can also delete your existing key."
+              ? "Update your Together API key or add a new one. You can also delete your existing key."
-                : "You've used all your weekly credits! Add your Together API key for unlimited generation."}
+              : "You've used all your weekly credits! Add your Together API key for unlimited generation."}
-           </DialogDescription>
+          </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4 mt-4">
@@ -105,7 +105,7 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
             rel="noopener noreferrer"
             className="text-sm text-indigo hover:text-indigo-light flex items-center gap-1.5 transition-colors"
           >
-            Get your free API key
+            Get your Together API key
             <ExternalLink className="h-3.5 w-3.5" />
           </a>
 
@@ -136,5 +136,5 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
         </div>
       </DialogContent>
     </Dialog>
-  );
+  )
 }