feat(resource/interface): export notify

resource/interface/client/context.lua

@@ -1,6 +1,6 @@
 local contextMenus = {}
 
-local function showContext(id)
+function lib.showContext(id)
     local data = contextMenus[id]
     SetNuiFocus(true, true)
     SendNUIMessage({
@@ -13,7 +13,7 @@ local function showContext(id)
     })
 end
 
-local function registerContext(context)
+function lib.registerContext(context)
     for k, v in pairs(context) do
         if type(k) == 'number' then
             contextMenus[v.id] = v
@@ -25,7 +25,7 @@ local function registerContext(context)
 end
 
 RegisterNUICallback('openContext', function(id)
-    showContext(id)
+    lib.showContext(id)
 end)
 
 RegisterNUICallback('clickContext', function(data)

resource/interface/client/notify.lua

@@ -0,0 +1,19 @@
+--[[```lua
+{
+	id?: string
+	title?: string
+	description: string
+	duration?: number
+	position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
+	style?: table
+	icon?: string
+	iconColor?: string
+}
+```]]
+---@param data table
+function lib.notify(data)
+	SendNUIMessage({
+		action = 'customNotify',
+		data = data
+	})
+end

web/src/features/notifications/NotificationWrapper.tsx

@@ -28,6 +28,7 @@ interface CustomProps {
   iconColor?: string;
   position?: ToastPositionWithLogical;
   id?: number;
+  type?: string;
 }
 
 debugData<Props>([
@@ -59,23 +60,39 @@ debugData<CustomProps>([
 const Notifications: React.FC = () => {
   const toast = useToast();
 
-  // todo: figure out icon support
   useNuiEvent<CustomProps>("customNotify", (data) => {
     if (data.id && toast.isActive(data.id)) return;
+    if (!data.icon) {
+      //@ts-expect-error because amazing types
+      data.icon =
+        data.type === "error"
+          ? "fa-circle-xmark"
+          : data.type === "success"
+          ? "fa-circle-check"
+          : "fa-circle-info";
+    }
+
     toast({
-      duration: data.duration || 4000,
+      duration: data.duration || 3000,
       position: data.position || "top-right",
       render: () => (
-        <Box style={data.style} p={3} borderRadius="md" boxShadow="lg">
+        <Box
+          className={`toast-${data.type || "inform"}`}
+          style={data.style}
+          p={2}
+          borderRadius="sm"
+          boxShadow="md"
+        >
           <HStack spacing={0}>
-            {data.icon && (
+            {
               <FontAwesomeIcon
+                //@ts-expect-error because amazing types
                 icon={data.icon}
-                fontSize="1.4rem"
-                style={{ paddingRight: 11 }}
+                fontSize="1.3em"
+                style={{ paddingRight: 8 }}
                 color={data.iconColor}
               />
-            )}
+            }
             <Box w="100%">
               {data.title && <Text as="b">{data.title}</Text>}
               {data.description && <Text>{data.description}</Text>}

web/src/index.css

@@ -50,3 +50,15 @@ code {
   width: 0;
   height: 0;
 }
+
+.toast-inform {
+	background-color: #2980b9;
+}
+
+.toast-success {
+	background-color: #27ae60;
+}
+
+.toast-error {
+	background-color: #c0392b;
+}