From 9a11b4ea7eb4e3d2b9c574589d17e0b15f75ecec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jarno=20Kiesil=C3=A4inen?= Date: Sat, 2 Aug 2025 15:29:18 +0300 Subject: [PATCH 1/3] feat: added mock search results --- frontend/src/pages/Home.css | 150 ++++++++++++++++++++++++++++++++++++ frontend/src/pages/Home.jsx | 133 ++++++++++++++++++++++++++++++-- 2 files changed, 278 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/Home.css b/frontend/src/pages/Home.css index d43266a..b105651 100644 --- a/frontend/src/pages/Home.css +++ b/frontend/src/pages/Home.css @@ -205,6 +205,107 @@ gap: 2rem; } +/* Search Results Section */ +.search-results { + padding: 4rem 0; + background: white; +} + +.results-title { + text-align: center; + font-size: 2rem; + font-weight: 700; + margin: 0 0 3rem 0; + color: var(--color-text-primary); +} + +.results-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.result-card { + height: 100%; + display: flex; + flex-direction: column; +} + +.result-card .card-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.result-card .card-body { + flex: 1; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.result-card .card-body p { + margin: 0; + line-height: 1.6; + color: var(--color-text-secondary); +} + +.amenities { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: auto; +} + +.amenity-tag { + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + color: var(--color-dark); + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 600; + box-shadow: 0 2px 8px var(--color-shadow-primary); + transition: all 0.3s ease; +} + +.amenity-tag:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px var(--color-shadow-primary); +} + +/* No Results Section */ +.no-results { + padding: 4rem 0; + background: white; + text-align: center; +} + +.no-results-content h2 { + font-size: 2rem; + font-weight: 700; + margin: 0 0 1rem 0; + color: var(--color-text-primary); +} + +.no-results-content p { + font-size: 1.1rem; + color: var(--color-text-secondary); + margin: 0; +} + +/* Loading State */ +.search-button.searching { + background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-dark) 100%); + cursor: not-allowed; + opacity: 0.8; +} + +.search-button.searching:hover { + transform: none; + box-shadow: 0 4px 12px var(--color-shadow-secondary); +} + /* Responsive Design */ @media (max-width: 768px) { .hero { @@ -261,6 +362,27 @@ .features-grid { grid-template-columns: 1fr; } + + .search-results { + padding: 3rem 0; + } + + .results-title { + font-size: 1.75rem; + } + + .results-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .no-results { + padding: 3rem 0; + } + + .no-results-content h2 { + font-size: 1.75rem; + } } @media (max-width: 480px) { @@ -284,6 +406,14 @@ min-width: 180px; padding: 0.75rem; } + + .results-title { + font-size: 1.5rem; + } + + .no-results-content h2 { + font-size: 1.5rem; + } } /* Dark Mode Support */ @@ -334,4 +464,24 @@ .features { background: var(--color-bg-dark); } + + .search-results { + background: var(--color-bg-dark); + } + + .no-results { + background: var(--color-bg-dark); + } + + .results-title { + color: var(--color-text-primary-light); + } + + .no-results-content h2 { + color: var(--color-text-primary-light); + } + + .no-results-content p { + color: var(--color-text-secondary); + } } \ No newline at end of file diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 61a6ed2..4fb4299 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -13,6 +13,60 @@ const Home = () => { peopleCount: '', priceRange: '' }); + const [searchResults, setSearchResults] = useState([]); + const [isSearching, setIsSearching] = useState(false); + + // Mockup data for search results + const mockResults = [ + { + id: 1, + title: "Cozy Mountain Cabin", + subtitle: "€€ • 4 guests • Dog friendly", + image: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Beautiful mountain cabin with stunning views, perfect for a peaceful getaway. Features a hot tub and fireplace.", + amenities: ["Dog friendly", "Fireplace", "Hot tub", "Mountain view"] + }, + { + id: 2, + title: "Modern City Apartment", + subtitle: "€€€ • 2 guests • Accessible", + image: "https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Stylish apartment in the heart of the city with modern amenities and easy access to public transportation.", + amenities: ["Accessible", "City view", "Gym access", "Parking"] + }, + { + id: 3, + title: "Family Beach House", + subtitle: "€€€€ • 6 guests • Family friendly", + image: "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Spacious beachfront property perfect for family vacations. Includes a pool, playground, and direct beach access.", + amenities: ["Family friendly", "Beach access", "Pool", "Playground"] + }, + { + id: 4, + title: "Rustic Farmhouse", + subtitle: "€€ • 8 guests • Dog friendly", + image: "https://images.unsplash.com/photo-1571896349842-33c89424de2d?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Charming farmhouse surrounded by nature. Perfect for large groups looking for a rural escape.", + amenities: ["Dog friendly", "Large groups", "Nature", "Fireplace"] + }, + { + id: 5, + title: "Luxury Villa", + subtitle: "€€€€ • 4 guests • Accessible", + image: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Exclusive villa with premium amenities including a private pool, chef's kitchen, and stunning ocean views.", + amenities: ["Accessible", "Private pool", "Ocean view", "Chef's kitchen"] + }, + { + id: 6, + title: "Cozy Studio", + subtitle: "€ • 2 guests • Family friendly", + image: "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Affordable studio apartment perfect for couples or small families. Located in a quiet neighborhood.", + amenities: ["Family friendly", "Affordable", "Quiet", "Central location"] + } + ]; const handleGetStarted = () => { alert('Get Started button clicked!'); @@ -30,9 +84,30 @@ const Home = () => { }; const handleSearch = () => { - // Handle search logic here - console.log('Search query:', searchQuery); - console.log('Filters:', filters); + if (!searchQuery.trim()) { + alert('Please enter a search query'); + return; + } + + setIsSearching(true); + + // Simulate API call delay + setTimeout(() => { + // Filter results based on search query and filters + let filteredResults = mockResults.filter(result => { + const matchesQuery = result.title.toLowerCase().includes(searchQuery.toLowerCase()) || + result.description.toLowerCase().includes(searchQuery.toLowerCase()); + + const matchesDogFriendly = !filters.dogFriendly || result.amenities.includes('Dog friendly'); + const matchesAccessible = !filters.accessible || result.amenities.includes('Accessible'); + const matchesFamilyFriendly = !filters.familyFriendly || result.amenities.includes('Family friendly'); + + return matchesQuery && matchesDogFriendly && matchesAccessible && matchesFamilyFriendly; + }); + + setSearchResults(filteredResults); + setIsSearching(false); + }, 1000); }; return ( @@ -57,8 +132,12 @@ const Home = () => { onChange={(e) => setSearchQuery(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleSearch()} /> - @@ -140,6 +219,50 @@ const Home = () => { + {/* Search Results Section */} + {searchResults.length > 0 && ( +
+
+

+ Found {searchResults.length} result{searchResults.length !== 1 ? 's' : ''} for "{searchQuery}" +

+
+ {searchResults.map(result => ( + +

{result.description}

+
+ {result.amenities.map((amenity, index) => ( + + {amenity} + + ))} +
+ + ))} +
+
+
+ )} + + {/* No Results Message */} + {searchResults.length === 0 && !isSearching && searchQuery && ( +
+
+
+

No results found for "{searchQuery}"

+

Try adjusting your search terms or filters to find more options.

+
+
+
+ )} +