Skip to content

Commit

Permalink
Merge pull request #516 from Saksham2k3s/enhace-search-bars
Browse files Browse the repository at this point in the history 
Enhace search bars
  • Loading branch information
@hustlerZzZ
hustlerZzZ authored Aug 9, 2024
2 parents 8beca62 + f778831 commit fe05f11
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 106 deletions.
196 changes: 101 additions & 95 deletions src/components/Blog/newss.jsx
View file
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-green-500">
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
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

0 comments on commit fe05f11

Please sign in to comment.