Skip to content

Added Search and Filter Features | Issue #534 #547

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

Merged
rishicds merged 1 commit into from
Nov 10, 2024
Merged

Added Search and Filter Features | Issue #534 #547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
110 changes: 61 additions & 49 deletions data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48270,54 +48270,66 @@
"image": "/gro4.svg"
}
],
"allProducts":[
{
"title": "Firebase In-App Messaging",
"description": "Firebase In-App Messaging helps you engage your app's active users by sending them targeted, contextual messages that encourage them to use key app features."
},
{
"title": "Firebase Cloud Messaging",
"description": "Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost."
},
{
"title": "Chrome Extensions",
"description": "Learn how to develop Chrome extensions."
},
{
"title": "Google Ads API",
"description": "Build tools to manage large Google Ads accounts and campaigns."
},
{
"title": "Privacy Sandbox",
"description": "Privacy-focused APIs and updates for cookies, advertising, identity, personalization, and fraud prevention."
},
{
"title": "Google Play's billing system",
"description": "Google Play’s billing system Sell digital in-app products and subscriptions in your app."
},
{
"title": "Distribute Your Apps & Games on Google Play",
"description": "Utilize Google Play to distribute your apps and games, which has the ability to reach over 2 billion Android devices and increase total app downloads."
},
{
"title": "Google Play Console",
"description": "Publish your apps and games with Google Play Console and grow your business on Google Play."
},
{
"title": "Interactive Media Ads SDKs",
"description": "The IMA SDKs enable publishers to monetize video, audio, or gaming content with video advertising."
},
{
"title": "AdSense",
"description": "Google AdSense provides a free, flexible way to earn money from your websites, mobile sites, and site search results."
},
{
"title": "Google Ads",
"description": "Create and manage ads that reach users looking for your products or services on Google Search, Display, YouTube, and more."
},
{
"title": "AdMob",
"description": "Discover how to monetize your mobile apps with targeted in-app advertising that matches criteria you set."
}
"allProducts": [
{
"title": "Firebase In-App Messaging",
"description": "Firebase In-App Messaging helps you engage your app's active users by sending them targeted, contextual messages that encourage them to use key app features.",
"tags": ["Mobile", "Messaging"]
},
{
"title": "Firebase Cloud Messaging",
"description": "Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.",
"tags": ["Mobile", "Messaging", "Cloud"]
},
{
"title": "Chrome Extensions",
"description": "Learn how to develop Chrome extensions.",
"tags": ["Web", "Development"]
},
{
"title": "Google Ads API",
"description": "Build tools to manage large Google Ads accounts and campaigns.",
"tags": ["Web", "Advertising"]
},
{
"title": "Privacy Sandbox",
"description": "Privacy-focused APIs and updates for cookies, advertising, identity, personalization, and fraud prevention.",
"tags": ["Web", "Privacy"]
},
{
"title": "Google Play's billing system",
"description": "Google Play’s billing system Sell digital in-app products and subscriptions in your app.",
"tags": ["Mobile", "Billing"]
},
{
"title": "Distribute Your Apps & Games on Google Play",
"description": "Utilize Google Play to distribute your apps and games, which has the ability to reach over 2 billion Android devices and increase total app downloads.",
"tags": ["Mobile", "Distribution"]
},
{
"title": "Google Play Console",
"description": "Publish your apps and games with Google Play Console and grow your business on Google Play.",
"tags": ["Mobile", "Business"]
},
{
"title": "Interactive Media Ads SDKs",
"description": "The IMA SDKs enable publishers to monetize video, audio, or gaming content with video advertising.",
"tags": ["Web", "Advertising", "Media"]
},
{
"title": "AdSense",
"description": "Google AdSense provides a free, flexible way to earn money from your websites, mobile sites, and site search results.",
"tags": ["Web", "Advertising"]
},
{
"title": "Google Ads",
"description": "Create and manage ads that reach users looking for your products or services on Google Search, Display, YouTube, and more.",
"tags": ["Web", "Advertising"]
},
{
"title": "AdMob",
"description": "Discover how to monetize your mobile apps with targeted in-app advertising that matches criteria you set.",
"tags": ["Mobile", "Advertising"]
}
]
}
142 changes: 60 additions & 82 deletions src/app/(pages)/growth/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { motion } from 'framer-motion';
import { Search } from 'lucide-react';
import ProductsNavbar from '../../../components/Global/ProductsNavbar';

// Growth and Monetization Page Component
const GrowthMonetizationPage = () => {
const [selectedTab, setSelectedTab] = useState("Growth and monetization");
const [overviewProducts, setOverviewProducts] = useState([]);
const [allProducts, setAllProducts] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [filter, setFilter] = useState('All'); // for filtering by category (AI, Mobile, Web, Cloud)

useEffect(() => {
const fetchProducts = async () => {
Expand All @@ -28,9 +29,28 @@ const GrowthMonetizationPage = () => {
fetchProducts();
}, []);

// Search functionality for All Products
const handleSearch = (products) => {
if (!searchTerm) return products;
return products.filter((product) =>
product.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
product.description.toLowerCase().includes(searchTerm.toLowerCase())
);
};

// Filter functionality for All Products
const handleFilter = (products) => {
if (filter === 'All') return products;
return products.filter((product) =>
product.tags.includes(filter) // Check if the product has the selected filter tag
);
};

// Apply both search and filter to all products
const filteredAllProducts = handleSearch(handleFilter(allProducts));

return (
<div className="bg-white text-black">
{/* Use the existing ProductsNavbar component */}
<ProductsNavbar selectedTab={selectedTab} setSelectedTab={setSelectedTab} />

{/* Header Section */}
Expand Down Expand Up @@ -71,19 +91,51 @@ const GrowthMonetizationPage = () => {
<input
type="text"
placeholder="Search for a product"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="pl-10 pr-4 py-3 w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex space-x-4">
<button className="px-4 py-2 bg-blue-500 text-white rounded-full font-bold hover:bg-blue-600 transition-all">AI</button>
<button className="px-4 py-2 bg-gray-200 text-black rounded-full font-bold hover:bg-gray-300 transition-all">Mobile</button>
<button className="px-4 py-2 bg-gray-200 text-black rounded-full font-bold hover:bg-gray-300 transition-all">Web</button>
<button className="px-4 py-2 bg-gray-200 text-black rounded-full font-bold hover:bg-gray-300 transition-all">Cloud</button>
<button
onClick={() => setFilter('AI')}
className={`px-4 py-2 ${filter === 'AI' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded-full font-bold hover:bg-blue-600 transition-all`}
>
AI
</button>
<button
onClick={() => setFilter('Mobile')}
className={`px-4 py-2 ${filter === 'Mobile' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded-full font-bold hover:bg-blue-600 transition-all`}
>
Mobile
</button>
<button
onClick={() => setFilter('Web')}
className={`px-4 py-2 ${filter === 'Web' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded-full font-bold hover:bg-blue-600 transition-all`}
>
Web
</button>
<button
onClick={() => setFilter('Cloud')}
className={`px-4 py-2 ${filter === 'Cloud' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded-full font-bold hover:bg-blue-600 transition-all`}
>
Cloud
</button>
<button
onClick={() => setFilter('All')}
className={`px-4 py-2 ${filter === 'All' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-black'} rounded-full font-bold hover:bg-blue-600 transition-all`}
>
All
</button>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
{allProducts.map((product, index) => (
{filteredAllProducts.length === 0 ? (
<div className="col-span-full text-center text-xl text-gray-600 py-12">
No matched products
</div>
) : ( filteredAllProducts.map((product, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 50 }}
Expand All @@ -95,85 +147,11 @@ const GrowthMonetizationPage = () => {
<p className="text-lg text-gray-600 mb-4">{product.description}</p>
<a href="#" className="text-blue-500 font-bold">Explore</a>
</motion.div>
))}
)))}
</div>
</div>
</div>
);
};

const overviewProducts = [
{
title: "Google Play",
description: "Publish your apps and games, grow your audience, boost engagement, and earn revenue.",
image: "/gro1.png",
},
{
title: "Google AdMob",
description: "Monetize mobile apps with targeted, in-app advertising that respects user experience.",
image: "/gro2.png",
},
{
title: "Google Ads",
description: "Promote your website, products, and app to the right users with Google Ads.",
image: "/gro3.svg",
},
{
title: "Firebase",
description: "An app development platform that helps you build and grow apps and games users love.",
image: "/gro4.svg",
},
];

const allProducts = [
{
title: "Firebase In-App Messaging",
description: "Firebase In-App Messaging helps you engage your app's active users by sending them targeted, contextual messages that encourage them to use key app features.",
},
{
title: "Firebase Cloud Messaging",
description: "Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost.",
},
{
title: "Chrome Extensions",
description: "Learn how to develop Chrome extensions.",
},
{
title: "Google Ads API",
description: "Build tools to manage large Google Ads accounts and campaigns.",
},
{
title: "Privacy Sandbox",
description: "Privacy-focused APIs and updates for cookies, advertising, identity, personalization, and fraud prevention.",
},
{
title: "Google Play's billing system",
description: "Google Play’s billing system Sell digital in-app products and subscriptions in your app.",
},
{
title: "Distribute Your Apps & Games on Google Play",
description: "Utilize Google Play to distribute your apps and games, which has the ability to reach over 2 billion Android devices and increase total app downloads.",
},
{
title: "Google Play Console",
description: "Publish your apps and games with Google Play Console and grow your business on Google Play.",
},
{
title: "Interactive Media Ads SDKs",
description: "The IMA SDKs enable publishers to monetize video, audio, or gaming content with video advertising.",
},
{
title: "AdSense",
description: "Google AdSense provides a free, flexible way to earn money from your websites, mobile sites, and site search results.",
},
{
title: "Google Ads",
description: "Create and manage ads that reach users looking for your products or services on Google Search, Display, YouTube, and more.",
},
{
title: "AdMob",
description: "Discover how to monetize your mobile apps with targeted in-app advertising that matches criteria you set.",
},
];

export default GrowthMonetizationPage;