51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
|
|
|
|
import { CheckCircleIcon } from '@shared/icons';
|
|
|
|
import { useOnboarding } from '@stores/onboarding';
|
|
|
|
export function AllowNotification() {
|
|
const [notification, setNotification] = useOnboarding((state) => [
|
|
state.notification,
|
|
state.toggleNotification,
|
|
]);
|
|
|
|
const allow = async () => {
|
|
let permissionGranted = await isPermissionGranted();
|
|
if (!permissionGranted) {
|
|
const permission = await requestPermission();
|
|
permissionGranted = permission === 'granted';
|
|
}
|
|
if (permissionGranted) {
|
|
setNotification();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div>
|
|
<h5 className="font-semibold">Allow notification</h5>
|
|
<p className="text-sm">
|
|
By allowing Lume to send notifications in your OS settings, you will receive
|
|
notification messages when someone interacts with you or your content.
|
|
</p>
|
|
</div>
|
|
{notification ? (
|
|
<div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
|
|
<CheckCircleIcon className="h-4 w-4" />
|
|
</div>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={allow}
|
|
className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
|
|
>
|
|
Allow
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|