-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
prince rusweka
committed
May 2, 2025
1 parent
77f4763
commit 4fab635
Showing
1 changed file
with
194 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
}; |