From a0776a2f59bf54bfcf511522b75535c2b7e224af Mon Sep 17 00:00:00 2001 From: Ikki Date: Sun, 27 Oct 2024 14:55:00 +0530 Subject: [PATCH] filter-functionality --- src/app/trekking/location-detail.js | 55 +++++-- src/app/trekking/page.module.css | 43 ++++++ src/app/trekking/page.tsx | 214 ++++++++++++-------------- src/components/ui/TrekCard.module.css | 2 +- 4 files changed, 183 insertions(+), 131 deletions(-) diff --git a/src/app/trekking/location-detail.js b/src/app/trekking/location-detail.js index b35c1a9..3067558 100644 --- a/src/app/trekking/location-detail.js +++ b/src/app/trekking/location-detail.js @@ -1,6 +1,9 @@ export const trekDetails = [ { - title: "Roopkund Trek", + title: "ROOPKUND TREK", + difficultyLevel: "HIGH RISK", + altitude: 4536, + district: "CHAMOLI", introduction: "The Roopkund Trek is a mesmerizing journey through the pristine wilderness of the Himalayas, famously known as the 'Skeleton Lake.' This trek is shrouded in mystery and folklore, as the lake is home to human skeletal remains that date back centuries. Surrounded by majestic mountains and verdant meadows, the trek offers not just adventure but also a unique glimpse into the region's rich history and culture. As you traverse the rugged terrain, you'll encounter breathtaking landscapes that change with every turn, making this an unforgettable experience for every nature enthusiast.", overview: @@ -37,7 +40,10 @@ export const trekDetails = [ image : 'https://upload.wikimedia.org/wikipedia/commons/2/24/Roopkund_Lake.jpg' }, { - title: "Valley of Flowers Trek", + title: "VALLEY OF FLOWERS TREK", + difficultyLevel: "MODERATE", + altitude: 3658, + district: "CHAMOLI", introduction: "The Valley of Flowers Trek is a breathtaking expedition into one of India's most spectacular national parks. Known for its vibrant meadows filled with a stunning array of endemic flowers, this UNESCO World Heritage site is a paradise for nature lovers and photographers alike. As you trek through the valley, you’ll be greeted by a colorful landscape that comes alive during the monsoon season. The blend of beautiful flora and the majestic backdrop of snow-capped mountains creates a visual feast that captivates all who visit. The Valley of Flowers is not just a visual delight; it’s an opportunity to connect with nature at its most vibrant and enchanting.", overview: @@ -74,7 +80,10 @@ export const trekDetails = [ image : "https://upload.wikimedia.org/wikipedia/commons/6/63/Valley_of_flowers_uttaranchal_full_view.JPG" }, { - title: "Har Ki Dun Trek", + title: "HAR KI DUN TREK", + difficultyLevel: "MODERATE", + altitude: 3566, + district: "UTTARKASHI", introduction: "The Har Ki Dun Trek offers a mesmerizing blend of natural beauty and rich cultural heritage, often referred to as the 'Valley of Gods.' This picturesque valley is steeped in mythological significance and is surrounded by magnificent snow-capped peaks, dense forests, and lush meadows. The trek is an ideal escape for those looking to immerse themselves in the tranquility of nature while exploring the rich history and traditions of the local people. Trekking in Har Ki Dun allows you to connect with the serene landscapes and delve into the stories that the mountains hold.", overview: @@ -111,7 +120,10 @@ export const trekDetails = [ image : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Har_Ki_Dun.jpg/1200px-Har_Ki_Dun.jpg" }, { - title: "Kedarkantha Trek", + title: "KEDARKANTHA TREK", + difficultyLevel: "EASY TO MODERATE", + altitude: 3810, + district: "UTTARKASHI", introduction: "Experience the thrilling Kedarkantha Trek, renowned for its stunning winter landscapes and breathtaking summit views. This trek is especially popular during the winter months when the entire region is blanketed in snow, creating a picturesque setting for adventure seekers.", overview: @@ -148,7 +160,10 @@ export const trekDetails = [ }, { - title: "Nanda Devi Base Camp Trek", + title: "NANDA DEVI BASE CAMP TREK", + difficultyLevel: "MODERATE TO DIFFICULT", + altitude: 4000, + district: "CHAMOLI", introduction: "Discover the untouched beauty of Nanda Devi Base Camp, a majestic trek that offers a glimpse into the heart of the Himalayas. This trek is an adventure through one of India's most scenic and lesser-known trails, perfect for nature lovers and adventure seekers alike.", overview: @@ -184,7 +199,10 @@ export const trekDetails = [ image : "https://upload.wikimedia.org/wikipedia/commons/d/d2/Mt._Nanda_Devi.jpg" }, { - title: "Pindari Glacier Trek", + title: "PINDARI GLACIER TREK", + difficultyLevel: "MODERATE", + altitude: 3660, + district: "BAGESHWAR", introduction: "Venture to the Pindari Glacier, a mesmerizing trek that offers breathtaking views of the majestic glacier and surrounding peaks. This trek is renowned for its pristine natural beauty and serene atmosphere.", overview: @@ -218,7 +236,10 @@ export const trekDetails = [ image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Pindari_glacier%2C_Uttarakhand%2C_India.jpg/1200px-Pindari_glacier%2C_Uttarakhand%2C_India.jpg" }, { - title: "Bali Pass Trek", + title: "BALI PASS TREK", + difficultyLevel: "DEMANDING", + altitude: 4950, + district: "UTTARKASHI", introduction: "Embark on an extraordinary journey through the Bali Pass, a high-altitude trek that connects the Har Ki Dun and Yamunotri valleys. This trek offers a perfect blend of adventure and breathtaking natural beauty.", overview: @@ -254,7 +275,10 @@ export const trekDetails = [ }, { - title: "Kumaon Himalayas Trek", + title: "KUMAON HIMALAYAS TREK", + difficultyLevel: "MODERATE", + altitude: 4200, + district: "KUMAON", introduction: "Explore the pristine beauty of the Kumaon Himalayas, where adventure and nature come together in perfect harmony. This trek promises an unforgettable experience for nature lovers and adventure seekers, offering an immersive journey through one of India's most scenic regions.", overview: @@ -289,7 +313,10 @@ export const trekDetails = [ }, { - title: "Chopta Tungnath Trek", + title: "TUNGNATH CHOPTA TREK", + difficultyLevel: "EASY", + altitude: 3680, + district: "CHAMOLI", introduction: "Experience the breathtaking beauty of the Chopta Tungnath Trek, known for its stunning landscapes and rich cultural heritage. This trek, leading to the highest Shiva temple in the world, combines adventure with spiritual significance, making it a unique experience for trekkers. Nestled in the heart of the Himalayas, Chopta is often referred to as the 'Mini Switzerland of India' due to its picturesque meadows and panoramic views of the surrounding peaks. The trek not only offers mesmerizing views but also a deep connection to the spiritual essence of the region, making it a favorite among both adventure seekers and those seeking solace.", overview: @@ -325,7 +352,10 @@ export const trekDetails = [ image : "https://trisoj.com/travel-guide/wp-content/uploads/2022/11/Chandrashila.png" }, { - title: "Rupin Pass Trek", + title: "RUPIN PASS TREK", + difficultyLevel: "DEMANDING", + altitude: 4650, + district: "UTTARKASHI", introduction: "Challenge yourself with the Rupin Pass trek, a breathtaking adventure that showcases the stunning beauty of the Himalayas. Known for its dramatic landscapes, this trek offers a unique opportunity to explore the diverse terrains and experience the rich culture of the region.", overview: @@ -360,7 +390,10 @@ export const trekDetails = [ image : "https://trekthehimalayas.com/images/RupinPassTrek/GalleryDesktop/Winter/625ce941-4dcc-46d4-a5b7-015e4d037005_Rupin-Pass-6.webp" }, { - title: "Chopta to Tungnath and Back", + title: "CHOPTA TO TUNGNATH AND BACK", + difficultyLevel: "EASY", + altitude: 3680, + district: "CHAMOLI", introduction: "Embark on a scenic trek from Chopta to Tungnath, a journey filled with natural beauty and spiritual significance. This trek not only offers stunning vistas but also allows you to connect with the sacred heritage of the region.", overview: diff --git a/src/app/trekking/page.module.css b/src/app/trekking/page.module.css index 27a3391..dbffb41 100644 --- a/src/app/trekking/page.module.css +++ b/src/app/trekking/page.module.css @@ -46,6 +46,49 @@ justify-content: center; } +.filter-section { + margin-top: 4rem; /* Space above the filter section */ +} + +.search-container { + display: flex; /* Use flexbox for layout */ + justify-content: space-between; /* Distribute space between items */ + align-items: center; /* Center items vertically */ +} + +.item { + flex: 1; /* Allow items to grow equally */ + margin: 0 0.5rem; /* Margin between items */ + position: relative; /* Relative positioning for label */ +} + +.item label { + display: block; /* Make label a block element */ + margin-bottom: 0.25rem; /* Space below the label */ + font-weight: 500; /* Medium font weight */ + color: #333; /* Dark gray for good contrast */ + font-size: 0.9rem; /* Slightly smaller font size */ +} + +.item select { + padding: 0.5rem; /* Padding inside the select box */ + border-radius: 5px; /* Rounded corners for select box */ + border: 1px solid #ccc; /* Light gray border */ + font-size: 0.75rem; /* Font size for select box */ + color: #333; /* Dark text color */ + background-color: #fff; /* White background for select box */ + transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition */ +} +.not-available { + text-align: center; /* Center the text */ + color: #555; /* Gray text color */ + font-size: 1rem; /* Adjust font size */ + margin: 20px 0; /* Space around the message */ +} + + + + diff --git a/src/app/trekking/page.tsx b/src/app/trekking/page.tsx index b8fbde1..1304c3c 100644 --- a/src/app/trekking/page.tsx +++ b/src/app/trekking/page.tsx @@ -1,12 +1,45 @@ +"use client"; // Marking this as a client component import styles from "./page.module.css"; import Image from "next/image"; import TrekCard from "@/components/ui/TrekCard"; import TrekkingHeroImage from "/public/heroImage.png"; import { trekDetails } from './location-detail'; +import { useState } from "react"; export default function Trekking() { - console.log('hello') - console.log(trekDetails.length) + const [difficultyLevel, setDifficultyLevel] = useState(""); + const [district, setDistrict] = useState(""); + const [altitude, setAltitude] = useState(""); + + const handleFilterChange = (e: React.ChangeEvent, filterType: string) => { + const value = e.target.value; + if (filterType === "difficulty") setDifficultyLevel(value); + else if (filterType === "district") setDistrict(value); + else if (filterType === "altitude") setAltitude(value); + }; + + // Extract unique districts from trekDetails + const districts = Array.from(new Set(trekDetails.map(trek => trek.district))); + + const filterTreks = trekDetails.filter(trek => { + const matchesDifficulty = difficultyLevel === "" || trek.difficultyLevel.toLowerCase() === difficultyLevel.toLowerCase(); + const matchesDistrict = district === "" || trek.district.toLowerCase() === district.toLowerCase(); + + let matchesAltitude = true; // Default to true (not filtering) + if (altitude) { + // Define altitude ranges for filtering + if (altitude === "Low") { + matchesAltitude = trek.altitude < 3500; // Altitude below 3500m + } else if (altitude === "Moderate") { + matchesAltitude = trek.altitude >= 3500 && trek.altitude <= 4000; // Altitude between 3500m and 4000m + } else if (altitude === "High") { + matchesAltitude = trek.altitude > 4000; // Altitude above 4000m + } + } + + return matchesDifficulty && matchesDistrict && matchesAltitude; + }); + return ( <>
@@ -19,129 +52,72 @@ export default function Trekking() { TREKKING +
-
-
-
-
+
+
+
+ + +
-
-
+
+ + +
-
-
+
+ +
-
- +
+
- - - - - - - - - - - - - - - - - - - - - + {filterTreks.length > 0 ? ( + filterTreks.map((trek, index) => ( + + )) + ) : ( +
+

No treks available based on your filters. Please adjust your selections.

+
+ )}
); diff --git a/src/components/ui/TrekCard.module.css b/src/components/ui/TrekCard.module.css index 3c09f01..f2db687 100644 --- a/src/components/ui/TrekCard.module.css +++ b/src/components/ui/TrekCard.module.css @@ -6,7 +6,7 @@ width: 100%; border-top: 1px solid var(--cloud-grey); padding-top: 4rem; - margin-top: 4rem; + margin-top: 1rem; } .left-card{ flex: 3;