feat: added custom banner

ardelan869 · Oct 15, 2024 · 6523750 · 6523750
1 parent 31a2277
commit 6523750
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/import.lua b/import.lua
@@ -129,7 +129,7 @@ function Menu:CloseAll()
   resetNUI();
 end
 
-function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems)
+function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems, banner)
   ---@class Menu
   local menu = {
     id = generateUUID(),
@@ -138,6 +138,7 @@ function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems)
     subtitle = menuSubtitle,
     width = menuWidth,
     maxVisibleItems = maxVisibleItems,
+    banner = banner,
     __components = {}
   };
 
@@ -419,7 +420,10 @@ function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems)
       id = self.id,
       resource = self.resource,
       title = self.title,
-      subtitle = self.subtitle
+      subtitle = self.subtitle,
+      width = self.width,
+      maxVisibleItems = self.maxVisibleItems,
+      banner = self.banner
     };
   end
 

diff --git a/meta.lua b/meta.lua
@@ -124,6 +124,7 @@
 ---@field subtitle? string
 ---@field width? number
 ---@field maxVisibleItems? number
+---@field banner? string
 
 ---@class Menu:MenuData
 ---@field __components MenuComponent[]
@@ -149,7 +150,7 @@
 ---@field __cached Menu[]
 ---@field current? string
 ---@field opened string[]
----@field Create fun(self: self, title: string, subtitle?: string, width?: number, maxVisibleItems?: number): Menu
+---@field Create fun(self: self, title: string, subtitle?: string, width?: number, maxVisibleItems?: number, banner?: string): Menu
 ---@field GetById fun(self: self, id: string): Menu?
 ---@field GetOpened fun(self: self): Menu?
 ---@field Open fun(self: self, menu: Menu)

diff --git a/web/src/components/menu.tsx b/web/src/components/menu.tsx
@@ -5,7 +5,7 @@ import Description from '@/components/description';
 import { useEffect, useState } from 'react';
 import { useKeyDown } from '@/lib/keys';
 import { useNuiEvent } from '@/lib/hooks';
-import { debugData, fetchNui, findLastIndex } from '@/lib';
+import { cn, debugData, fetchNui, findLastIndex } from '@/lib';
 
 interface MenuProps {
   id: string;
@@ -14,6 +14,7 @@ interface MenuProps {
   subtitle?: string;
   width?: number;
   maxVisibleItems?: number;
+  banner?: string;
 }
 
 export default function Menu() {
@@ -209,7 +210,8 @@ export default function Menu() {
           resource: 'ragemenu',
           title: 'Test',
           width: 432,
-          maxVisibleItems: 10
+          maxVisibleItems: 10,
+          banner: 'https://i.imgur.com/Ua8m2Wq.gif'
         }
       },
       {
@@ -265,7 +267,13 @@ export default function Menu() {
         className="absolute w-[432px] top-5 left-5 tracking-[1px] text-[20px] font-chalet font-black"
         style={{ width: `${menu.width || 432}px` }}
       >
-        <header className="w-full h-[128px] bg-header-gradient grid place-items-center">
+        <header
+          className={cn(
+            'w-full h-[128px] bg-header-gradient grid place-items-center',
+            !!menu.banner && 'bg-cover bg-center bg-no-repeat'
+          )}
+          style={menu.banner ? { backgroundImage: `url(${menu.banner})` } : {}}
+        >
           <h1 className="font-signpainter text-7xl text-white translate-y-2 font-extralight">
             {menu.title}
           </h1>