From addbf3fd17c1c7e463c61f4552d70f6cf9abf109 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 24 Aug 2024 22:00:36 -0400
Subject: [PATCH] Show Kodu banner in settings

---
 webview-ui/src/components/SettingsView.tsx | 28 ++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/webview-ui/src/components/SettingsView.tsx b/webview-ui/src/components/SettingsView.tsx
index 57ccc3e..4ad0c1d 100644
--- a/webview-ui/src/components/SettingsView.tsx
+++ b/webview-ui/src/components/SettingsView.tsx
@@ -92,6 +92,34 @@ const SettingsView = ({
 			</div>
 			<div
 				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
+				{apiConfiguration?.koduApiKey === undefined && (
+					<div
+						style={{
+							display: "flex",
+							alignItems: "center",
+							backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+							color: "var(--vscode-editor-foreground)",
+							padding: "6px 8px",
+							borderRadius: "3px",
+							margin: "0 0 8px 0px",
+							fontSize: "12px",
+						}}>
+						<i
+							className="codicon codicon-info"
+							style={{
+								marginRight: 6,
+								fontSize: 16,
+								color: "var(--vscode-infoIcon-foreground)",
+							}}></i>
+						<span>
+							<VSCodeLink
+								onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}
+								style={{ display: "inline" }}>
+								Claim $10 free credits from Kodu
+							</VSCodeLink>
+						</span>
+					</div>
+				)}
 				<div style={{ marginBottom: 5 }}>
 					<ApiOptions
 						apiConfiguration={apiConfiguration}