Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhace search bars #516

Merged
merged 2 commits into from
Aug 9, 2024
+122 −107
Merged

Enhace search bars #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11d4a8f
Solved issue 509
Saksham2k3s Aug 8, 2024
f778831
Solved issue 510
Saksham2k3s Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 101 additions & 95 deletions src/components/Blog/newss.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,114 @@
import React, { useEffect, useState } from 'react';
import "./newss.css";
import Navbar from '../Navbar';
import Footer from '../Footer';
import image1 from "../../assets/news1.jpg"
import image2 from "../../assets/news2.jpg"
import image3 from "../../assets/news3.jpeg"
import React, { useEffect, useState } from "react";
import "./newss.css";
import Navbar from "../Navbar";
import Footer from "../Footer";
import image1 from "../../assets/news1.jpg";
import image2 from "../../assets/news2.jpg";
import image3 from "../../assets/news3.jpeg";
import { color, motion, useScroll } from "framer-motion";
const blogPosts = [
{
id: 1,
title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
date: '2024-04-30',
title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
date: "2024-04-30",
author: "Niko",
image: image1,
},
{
id: 2,
title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
date: '2024-04-26',
title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
date: "2024-04-26",
author: "Niko",
image: image1,
},
{
id: 3,
title: '5 delish gourmet desserts with a savoury twist | Mint',
date: '2024-03-25',
title: "5 delish gourmet desserts with a savoury twist | Mint",
date: "2024-03-25",
author: "Niko",
image: image3,
},
{
id: 4,
title: 'Master The Art of Salad Dressing',
date: '2024-04-30',
author: "Niko",
title: "Master The Art of Salad Dressing",
date: "2024-04-30",
author: "Niko",
image: image2,
},
{
id: 5,
title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
date: '2024-04-26',
author: "Niko",
title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
date: "2024-04-26",
author: "Niko",
image: image1,
},
{
id: 6,
title: '5 delish gourmet desserts with a savoury twist | Mint',
date: '2024-03-25',
author: "Niko",
title: "5 delish gourmet desserts with a savoury twist | Mint",
date: "2024-03-25",
author: "Niko",
image: image3,
},
{
id: 7,
title: 'Master The Art of Salad Dressing',
date: '2024-04-30',
author: "Niko",
title: "Master The Art of Salad Dressing",
date: "2024-04-30",
author: "Niko",
image: image2,
},
{
id: 8,
title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
date: '2024-04-26',
author: "Niko",
title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
date: "2024-04-26",
author: "Niko",
image: image1,
},
{
id: 9,
title: '5 delish gourmet desserts with a savoury twist | Mint',
date: '2024-03-25',
author: "Niko",
title: "5 delish gourmet desserts with a savoury twist | Mint",
date: "2024-03-25",
author: "Niko",
image: image3,
},
{
id: 10,
title: 'Master The Art of Salad Dressing',
date: '2024-04-30',
author: "Niko",
title: "Master The Art of Salad Dressing",
date: "2024-04-30",
author: "Niko",
image: image2,
},
{
id: 11,
title: 'Recipe of Phirni by Masterchef Sanjeev Kapoor',
date: '2024-04-26',
author: "Niko",
title: "Recipe of Phirni by Masterchef Sanjeev Kapoor",
date: "2024-04-26",
author: "Niko",
image: image1,
},
{
id: 12,
title: '5 delish gourmet desserts with a savoury twist | Mint',
date: '2024-03-25',
title: "5 delish gourmet desserts with a savoury twist | Mint",
date: "2024-03-25",
author: "Niko",
image: image3,
},
];

const Newss = () => {
const [searchQuery, setSearchQuery] = useState('');
const [searchQuery, setSearchQuery] = useState("");
const [filteredPosts, setFilteredPosts] = useState([]);
useEffect(()=>{
setFilteredPosts([...blogPosts])
},[blogPosts])
useEffect(() => {
setFilteredPosts([...blogPosts]);
}, [blogPosts]);
const handleSearchChange = (event) => {
setSearchQuery(event.target.value);
};

const handleSearch = () => {
const lowercasedQuery = searchQuery.toLowerCase();
const newFilteredPosts = blogPosts.filter(post =>
post.title.toLowerCase().includes(lowercasedQuery) ||
post.author.toLowerCase().includes(lowercasedQuery)
const newFilteredPosts = blogPosts.filter(
(post) =>
post.title.toLowerCase().includes(lowercasedQuery) ||
post.author.toLowerCase().includes(lowercasedQuery)
);
setFilteredPosts(newFilteredPosts);
};
Expand All @@ -118,57 +119,62 @@ useEffect(()=>{
};
return (
<>
<Navbar/>
<div className="BlogpageContainer_main">
<header className="header">
{/* <h1>Trending Food and Health News</h1> */}
<div className="p-4 flex flex-col justify-center items-center gap-y-4 w-[100%]">
<div className="text-5xl font-extrabold text-center">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-black to-yellow-400">
Trending Food and Health News
</span>
</div>
<div className="sm:flex mt-[20px]">
<input
type="text"
placeholder="Your Search..."
className="border-[1px] border-black p-2 outline-none"
value={searchQuery}
onChange={handleSearchChange}
required
/> <button onClick={handleSearch} className=" border-none bg-yellow-400 text-white p-2" >Search</button>
</div>
</div>
</header>
<div className="BlogpageContainer">

<div className="container">
{filteredPosts.map(post => (
<motion.div
key={post.id}
initial="hidden"
whileInView="visible"
whileHover={{ scale: 1.06 }}
viewport={{ once: true }}
variants={eventVariants}
transition={{ duration: 0.5, ease: "easeInOut" }}
className="card"
>
<div className="imagecontainer">
<img src={post.image} alt={post.title} className="image" />
<Navbar />
<div className="BlogpageContainer_main">
<header className="header">
{/* <h1>Trending Food and Health News</h1> */}
<div className="p-4 flex flex-col justify-center items-center gap-y-4 w-[100%]">
<div className="text-5xl font-extrabold text-center">
<span className="bg-clip-text text-green-500">
Trending Food and Health News
</span>
</div>
<div className="content1">
<h2>{post.title}</h2>
<p>~{post.author}</p>
<p>{post.date}</p>
<div className="relative flex mt-5 max-w-md mx-auto">
<input
type="text"
placeholder="Your Search..."
className="flex-1 border-[1px] border-gray-300 p-2 rounded-l-full outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 shadow-md"
value={searchQuery}
onChange={handleSearchChange}
required
/>
<button
onClick={handleSearch}
className="bg-green-500 text-white p-2 rounded-r-full focus:outline-none transition-transform duration-300 ease-in-out hover:scale-105 shadow-lg focus:border-green-500 "
>
Search
</button>
</div>
</motion.div>
))}
</div>
</header>
<div className="BlogpageContainer">
<div className="container">
{filteredPosts.map((post) => (
<motion.div
key={post.id}
initial="hidden"
whileInView="visible"
whileHover={{ scale: 1.06 }}
viewport={{ once: true }}
variants={eventVariants}
transition={{ duration: 0.5, ease: "easeInOut" }}
className="card"
>
<div className="imagecontainer">
<img src={post.image} alt={post.title} className="image" />
</div>
<div className="content1">
<h2>{post.title}</h2>
<p>~{post.author}</p>
<p>{post.date}</p>
</div>
</motion.div>
))}
</div>
</div>
</div>
</div>
</div>
<Footer/>
<Footer />
</>
);
}
export default Newss;
};
export default Newss;
31 changes: 20 additions & 11 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,12 @@ function Home() {
};
});
const canteensWithDishes = await Promise.all(allDishesPromises);
const filteredData = canteensWithDishes.filter((canteen) =>
canteen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
canteen.dishes.some((dish) =>
dish.dish.toLowerCase().includes(searchTerm.toLowerCase())
)
const filteredData = canteensWithDishes.filter(
(canteen) =>
canteen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
canteen.dishes.some((dish) =>
dish.dish.toLowerCase().includes(searchTerm.toLowerCase())
)
);
setFilteredCanteenData({ data: filteredData });
} catch (error) {
Expand All @@ -114,20 +115,28 @@ function Home() {
<Loader />
) : (
<div className="min-h-screen dark:bg-teal-700">
<Navbar />
<div className="mx-auto max-w-2xl p-4" style={{ paddingTop: "120px" }}>
<div className="relative">
<AiOutlineSearch className="absolute top-2 left-3 text-gray-400" size={24} />
<Navbar />
<div
className="mx-auto max-w-2xl p-4"
style={{ paddingTop: "120px" }}
>
{/* Search bar */}

<div className="relative w-full max-w-sm mx-auto">
<AiOutlineSearch
className="absolute top-1/2 left-3 transform -translate-y-1/2 text-gray-500"
size={20}
/>
<input
type="text"
placeholder="Search Dish or Canteen"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500"
className="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-green-500 focus:ring-2 focus:ring-green-500 shadow-md"
/>
<button
onClick={handleSearch}
className="absolute top-0 right-0 h-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none"
className="absolute top-1/2 right-0 transform -translate-y-1/2 h-full px-6 py-2 text-white bg-green-500 rounded-r-full hover:bg-green-600 focus:outline-none transition-transform duration-300 ease-in-out hover:scale-105 shadow-lg"
>
Search
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/News.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function News() {
(
<div className="text-gray-900 min-h-screen">
<Navbar />
<h1 className="text-3xl font-bold text-center mt-20 text-white p-6 dark:text-slate-900">
<h1 className="text-3xl font-bold text-center text-green-500 p-6">
Trending Food and Health News
</h1>
<main className="mt-10 p-4">
Expand Down
Loading