From 34c76a52c8c97d8c310e1f2d9a42d73393d19a19 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Tue, 19 Mar 2024 09:14:20 -0400
Subject: [PATCH] Frontend: Implement browser tab (#51)

* Add browser tab

* Add comments for URL and screenshot state variables
---
 frontend/src/App.tsx                | 43 ++++++++++++++++++-----------
 frontend/src/components/Browser.css | 11 ++++++++
 frontend/src/components/Browser.tsx | 34 +++++++++++++++++++++++
 3 files changed, 72 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/Browser.css
 create mode 100644 frontend/src/components/Browser.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cd01be2e73..76898b3260 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,25 +5,11 @@ import ChatInterface from "./components/ChatInterface";
 import Terminal from "./components/Terminal";
 import Planner from "./components/Planner";
 import CodeEditor from "./components/CodeEditor";
+import Browser from "./components/Browser";
 
-const TAB_OPTIONS = ["terminal", "planner", "code"] as const;
+const TAB_OPTIONS = ["terminal", "planner", "code", "browser"] as const;
 type TabOption = (typeof TAB_OPTIONS)[number];
 
-const tabData = {
-  terminal: {
-    name: "Terminal",
-    component: <Terminal />,
-  },
-  planner: {
-    name: "Planner",
-    component: <Planner />,
-  },
-  code: {
-    name: "Code Editor",
-    component: <CodeEditor />,
-  },
-};
-
 type TabProps = {
   name: string;
   active: boolean;
@@ -39,6 +25,31 @@ function Tab({ name, active, onClick }: TabProps): JSX.Element {
 
 function App(): JSX.Element {
   const [activeTab, setActiveTab] = useState<TabOption>("terminal");
+  // URL of browser window (placeholder for now, will be replaced with the actual URL later)
+  const [url] = useState("https://github.com/OpenDevin/OpenDevin");
+  // Base64-encoded screenshot of browser window (placeholder for now, will be replaced with the actual screenshot later)
+  const [screenshotSrc] = useState(
+    "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN0uGvyHwAFCAJS091fQwAAAABJRU5ErkJggg==",
+  );
+
+  const tabData = {
+    terminal: {
+      name: "Terminal",
+      component: <Terminal />,
+    },
+    planner: {
+      name: "Planner",
+      component: <Planner />,
+    },
+    code: {
+      name: "Code Editor",
+      component: <CodeEditor />,
+    },
+    browser: {
+      name: "Browser",
+      component: <Browser url={url} screenshotSrc={screenshotSrc} />,
+    },
+  };
 
   return (
     <div className="app">
diff --git a/frontend/src/components/Browser.css b/frontend/src/components/Browser.css
new file mode 100644
index 0000000000..3ece670b8f
--- /dev/null
+++ b/frontend/src/components/Browser.css
@@ -0,0 +1,11 @@
+.url {
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    background-color: white;
+    border-radius: 2rem;
+    color: #252526;
+}
+
+.screenshot {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Browser.tsx b/frontend/src/components/Browser.tsx
new file mode 100644
index 0000000000..4110f4e4de
--- /dev/null
+++ b/frontend/src/components/Browser.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import "./Browser.css";
+
+type UrlBarProps = {
+  url: string;
+};
+
+function UrlBar({ url }: UrlBarProps): JSX.Element {
+  return <div className="url">{url}</div>;
+}
+
+type ScreenshotProps = {
+  src: string;
+};
+
+function Screenshot({ src }: ScreenshotProps): JSX.Element {
+  return <img className="screenshot" src={src} alt="screenshot" />;
+}
+
+type BrowserProps = {
+  url: string;
+  screenshotSrc: string;
+};
+
+function Browser({ url, screenshotSrc }: BrowserProps): JSX.Element {
+  return (
+    <div className="browser">
+      <UrlBar url={url} />
+      <Screenshot src={screenshotSrc} />
+    </div>
+  );
+}
+
+export default Browser;