Appearance
Overview
Users are given the flexibility to control their notification preferences within the application.
Through this feature, users can choose whether they wish to receive notifications from the application or not. Additionally, they have the option to customize their notification settings based on their preferences.
Users can specify whether they want to receive notifications for various events, including incoming calls, incoming chat messages, upcoming scheduled events, and new scheduled event invitations. This level of customization empowers users to tailor their notification experience, ensuring that they only receive relevant alerts and updates based on their specific communication needs and priorities.
How to extend
Below is an example on how to on the notification settings by introducing notifications for Event Reminder. This will allow users to set reminders for upcoming events, receiving notifications at specified intervals before the event starts.
svelte
<script lang="ts">
import { onMount } from "svelte";
const NOTIFICATION = "Notifications";
let enableNotifications = false;
let calls = false;
let messages = false;
let events = false;
let invites = false;
// new variable declaration for the event reminder
let eventReminder = false
let notification = JSON.parse(localStorage.getItem(NOTIFICATION)) || {}
onMount(() => {
if (notification) {
enableNotifications = notification.enableNotifications;
calls = notification.calls
messages = notification.messages
events = notification.events
invites = notification.invites
// event reminder
eventReminder = notification.eventReminder
}
});
$: {
localStorage.setItem(
NOTIFICATION,
JSON.stringify({
enableNotifications: enableNotifications,
calls: calls,
messages: messages,
events: events,
invites: invites,
// event reminder
eventReminder: eventReminder
})
);
}
</script>
<div role="group" aria-labelledby="label-email" class="">
<div class="sm:items-baseline pl-10 pt-2">
<div class="mt-4 sm:mt-0 sm:col-span-2">
<div class="max-w-lg space-y-4">
<div class="relative flex text-sm">
<label for="offers" class="font-medium text-gray-700"
>Enable Notifications</label
>
<div class="ml-4 text-sm">
<button type="button" on:click={_ => enableNotifications = !enableNotifications} class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" class:bg-indigo-600={enableNotifications} role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<span class="translate-x-5 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200" class:translate-x-0={!enableNotifications}>
<span class="opacity-0 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" class:opacity-100={!enableNotifications} class:ease-out={enableNotifications} class:duration-100={enableNotifications} aria-hidden="true">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" class:opacity-100={enableNotifications} class:ease-in={enableNotifications} class:duration-200={enableNotifications} aria-hidden="true">
<svg class="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span>
</span>
</button>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input
on:change={() => !calls}
bind:checked={calls}
id="calls"
name="calls"
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-600 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="calls" class="font-medium text-gray-700"
>Incoming Calls</label
>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input
on:change={() => !messages}
bind:checked={messages}
id="messages"
name="messages"
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-600 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="messages" class="font-medium text-gray-700"
>Incoming Chat Message</label
>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input
on:change={() => !events}
bind:checked={events}
id="events"
name="events"
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-600 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="events" class="font-medium text-gray-700"
>Upcoming Scheduled Event</label
>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input
on:change={() => !invites}
bind:checked={invites}
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-600 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="invites" class="font-medium text-gray-700"
>New Scheduled Event Invite</label
>
</div>
</div>
<!-- Event Reminder -->
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input
on:change={() => !eventReminder}
bind:checked={eventReminder}
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-600 rounded"
/>
</div>
<div class="ml-3 text-sm">
<label for="invites" class="font-medium text-gray-700"
>Event Reminder</label
>
</div>
</div>
</div>
</div>
</div>
</div>