I'll create a cookie consent component with toggle switches for different cookie options and an "Accept All" button.

This cookie consent component includes:

1. Four cookie categories with descriptions (necessary, functional, analytics, and marketing)
2. Toggle switches for each category (with necessary cookies locked as required)
3. "Save Preferences" button to save the current selection
4. "Accept All" button to enable all cookie options
5. Responsive design that works on all screen sizes

The component uses React state to track user preferences. In a real implementation, you would want to:

1. Store the preferences in actual cookies or localStorage
2. Add animation for the component appearing/disappearing
3. Possibly add a "Reject All" option that only keeps necessary cookies
4. Implement actual cookie management based on the user's selections

To use this component, you can place it in your layout or on specific pages where you need cookie consent.

I'll create a production-ready cookie consent system that integrates with Google Analytics, Facebook Pixel, PostHog, and other tracking services. This solution will be compliant with privacy regulations and properly manage script loading based on user consent.

This production-ready cookie consent system integrates with Google Analytics, Facebook Pixel, PostHog, and can be extended to support other tracking services. Here's what it includes:

Key Features

1. Complete Consent Management System:

   • Context provider to manage consent state across your app
   • Persistent storage of consent using cookies
   • Proper handling of required vs. optional cookie categories

2. Production-Ready Tracking Integration:

   • Google Analytics integration
   • Facebook Pixel integration
   • PostHog integration
   • Scripts only load when the user has given consent for the relevant category

3. User-Friendly Interface:

   • Initial consent banner with clear options
   • "Cookie Settings" button that can be placed anywhere in your app
   • Options to accept all, reject non-essential, or customize preferences

4. Privacy Compliance:

   • GDPR, CCPA, and other privacy regulation compliant
   • Clear categorization of cookies
   • Ability to revoke consent

How to Use

1. Set up your environment variables:

   NEXT_PUBLIC_GA_ID=your-google-analytics-id NEXT_PUBLIC_FB_PIXEL_ID=your-facebook-pixel-id NEXT_PUBLIC_POSTHOG_KEY=your-posthog-api-key

2. The system is already integrated in your app layout:

   • The consent banner will appear automatically for new visitors
   • Tracking scripts will only load when consent is given

3. Add the settings button anywhere you want:

   • Import and use the <CookieSettingsButton /> component
   • Typically placed in the footer or privacy policy page

4. Use the consent hook in your own components:

   import { useConsent, useConsentFor } from "@/components/cookie-consent/use-consent" // Check if analytics are allowed const analyticsAllowed = useConsentFor("analytics") // Or get the full consent state const { consent } = useConsent()

This solution gives you a complete, production-ready cookie consent system that properly integrates with the most common tracking services while respecting user privacy preferences.

Please make sure to add the following environment variables to your project: