Challenge: Build a Theme and Notifications Panel
The task involves creating a modular SettingsPanel component for managing theme preferences and notification settings in a React application. It includes a Theme section with a toggle for light and dark modes, utilizing useReducer and context for state management. The Notifications section features toggles for marketing emails and product updates, with a summary of enabled notifications displayed dynamically. The implementation requires specific technical components, such as ThemeContext and Toggle, while focusing on logic and data flow without external dependencies or complex styling.
We'll cover the following...
Problem statement
You are tasked with building a SettingsPanel component that allows users to manage theme preferences and notification settings. This panel will be part of a larger application, so it should be modular, reusable, and follow good React architecture patterns. The panel consists of two main sections: Theme and Notifications.
Theme section:
Toggle between light and dark modes using a labeled toggle (“Dark mode”).
Display current theme:
Current theme: lightorCurrent theme: dark.Manage theme globally via
useReducerwith segmented context (state and dispatch ...