Frontend: Implement browser tab (All-Hands-AI#51)

* Add browser tab

* Add comments for URL and screenshot state variables

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">

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%;
+}

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;