From 82ec6cc4634b6b308c26fe650fc32034636efdab Mon Sep 17 00:00:00 2001
From: Silen Naihin <silen.naihin@gmail.com>
Date: Sat, 10 Feb 2024 19:07:52 -0500
Subject: [PATCH] getting build page off the ground

---
 ui/app/build/page.tsx               | 36 +++++++++++++++++
 ui/app/components/build/Builder.tsx | 60 +++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 ui/app/build/page.tsx
 create mode 100644 ui/app/components/build/Builder.tsx

diff --git a/ui/app/build/page.tsx b/ui/app/build/page.tsx
new file mode 100644
index 00000000..d4a3e44f
--- /dev/null
+++ b/ui/app/build/page.tsx
@@ -0,0 +1,36 @@
+import tw from 'tailwind-styled-components';
+
+import Builder from '../components/build/Builder';
+
+const BuildPage: React.FC = () => {
+  return (
+    <Container>
+      <ContentWrapper>
+        <div className="mb-4 flex w-full justify-center">
+          <img className="w-64" src="/stackwise_logo.png" />
+        </div>
+        <Builder />
+      </ContentWrapper>
+    </Container>
+  );
+};
+
+export default BuildPage;
+
+const Container = tw.div`
+  flex
+  flex-col
+  justify-center
+  items-center
+  w-full
+  h-screen
+`;
+
+const ContentWrapper = tw.div`
+    w-3/5
+    flex
+    flex-col
+    justify-center
+    items-center
+    mt-10
+    `;
diff --git a/ui/app/components/build/Builder.tsx b/ui/app/components/build/Builder.tsx
new file mode 100644
index 00000000..56bcdb95
--- /dev/null
+++ b/ui/app/components/build/Builder.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import tw from 'tailwind-styled-components';
+
+const Builder: React.FC = () => {
+  const [input, setInput] = useState<string>(
+    'Using GPT, summarize all of my Git commits in the last month',
+  );
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async () => {
+    setLoading(true);
+
+    // This is where the API call would go
+
+    setLoading(false);
+  };
+
+  return (
+    <BuilderWrapper>
+      <BuilderInput value={input} onChange={(e) => setInput(e.target.value)} />
+      <Button
+        onClick={handleSubmit}
+        type="submit"
+        disabled={loading}
+        className={`${loading && 'bg-black text-white'}`}
+      >
+        Submit
+      </Button>
+    </BuilderWrapper>
+  );
+};
+
+export default Builder;
+
+const BuilderWrapper = tw.div`
+ flex 
+ w-full
+ flex-col
+ items-center
+ justify-center
+`;
+
+const BuilderInput = tw.textarea`
+    w-1/2
+    p-2
+    mb-2
+    border
+    border-gray-300
+    bg-gray-50
+    rounded
+    resize-none
+    focus:outline-none
+    h-24
+`;
+
+const Button = tw.button`
+  rounded-md border border-black px-3 py-1 font-medium
+`;