Notifications Tab - Copy this React, Tailwind Component to your project

A toggle switch (role="switch") allows users to enable or disable notifications. The notificationToggle variable is bound to the toggle's state using [(ngModel)]. Accessibility features include aria-checked and aria-label attributes for screen readers. 2. Notification Language Settings If notifications are enabled, users can select the language of notifications (English, French, or Both). This is implemented using a group of radio buttons bound to the loggedInUser.gigNotificationLang variable. 3. Custom Notification Settings A second toggle (customNotificationToggle) allows users to customize their notifications. When enabled, users can: Opt to be notified of Gigs matching their skills (selectedMySkills). Opt to be notified of Gigs with specific roles (selectedByRole). 4. Role-Based Notification Customization If selectedByRole is enabled, users can: Choose a job family and role from dropdowns (selectedFamilyDropdown and selectedRoleDropdown). Add the selected family and role to a table of custom notification settings (customNotifChosen). Remove rows from the table using a delete button. 5. Accessibility The section includes accessibility features like aria-label, aria-hidden, and tabindex to ensure compatibility with screen readers and keyboard navigation. 6. Save Button A "Save" button at the bottom allows users to save their notification preferences by triggering the submit($event) method.