1 files changed, 68 insertions, 0 deletions
diff --git a/benchmark/frontend/src/components/data/dashboard/CurrentEnv.tsx b/benchmark/frontend/src/components/data/dashboard/CurrentEnv.tsx
new file mode 100644
index 000000000..e445d9869
--- /dev/null
+++ b/benchmark/frontend/src/components/data/dashboard/CurrentEnv.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import tw from "tailwind-styled-components";
+
+interface CurrentEnvProps {
+  data: any;
+}
+
+const CurrentEnv: React.FC<CurrentEnvProps> = ({ data }) => {
+  const [agentName, setAgentName] = useState<string>("mini-agi");
+  const [reportLocation, setReportLocation] = useState<string>(
+    "../reports/mini-agi"
+  );
+  const [openAiKey, setOpenAiKey] = useState<string>();
+
+  return (
+    <CurrentEnvContainer>
+      <Title>Env Variables</Title>
+      <EnvWrapper>
+        <EnvLabel>Agent Name</EnvLabel>
+        <EnvInput
+          onChange={(e) => setAgentName(e.targetValue)}
+          placeholder="mini-agi"
+        />
+      </EnvWrapper>
+      <EnvWrapper>
+        <EnvLabel>Report Location</EnvLabel>
+        <EnvInput placeholder="Location from root" />
+      </EnvWrapper>
+      <EnvWrapper>
+        <EnvLabel>OpenAI Key</EnvLabel>
+        <EnvInput type="password" placeholder="sk-" />
+      </EnvWrapper>
+    </CurrentEnvContainer>
+  );
+};
+
+export default CurrentEnv;
+
+const CurrentEnvContainer = tw.div`
+  w-full
+  h-full
+  flex
+  flex-col
+  justify-center
+`;
+
+const Title = tw.h3`
+  font-bold
+  text-lg
+  text-center
+`;
+
+const EnvWrapper = tw.div`
+  flex
+  mt-4
+  justify-between
+  items-center
+`;
+
+const EnvLabel = tw.label`
+
+`;
+
+const EnvInput = tw.input`
+  border
+  rounded
+  px-2
+`;