From a157b43756d387d9982058a266b695ea50c442b8 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Fri, 4 Oct 2024 08:20:21 +0200
Subject: [PATCH] added API keys

---
 app/components/settings/ButtonSettings.tsx |  4 ++--
 app/components/settings/Settings.tsx       | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/components/settings/ButtonSettings.tsx b/app/components/settings/ButtonSettings.tsx
index 3352fbf..3724a15 100644
--- a/app/components/settings/ButtonSettings.tsx
+++ b/app/components/settings/ButtonSettings.tsx
@@ -9,9 +9,9 @@ interface ButtonSettingProps {
 const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
   return (
     <div className="settings-option">
-      <button
+      <button 
         onClick={onClick} // Call the onClick function when the button is clicked
-        className={className} // Apply any additional classes
+        className={className="export-button"} // Apply any additional classes
       >
         {label} {/* Display the label on the button */}
       </button>
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 530b3da..0d77b0b 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -618,6 +618,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('mistral') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="OpenAI" // Label for the input
               value={openai} // State variable for the input
@@ -625,6 +630,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('openai') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="Anthropic" // Label for the input
               value={anthropic} // State variable for the input
@@ -632,6 +642,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
             <TextSettings
               label="Google" // Label for the input
               value={google} // State variable for the input
@@ -639,6 +654,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               type="text" // Input type
               placeholder={localStorage.getItem('google') || "Enter the API key"}
             />
+            <div className="settings-option">
+              <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
+                <button className="export-button">Get your API key here</button>
+              </a>
+            </div>
           </div>
         );