From bdc916b0d641992888bdb0d227305c2e7c809ad7 Mon Sep 17 00:00:00 2001 From: Shariq Date: Sun, 10 Nov 2024 16:48:32 +0530 Subject: [PATCH] Added Search and Filter Features --- data.json | 110 ++++++++++++++----------- src/app/(pages)/growth/page.jsx | 142 ++++++++++++++------------------ 2 files changed, 121 insertions(+), 131 deletions(-) diff --git a/data.json b/data.json index 2a00823..4bbddac 100644 --- a/data.json +++ b/data.json @@ -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"] + } ] } diff --git a/src/app/(pages)/growth/page.jsx b/src/app/(pages)/growth/page.jsx index 7f30101..8eb545d 100644 --- a/src/app/(pages)/growth/page.jsx +++ b/src/app/(pages)/growth/page.jsx @@ -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 () => { @@ -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 (
- {/* Use the existing ProductsNavbar component */} {/* Header Section */} @@ -71,19 +91,51 @@ const GrowthMonetizationPage = () => { 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" />
- - - - + + + + +
- {allProducts.map((product, index) => ( + {filteredAllProducts.length === 0 ? ( +
+ No matched products +
+ ) : ( filteredAllProducts.map((product, index) => ( {

{product.description}

Explore - ))} + )))}
); }; -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;