From dba165e5bac2b8e0adbf74635a5ae83aaec1511f Mon Sep 17 00:00:00 2001
From: julialaforet <juliaelaforet@yahoo.com>
Date: Sun, 2 Nov 2025 14:38:27 -0600
Subject: [PATCH 1/4] TextInput component

---
 app/components/TextInput.tsx | 45 ++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 21bb405..6c29863 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -1,26 +1,47 @@
 "use client";
 import styled from "styled-components";
 
-// TODO: Add props for TextInput
 type TextInputProps = {
-  propName: string; // replace string with actual prop type
+  label?: string;
+  placeholder?: string;
 };
 
-// TODO: implement TextInput component
-export default function TextInput({}: TextInputProps) {
+export default function TextInput({ label, placeholder }: TextInputProps) {
   return (
-    <div>
-      <StyledInputLabel>
-        <StyledTextInput />
-      </StyledInputLabel>
-    </div>
+    <StyledInputContainer>
+      {label && <StyledInputLabel>{label}</StyledInputLabel>}
+      <StyledTextInput type="text" placeholder={placeholder} />
+    </StyledInputContainer>
   );
 }
 
-const StyledTextInput = styled.input`
-  /* TODO: Add styles for TextInput */
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
 `;
 
 const StyledInputLabel = styled.label`
-  /* TODO: Add styles for InputLabel */
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--black);
+  margin-bottom: 8px;
+`;
+
+const StyledTextInput = styled.input`
+  padding: 12px 16px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 2px solid var(--dark-gray);
+  background: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  color: var(--black);
+  outline: none;
+
+  &::placeholder {
+    color: var(--dark-gray);
+  }
 `;

From 22beecde2ac02337c3b9e4fa7605c674e11064d3 Mon Sep 17 00:00:00 2001
From: julialaforet <juliaelaforet@yahoo.com>
Date: Sun, 2 Nov 2025 14:52:09 -0600
Subject: [PATCH 2/4] Fixing some styling

---
 app/components/TextInput.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 6c29863..575d01f 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -20,28 +20,38 @@ const StyledInputContainer = styled.div`
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
+  gap: 4px;
 `;
 
 const StyledInputLabel = styled.label`
   font-family: Inter, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
   color: var(--black);
-  margin-bottom: 8px;
 `;
 
 const StyledTextInput = styled.input`
-  padding: 12px 16px;
+  display: flex;
+  padding: 8px;
+  align-items: center;
   align-self: stretch;
+  flex: 1 0 0;
   border-radius: 4px;
   border: 2px solid var(--dark-gray);
   background: #fff;
   font-family: Inter, sans-serif;
-  font-size: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
   color: var(--black);
   outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &::placeholder {
-    color: var(--dark-gray);
+    color: var(--gray);
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 `;

From ef6dab79c0145212295e1887733a836be5a6e1f2 Mon Sep 17 00:00:00 2001
From: Rachel Koh <rachelkohhuiqi@gmail.com>
Date: Sun, 30 Nov 2025 13:20:18 -0500
Subject: [PATCH 3/4] add support for controlled input: accept React state and
 state setter function as props

---
 app/components/TextInput.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 575d01f..5011a05 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -4,13 +4,31 @@ import styled from "styled-components";
 type TextInputProps = {
   label?: string;
   placeholder?: string;
+  value?: string;
+  setValue?: (value: string) => void;
 };
 
-export default function TextInput({ label, placeholder }: TextInputProps) {
+export default function TextInput({
+  label,
+  placeholder,
+  value,
+  setValue,
+}: TextInputProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (setValue) {
+      setValue(event.target.value);
+    }
+  };
+
   return (
     <StyledInputContainer>
       {label && <StyledInputLabel>{label}</StyledInputLabel>}
-      <StyledTextInput type="text" placeholder={placeholder} />
+      <StyledTextInput
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+      />
     </StyledInputContainer>
   );
 }

From 58813606f19569c08438540afe7fb85f92de1673 Mon Sep 17 00:00:00 2001
From: Rachel Koh <rachelkohhuiqi@gmail.com>
Date: Sun, 30 Nov 2025 14:46:39 -0500
Subject: [PATCH 4/4] use React's types

---
 app/components/TextInput.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 5011a05..90eccb6 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -1,11 +1,12 @@
 "use client";
+import { Dispatch, SetStateAction } from "react";
 import styled from "styled-components";
 
 type TextInputProps = {
   label?: string;
   placeholder?: string;
   value?: string;
-  setValue?: (value: string) => void;
+  setValue?: Dispatch<SetStateAction<string>>;
 };
 
 export default function TextInput({