Frontend Mentor - Notifications page solution

This is a solution to the Notifications page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

Users should be able to:

Distinguish between "unread" and "read" notifications
Select "Mark all as read" to toggle the visual state of the unread notifications and set the number of unread messages to zero
View the optimal layout for the interface depending on their device's screen size
See hover and focus states for all interactive elements on the page

export const StyledComponent = styled.div<{ bg: bgType }>`
  background-color: ${({ bg }) => bg};
`;

const ThemeContext = createContext<ThemeContextType | null>(null);

const Icon = iconMap[notificationType as keyof iconProps].icon;

const GlobalStyle = createGlobalStyle<{ theme: themeProps }>`

Theming - This is a really wonderful article that helped me understand how to add theme to react apps using styled components. I really liked this pattern and will use it going forward.
React Context and Typescript - This is an amazing article which helped me finally understand how to use React Context and Typescript in a React Typescript app. I'd recommend it to anyone still learning this concept.
Creating accessible toggle - This article helped me create an accessible toggle component
Stackoverflow - A stackoverflow solution to the error Element implicitly has an any type because expression of type string can't be used to index helped me out when I got a similar error. I discovered that Typescript understands a dynamic key may have any value and so Typescript throws an error. To solve this, you must cast the dynamic key as a type of the object type or in this case, the iconprops interface.