279 lines
13 KiB
TypeScript
279 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import Alert from '../../../components/ui/alert/Alert';
|
|
import { useToast } from '../../../components/ui/toast/ToastContainer';
|
|
import PageMeta from '../../../components/common/PageMeta';
|
|
|
|
export default function Notifications() {
|
|
const toast = useToast();
|
|
|
|
// State for inline notifications (for demo purposes)
|
|
const [showSuccess, setShowSuccess] = useState(true);
|
|
const [showInfo, setShowInfo] = useState(true);
|
|
const [showWarning, setShowWarning] = useState(true);
|
|
const [showError, setShowError] = useState(true);
|
|
|
|
return (
|
|
<>
|
|
<PageMeta
|
|
title="React.js Notifications Dashboard | TailAdmin - React.js Admin Dashboard Template"
|
|
description="This is React.js Notifications Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
|
|
/>
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{/* Components Grid */}
|
|
<div className="grid grid-cols-1 gap-5 xl:grid-cols-2 xl:gap-6">
|
|
{/* Announcement Bar Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Announcement Bar
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="flex items-center justify-between gap-4 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center gap-3">
|
|
{/* Lightning bolt icon */}
|
|
<div className="flex-shrink-0 w-10 h-10 bg-blue-light-100 dark:bg-blue-light-500/20 rounded-lg flex items-center justify-center">
|
|
<svg
|
|
className="w-5 h-5 text-blue-light-500"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-gray-800 dark:text-white">
|
|
New update! Available
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Enjoy improved functionality and enhancements.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<button className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
|
|
Later
|
|
</button>
|
|
<button className="px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors">
|
|
Update Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Toast Notification Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Toast Notification
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<button
|
|
onClick={() => toast.success('Success! Action Completed!', 'Your action has been completed successfully.')}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-success-500 hover:bg-success-600 transition-colors"
|
|
>
|
|
Success Toast
|
|
</button>
|
|
<button
|
|
onClick={() => toast.info('Heads Up! New Information', 'This is an informational message.')}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-light-500 hover:bg-blue-light-600 transition-colors"
|
|
>
|
|
Info Toast
|
|
</button>
|
|
<button
|
|
onClick={() => toast.warning('Alert: Double Check Required', 'Please review this action carefully.')}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-warning-500 hover:bg-warning-600 transition-colors"
|
|
>
|
|
Warning Toast
|
|
</button>
|
|
<button
|
|
onClick={() => toast.error('Something Went Wrong', 'An error occurred. Please try again.')}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-error-500 hover:bg-error-600 transition-colors"
|
|
>
|
|
Error Toast
|
|
</button>
|
|
</div>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Toast notifications appear in the top right corner with margin from top. They have a thin light gray border around the entire perimeter.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Success Notification Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Success Notification
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
{showSuccess && (
|
|
<div className="relative">
|
|
<Alert
|
|
variant="success"
|
|
title="Success! Action Completed!"
|
|
message="Your action has been completed successfully."
|
|
/>
|
|
<button
|
|
onClick={() => setShowSuccess(false)}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{!showSuccess && (
|
|
<button
|
|
onClick={() => setShowSuccess(true)}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-success-500 hover:bg-success-600 transition-colors"
|
|
>
|
|
Show Success Notification
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Notification Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Info Notification
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
{showInfo && (
|
|
<div className="relative">
|
|
<Alert
|
|
variant="info"
|
|
title="Heads Up! New Information"
|
|
message="This is an informational message for your attention."
|
|
/>
|
|
<button
|
|
onClick={() => setShowInfo(false)}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{!showInfo && (
|
|
<button
|
|
onClick={() => setShowInfo(true)}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-light-500 hover:bg-blue-light-600 transition-colors"
|
|
>
|
|
Show Info Notification
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Warning Notification Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Warning Notification
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
{showWarning && (
|
|
<div className="relative">
|
|
<Alert
|
|
variant="warning"
|
|
title="Alert: Double Check Required"
|
|
message="Please review this action carefully before proceeding."
|
|
/>
|
|
<button
|
|
onClick={() => setShowWarning(false)}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{!showWarning && (
|
|
<button
|
|
onClick={() => setShowWarning(true)}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-warning-500 hover:bg-warning-600 transition-colors"
|
|
>
|
|
Show Warning Notification
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error Notification Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Error Notification
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
{showError && (
|
|
<div className="relative">
|
|
<Alert
|
|
variant="error"
|
|
title="Something Went Wrong"
|
|
message="An error occurred. Please try again or contact support."
|
|
/>
|
|
<button
|
|
onClick={() => setShowError(false)}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{!showError && (
|
|
<button
|
|
onClick={() => setShowError(true)}
|
|
className="px-4 py-2 text-sm font-medium text-white rounded-lg bg-error-500 hover:bg-error-600 transition-colors"
|
|
>
|
|
Show Error Notification
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|