From 4fab63520a2a1f7579e4504eb0e76738d439432d Mon Sep 17 00:00:00 2001
From: prince rusweka <username@users.noreply.github.com>
Date: Fri, 2 May 2025 02:46:26 -0400
Subject: [PATCH] search frontend added

---
 frontend/src/pages/Search.tsx | 203 ++++++++++++++++++++++++++++++++--
 1 file changed, 194 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx
index b8ff0cf..7c8273f 100644
--- a/frontend/src/pages/Search.tsx
+++ b/frontend/src/pages/Search.tsx
@@ -1,10 +1,195 @@
-function Search() {
-    return (
-      <div>
-        <h1>Ready for pet adoption, or just looking around? </h1>
-        <p>This is the search page. You can add filtering or querying features here later.</p>
+import { CSSProperties, useState } from "react";
+import instagramLogo from "../assets/instagram_logo.png";
+import facebookLogo from "../assets/facebook_logo.png";
+import twitterLogo from "../assets/twitter_logo.png";
+import youtubeLogo from "../assets/youtube_logo.png";
+import menuLogo from "../assets/menu_logo.png";
+
+export default function Search() {
+  const [location, setLocation] = useState("");
+  const [radius, setRadius] = useState(500);
+
+  return (
+    <div style={pageWrapperStyle}>
+      <div style={contentWrapperStyle}>
+        <h2 style={headerText}>
+          Ready for pet adoption, or just looking around?
+          <br />
+          Get started by searching by criteria.
+        </h2>
+
+        <div style={filtersGrid}>
+          <div style={filterBlock}>
+            <h3 style={filterTitle}>Pet Age</h3>
+            <select style={dropdownStyle}>
+              <option>Cat</option>
+              <option>Dog</option>
+              <option>Turtle</option>
+              <option>Bunny</option>
+            </select>
+          </div>
+          <div style={filterBlock}>
+            <h3 style={filterTitle}>Breed</h3>
+            <select style={dropdownStyle}>
+              <option>Breed 1</option>
+              <option>Breed 2</option>
+              <option>Breed 3</option>
+              <option>Breed 4</option>
+            </select>
+          </div>
+          <div style={filterBlock}>
+            <h3 style={filterTitle}>Size</h3>
+            <select style={dropdownStyle}>
+              <option>Newborn</option>
+              <option>Young</option>
+              <option>Mid-Age</option>
+              <option>Old</option>
+            </select>
+          </div>
+          <div style={filterBlock}>
+            <h3 style={filterTitle}>Temperament</h3>
+            <select style={dropdownStyle}>
+              <option>Calm</option>
+              <option>Playful</option>
+              <option>Shy</option>
+              <option>Independent</option>
+            </select>
+          </div>
+        </div>
+
+        <div style={searchOptionsRow}>
+          <div style={{ flex: 1 }}>
+            <h3 style={filterTitle}>Location</h3>
+            <input
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              style={inputStyle}
+              placeholder="Enter location"
+            />
+          </div>
+          <div style={{ flex: 1 }}>
+            <h3 style={filterTitle}>Search Radius</h3>
+            <input
+              type="range"
+              min="0"
+              max="1000"
+              value={radius}
+              onChange={(e) => setRadius(Number(e.target.value))}
+              style={{ width: "100%" }}
+            />
+            <p style={{ color: "white" }}>{radius} mi</p>
+          </div>
+        </div>
+
+        <div style={{ textAlign: "center" }}>
+          <button style={searchButton}>Search 🔍</button>
+        </div>
       </div>
-    );
-  }
-  
-  export default Search;
\ No newline at end of file
+
+      <footer style={footerStyle}>
+        <div style={footerLeftStyle}>
+          <img src={instagramLogo} alt="Instagram" style={iconStyle} />
+          <img src={facebookLogo} alt="Facebook" style={iconStyle} />
+          <img src={twitterLogo} alt="Twitter" style={iconStyle} />
+          <img src={youtubeLogo} alt="YouTube" style={iconStyle} />
+        </div>
+        <img src={menuLogo} alt="Menu" style={iconStyle} />
+      </footer>
+    </div>
+  );
+}
+
+// === Styles ===
+
+const pageWrapperStyle: CSSProperties = {
+  backgroundColor: "rgb(180, 164, 143)",
+  minHeight: "100vh",
+  display: "flex",
+  flexDirection: "column"
+};
+
+const contentWrapperStyle: CSSProperties = {
+  flex: 1,
+  padding: "2rem",
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};
+
+const headerText: CSSProperties = {
+  color: "white",
+  textAlign: "center",
+  marginBottom: "1.5rem",
+  fontSize: "1.5rem"
+};
+
+const filtersGrid: CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+  gap: "1rem",
+  marginBottom: "1rem"
+};
+
+const filterBlock: CSSProperties = {
+  textAlign: "center"
+};
+
+const filterTitle: CSSProperties = {
+  color: "white",
+  fontSize: "1.1rem",
+  marginBottom: "0.5rem"
+};
+
+const dropdownStyle: CSSProperties = {
+  width: "100%",
+  padding: "0.5rem",
+  borderRadius: "6px",
+  fontSize: "1rem",
+  border: "1px solid #999"
+};
+
+const inputStyle: CSSProperties = {
+  width: "100%",
+  padding: "0.5rem",
+  borderRadius: "30px",
+  border: "none",
+  fontSize: "1rem"
+};
+
+const searchOptionsRow: CSSProperties = {
+  display: "flex",
+  gap: "1.5rem",
+  flexWrap: "wrap",
+  marginBottom: "1rem"
+};
+
+const searchButton: CSSProperties = {
+  padding: "0.75rem 2rem",
+  fontSize: "1.1rem",
+  borderRadius: "1rem",
+  backgroundColor: "black",
+  color: "white",
+  border: "none",
+  cursor: "pointer"
+};
+
+const footerStyle: CSSProperties = {
+  backgroundColor: "black",
+  color: "white",
+  padding: "1rem",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center"
+};
+
+const footerLeftStyle: CSSProperties = {
+  display: "flex",
+  gap: "1.5rem"
+};
+
+const iconStyle: CSSProperties = {
+  width: "36px",
+  height: "36px"
+};