Skip to content

Commit

Permalink
search frontend added
Browse files Browse the repository at this point in the history
  • Loading branch information
prince rusweka committed May 2, 2025
1 parent 77f4763 commit 4fab635
Showing 1 changed file with 194 additions and 9 deletions.
203 changes: 194 additions & 9 deletions frontend/src/pages/Search.tsx
Original file line number Diff line number Diff line change
@@ -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;

<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"
};

0 comments on commit 4fab635

Please sign in to comment.