Created
September 6, 2023 16:13
-
-
Save ricardogottheil/b45a605c7cd189a68669aa9f96defe65 to your computer and use it in GitHub Desktop.
custom-notifications component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use client"; | |
| import { useEffect } from "react"; | |
| import { VariantProps, cva } from "class-variance-authority"; | |
| import { AlertTriangle, Check, Info, Siren } from "lucide-react"; | |
| import { cn } from "@/lib/utils"; | |
| import React from "react"; | |
| export type CustomNotificationType = { | |
| text: string; | |
| severity?: "success" | "info" | "warning" | "error"; | |
| // userType?: "internal" | "external"; | |
| targetPermission?: string; | |
| endOfLife?: number; | |
| }; | |
| type CustomNotificationProps = CustomNotificationType & | |
| React.ComponentProps<"div">; | |
| const custonNotificationsContainerVariants = cva("flex px-2 py-1.5", { | |
| variants: { | |
| severity: { | |
| warning: | |
| "bg-amber-500 bg-opacity-10 dark:bg-amber-900 dark:bg-opacity-30", | |
| success: | |
| "bg-lime-500 bg-opacity-10 dark:bg-lime-900 dark:bg-opacity-30", | |
| info: "bg-lime-500 bg-opacity-10 dark:bg-lime-900 dark:bg-opacity-30", | |
| error: "bg-amber-500 bg-opacity-10 dark:bg-amber-900 dark:bg-opacity-30", | |
| }, | |
| }, | |
| defaultVariants: { | |
| severity: "warning", | |
| }, | |
| }); | |
| const custonNotificationsTextVariants = cva( | |
| "flex items-center gap-3 text-sm leading-6", | |
| { | |
| variants: { | |
| severity: { | |
| warning: "text-amber-500 dark:text-amber-400", | |
| success: "text-lime-600 dark:text-lime-400", | |
| info: "text-lime-600 dark:text-lime-400", | |
| error: "text-amber-500 dark:text-amber-400", | |
| }, | |
| }, | |
| defaultVariants: { | |
| severity: "warning", | |
| }, | |
| } | |
| ); | |
| const getIcon = (severity: string) => { | |
| switch (severity) { | |
| case "warning": | |
| return <AlertTriangle size={24} strokeWidth={1.5} />; | |
| case "success": | |
| return <Check size={24} strokeWidth={1.5} />; | |
| case "info": | |
| return <Info size={24} strokeWidth={1.5} />; | |
| case "error": | |
| return <Siren size={24} strokeWidth={1.5} />; | |
| default: | |
| return <AlertTriangle size={24} strokeWidth={1.5} />; | |
| } | |
| }; | |
| export const CustomNotification = React.forwardRef< | |
| HTMLDivElement, | |
| CustomNotificationProps | |
| >( | |
| ( | |
| { | |
| text, | |
| severity = "warning", | |
| // userType = "internal", | |
| targetPermission, | |
| endOfLife = 30, | |
| className, | |
| ...props | |
| }, | |
| ref | |
| ) => { | |
| const [show, setShow] = React.useState(true); | |
| const [initialTimeDifference, setInitialTimeDifference] = | |
| React.useState<number | null>(null); | |
| // useEffect(() => { | |
| // const savedTimeDifference = localStorage.getItem("timeDifference"); | |
| // if (savedTimeDifference) { | |
| // setInitialTimeDifference(Number(savedTimeDifference)); | |
| // } | |
| // const endOfLifeMinutes = endOfLife * 60 * 1000; | |
| // console.log(endOfLifeMinutes, "endOfLifeMinutes"); | |
| // const currentDate = new Date(); | |
| // const hideTime = new Date(currentDate.getTime() + endOfLifeMinutes); | |
| // const timeDifference = hideTime.getTime() - currentDate.getTime(); | |
| // if (!savedTimeDifference) { | |
| // localStorage.setItem( | |
| // "timeDifference", | |
| // timeDifference.toString() | |
| // ); | |
| // setInitialTimeDifference(timeDifference); | |
| // } | |
| // console.log(timeDifference, "timeDifference"); | |
| // if (initialTimeDifference && initialTimeDifference < 0) { | |
| // setShow(false); | |
| // localStorage.removeItem("timeDifference"); | |
| // return; | |
| // } | |
| // if (initialTimeDifference && initialTimeDifference > 0) | |
| // setShow(true); | |
| // const timer = setTimeout(() => { | |
| // setShow(false); | |
| // }, initialTimeDifference ?? 0); | |
| // return () => clearTimeout(timer); | |
| // }, [endOfLife, initialTimeDifference]); | |
| // if (!show) return null; | |
| return ( | |
| <div | |
| className={cn( | |
| custonNotificationsContainerVariants({ | |
| severity, | |
| className, | |
| }) | |
| )} | |
| ref={ref} | |
| {...props} | |
| > | |
| <p | |
| className={cn( | |
| custonNotificationsTextVariants({ | |
| severity, | |
| className, | |
| }) | |
| )} | |
| > | |
| {getIcon(severity)} | |
| <span className="font-normal flex-1">{text}</span> | |
| </p> | |
| </div> | |
| ); | |
| } | |
| ); | |
| CustomNotification.displayName = "CustomNotification"; | |
| export default CustomNotification; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment