2 lines
9.0 KiB
JavaScript
2 lines
9.0 KiB
JavaScript
import{r as a,j as e}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{A as t}from"./Alert-BeBw6uu9.js";import{u as x,P as g}from"./main-af3pcbZa.js";function p(){const r=x(),[s,i]=a.useState(!0),[o,l]=a.useState(!0),[n,d]=a.useState(!0),[c,h]=a.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(g,{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"}),e.jsx("div",{className:"space-y-5 sm:space-y-6",children:e.jsxs("div",{className:"grid grid-cols-1 gap-5 xl:grid-cols-2 xl:gap-6",children:[e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Announcement Bar"})}),e.jsx("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:e.jsxs("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",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("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",children:e.jsx("svg",{className:"w-5 h-5 text-blue-light-500",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("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"})})}),e.jsxs("div",{children:[e.jsx("p",{className:"font-semibold text-gray-800 dark:text-white",children:"New update! Available"}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Enjoy improved functionality and enhancements."})]})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-shrink-0",children:[e.jsx("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",children:"Later"}),e.jsx("button",{className:"px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded-lg hover:bg-brand-600 transition-colors",children:"Update Now"})]})]})})]}),e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Toast Notification"})}),e.jsx("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx("button",{onClick:()=>r.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",children:"Success Toast"}),e.jsx("button",{onClick:()=>r.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",children:"Info Toast"}),e.jsx("button",{onClick:()=>r.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",children:"Warning Toast"}),e.jsx("button",{onClick:()=>r.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",children:"Error Toast"})]}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Toast notifications appear in the top right corner with margin from top. They have a thin light gray border around the entire perimeter."})]})})]}),e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Success Notification"})}),e.jsxs("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:[s&&e.jsxs("div",{className:"relative",children:[e.jsx(t,{variant:"success",title:"Success! Action Completed!",message:"Your action has been completed successfully."}),e.jsx("button",{onClick:()=>i(!1),className:"absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors","aria-label":"Close",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("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"})})})]}),!s&&e.jsx("button",{onClick:()=>i(!0),className:"px-4 py-2 text-sm font-medium text-white rounded-lg bg-success-500 hover:bg-success-600 transition-colors",children:"Show Success Notification"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Info Notification"})}),e.jsxs("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:[o&&e.jsxs("div",{className:"relative",children:[e.jsx(t,{variant:"info",title:"Heads Up! New Information",message:"This is an informational message for your attention."}),e.jsx("button",{onClick:()=>l(!1),className:"absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors","aria-label":"Close",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("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"})})})]}),!o&&e.jsx("button",{onClick:()=>l(!0),className:"px-4 py-2 text-sm font-medium text-white rounded-lg bg-blue-light-500 hover:bg-blue-light-600 transition-colors",children:"Show Info Notification"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Warning Notification"})}),e.jsxs("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:[n&&e.jsxs("div",{className:"relative",children:[e.jsx(t,{variant:"warning",title:"Alert: Double Check Required",message:"Please review this action carefully before proceeding."}),e.jsx("button",{onClick:()=>d(!1),className:"absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors","aria-label":"Close",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("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"})})})]}),!n&&e.jsx("button",{onClick:()=>d(!0),className:"px-4 py-2 text-sm font-medium text-white rounded-lg bg-warning-500 hover:bg-warning-600 transition-colors",children:"Show Warning Notification"})]})]}),e.jsxs("div",{className:"rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]",children:[e.jsx("div",{className:"px-6 py-5",children:e.jsx("h3",{className:"text-base font-medium text-gray-800 dark:text-white/90",children:"Error Notification"})}),e.jsxs("div",{className:"p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6",children:[c&&e.jsxs("div",{className:"relative",children:[e.jsx(t,{variant:"error",title:"Something Went Wrong",message:"An error occurred. Please try again or contact support."}),e.jsx("button",{onClick:()=>h(!1),className:"absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors","aria-label":"Close",children:e.jsx("svg",{className:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("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"})})})]}),!c&&e.jsx("button",{onClick:()=>h(!0),className:"px-4 py-2 text-sm font-medium text-white rounded-lg bg-error-500 hover:bg-error-600 transition-colors",children:"Show Error Notification"})]})]})]})})]})}export{p as default};
|