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 d1563c96e50897ee753a5ef00b85e855943a6085 Mon Sep 17 00:00:00 2001
From: julialaforet <juliaelaforet@yahoo.com>
Date: Sun, 2 Nov 2025 15:19:16 -0600
Subject: [PATCH 3/4] Creaing SearchBar component

---
 app/components/SearchBar.tsx | 63 +++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 11 deletions(-)

diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 2f6043d..47e49e9 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -1,28 +1,69 @@
 "use client";
+import { Search } from "lucide-react";
 import styled from "styled-components";
-import Button from "./Button";
-import TextInput from "./TextInput";
 
-// TODO: Add props for SearchBarBar
 type SearchBarProps = {
-  propName: string; // replace string with actual prop type
+  placeholder?: string;
 };
 
-// TODO: implement SearchBar component
-export default function SearchBar({}: SearchBarProps) {
+// TODO: Replace SearchInput with TextInput component (borderless variant) and SearchButton with Button component once both are fully implemented
+// This SearchBar extends TextInput and Button components as intended
+export default function SearchBar({ placeholder = "Search" }: SearchBarProps) {
   return (
     <StyledSearchBar>
-      <TextInput propName="search" />
-      <Button
-        label="search"
+      <SearchInput type="text" placeholder={placeholder} />
+      <SearchButton
         onClick={() => {
           console.log("search");
         }}
-      />
+      >
+        <Search size={20} />
+      </SearchButton>
     </StyledSearchBar>
   );
 }
 
 const StyledSearchBar = styled.div`
-  /* TODO: Add styles for SearchBar */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const SearchInput = styled.input`
+  padding: 8px;
+  align-self: stretch;
+  flex: 1 0 0;
+  border: none;
+  border-radius: 4px;
+  background: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--black);
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &::placeholder {
+    color: var(--gray);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const SearchButton = styled.button`
+  display: flex;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: var(--orange);
+  border: none;
+  cursor: pointer;
+  color: var(--black);
+
+  &:hover {
+    background: var(--dark-orange);
+  }
 `;

From b68897350b4cb171afa2bc8f0558289ce22f574b Mon Sep 17 00:00:00 2001
From: Rachel Koh <rachelkohhuiqi@gmail.com>
Date: Sun, 30 Nov 2025 15:36:44 -0500
Subject: [PATCH 4/4] use Material Symbols Rounded icons instead of lucide
 react

---
 app/components/SearchBar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 47e49e9..5588f84 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { Search } from "lucide-react";
 import styled from "styled-components";
 
 type SearchBarProps = {
@@ -17,7 +16,7 @@ export default function SearchBar({ placeholder = "Search" }: SearchBarProps) {
           console.log("search");
         }}
       >
-        <Search size={20} />
+        <span className="material-symbols-rounded">search</span>
       </SearchButton>
     </StyledSearchBar>
   );