@oneuptime/common 9.4.13 → 9.5.1

package/UI/Components/HeaderAlert/NotificationBell/NotificationBellItem.tsx

@@ -0,0 +1,78 @@
+import Icon, { ThickProp } from "../../Icon/Icon";
+import React, { ReactElement } from "react";
+import { NotificationItem } from "./NotificationItem";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  item: NotificationItem;
+  onClick?: () => void;
+}
+
+const NotificationBellItem: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  const { item } = props;
+
+  let textColor: string = "text-indigo-600";
+  let bgColor: string = "bg-indigo-50";
+  let hoverBgColor: string = "hover:bg-indigo-100";
+  let borderColor: string = "border-indigo-200";
+
+  switch (item.alertType) {
+    case HeaderAlertType.SUCCESS:
+      textColor = "text-emerald-600";
+      bgColor = "bg-emerald-50";
+      hoverBgColor = "hover:bg-emerald-100";
+      borderColor = "border-emerald-200";
+      break;
+    case HeaderAlertType.ERROR:
+      textColor = "text-red-600";
+      bgColor = "bg-red-50";
+      hoverBgColor = "hover:bg-red-100";
+      borderColor = "border-red-200";
+      break;
+    case HeaderAlertType.WARNING:
+      textColor = "text-amber-600";
+      bgColor = "bg-amber-50";
+      hoverBgColor = "hover:bg-amber-100";
+      borderColor = "border-amber-200";
+      break;
+    case HeaderAlertType.INFO:
+      textColor = "text-gray-600";
+      bgColor = "bg-gray-50";
+      hoverBgColor = "hover:bg-gray-100";
+      borderColor = "border-gray-200";
+      break;
+  }
+
+  return (
+    <div
+      className={`cursor-pointer ${bgColor} ${hoverBgColor} border ${borderColor} py-2 px-3 rounded-lg transition-all duration-150`}
+      onClick={() => {
+        if (props.onClick) {
+          props.onClick();
+        } else if (item.onClick) {
+          item.onClick();
+        }
+      }}
+      title={item.tooltip}
+    >
+      <div className="flex items-center gap-2">
+        <div className={`flex-shrink-0 ${textColor}`}>
+          <Icon
+            icon={item.icon}
+            thick={ThickProp.Thick}
+            className={`h-4 w-4 stroke-[2.5px] ${textColor}`}
+          />
+        </div>
+        <div className="flex-1">
+          <span className={`text-sm font-medium ${textColor}`}>
+            {item.title}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationBellItem;

package/UI/Components/HeaderAlert/NotificationBell/NotificationBellSection.tsx

@@ -0,0 +1,40 @@
+import React, { ReactElement, ReactNode } from "react";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface ComponentProps {
+  title: string;
+  alertType: HeaderAlertType;
+  children: ReactNode;
+}
+
+const NotificationBellSection: (props: ComponentProps) => ReactElement = (
+  props: ComponentProps,
+): ReactElement => {
+  let textColor: string = "text-indigo-600";
+
+  switch (props.alertType) {
+    case HeaderAlertType.SUCCESS:
+      textColor = "text-emerald-600";
+      break;
+    case HeaderAlertType.ERROR:
+      textColor = "text-red-600";
+      break;
+    case HeaderAlertType.WARNING:
+      textColor = "text-amber-600";
+      break;
+    case HeaderAlertType.INFO:
+      textColor = "text-gray-500";
+      break;
+  }
+
+  return (
+    <div className="py-2">
+      <div className={`px-3 py-1 text-xs font-semibold uppercase ${textColor}`}>
+        {props.title}
+      </div>
+      <div className="space-y-2 px-3 py-1">{props.children}</div>
+    </div>
+  );
+};
+
+export default NotificationBellSection;

package/UI/Components/HeaderAlert/NotificationBell/NotificationItem.ts

@@ -0,0 +1,13 @@
+import IconProp from "../../../../Types/Icon/IconProp";
+import { HeaderAlertType } from "../HeaderAlert";
+
+export interface NotificationItem {
+  id: string;
+  icon: IconProp;
+  title: string;
+  count: number;
+  alertType: HeaderAlertType;
+  tooltip?: string;
+  onClick?: () => void;
+  suffix?: string;
+}

package/UI/Components/HeaderAlert/NotificationBell/index.ts

@@ -0,0 +1,5 @@
+export { default as NotificationBell } from "./NotificationBell";
+export { default as NotificationBellDropdown } from "./NotificationBellDropdown";
+export { default as NotificationBellItem } from "./NotificationBellItem";
+export { default as NotificationBellSection } from "./NotificationBellSection";
+export type { NotificationItem } from "./NotificationItem";

package/UI/Components/Icon/Icon.tsx

@@ -1378,6 +1378,29 @@ const Icon: FunctionComponent<ComponentProps> = ({
         <rect x="17" y="17" width="5" height="4" rx="0.5" />
       </>,
     );
+  } else if (icon === IconProp.Compass) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm3.5 13.5-5-2.5-2.5-5 5 2.5 2.5 5Z"
+      />,
+    );
+  } else if (icon === IconProp.Disc) {
+    return getSvgWrapper(
+      <>
+        <circle cx="12" cy="12" r="10" />
+        <circle cx="12" cy="12" r="3" />
+      </>,
+    );
+  } else if (icon === IconProp.Grid) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"
+      />,
+    );
   }
 
   return <></>;