@levo-so/blocks 0.1.60 → 0.1.61

package/src/blocks/navbar/navbar-3.tsx

@@ -23,13 +23,10 @@ const NestedDropdownItem: React.FC<{
   parentIndex: number;
   subIndex: number;
 }> = ({ subItem, parentIndex, subIndex }) => {
-  const [isNestedDropdownOpen, setIsNestedDropdownOpen] =
-    useState<boolean>(false);
+  const [isNestedDropdownOpen, setIsNestedDropdownOpen] = useState<boolean>(false);
   const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
   const hasNestedItems =
-    nestedSubItems &&
-    Array.isArray(nestedSubItems) &&
-    nestedSubItems.length > 0;
+    nestedSubItems && Array.isArray(nestedSubItems) && nestedSubItems.length > 0;
 
   if (!hasNestedItems) {
     return (
@@ -64,10 +61,7 @@ const NestedDropdownItem: React.FC<{
   }
 
   return (
-    <PopoverRoot
-      open={isNestedDropdownOpen}
-      onOpenChange={setIsNestedDropdownOpen}
-    >
+    <PopoverRoot open={isNestedDropdownOpen} onOpenChange={setIsNestedDropdownOpen}>
       <PopoverTrigger
         elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
         onMouseEnter={() => setIsNestedDropdownOpen(true)}
@@ -97,7 +91,7 @@ const NestedDropdownItem: React.FC<{
             />
           </Box>
         </div>
-        <div className="group-hover:text-text-1 ml-auto">
+        <div className="ml-auto group-hover:text-text-1">
           <ChevronRight
             aria-hidden="true"
             style={{
@@ -118,13 +112,12 @@ const NestedDropdownItem: React.FC<{
         elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items`}
         onMouseLeave={() => setIsNestedDropdownOpen(false)}
         inPortal={true}
-        className="z-[60] min-w-48 rounded-md border border-gray-200 !bg-white shadow-lg focus:outline-none"
+        className="!bg-white z-[60] min-w-48 rounded-md border border-gray-200 shadow-lg focus:outline-none"
         style={{
           backgroundColor: "white !important",
           background: "white",
           outline: "none",
-          boxShadow:
-            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+          boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
         }}
         side="right"
         align="start"
@@ -134,7 +127,7 @@ const NestedDropdownItem: React.FC<{
             elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
             key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
             data-levo_group_item
-            className="-mx-2 cursor-pointer rounded px-2 py-2 whitespace-nowrap hover:bg-gray-50 focus:outline-none"
+            className="-mx-2 cursor-pointer whitespace-nowrap rounded px-2 py-2 hover:bg-gray-50 focus:outline-none"
           >
             <Typography
               elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
@@ -153,8 +146,7 @@ const DropdownNavigationItem: React.FC<{
   navItem: any;
   index: number;
 }> = ({ navItem, index }) => {
-  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] =
-    useState<boolean>(false);
+  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState<boolean>(false);
 
   const subItems = navItem?.["sub-items"] as Array<any>;
 
@@ -170,9 +162,7 @@ const DropdownNavigationItem: React.FC<{
         data-levo_group_item
         className="focus:outline-none"
       >
-        <Typography
-          elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
         <ChevronDown
           aria-hidden="true"
           style={{
@@ -216,19 +206,13 @@ const DesktopNavItem: React.FC<{
   index: number;
 }> = ({ index, navItem }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <>
-      {isNavItemDropdown && (
-        <DropdownNavigationItem navItem={navItem} index={index} />
-      )}
+      {isNavItemDropdown && <DropdownNavigationItem navItem={navItem} index={index} />}
       {!isNavItemDropdown && (
-        <Typography
-          data-levo_group_item
-          elementKey={`desktop-nav-menu.${index}.nav-item-title`}
-        />
+        <Typography data-levo_group_item elementKey={`desktop-nav-menu.${index}.nav-item-title`} />
       )}
     </>
   );
@@ -240,25 +224,14 @@ const DesktopNavigationMenu: React.FC<{
   return (
     <Box elementKey="desktop-nav-menu_levoGroup" data-levo_group>
       {navItems?.map((item: any, index: number) => {
-        return (
-          <DesktopNavItem
-            navItem={item}
-            index={index}
-            key={`desktop-nav-menu.${index}`}
-          />
-        );
+        return <DesktopNavItem navItem={item} index={index} key={`desktop-nav-menu.${index}`} />;
       })}
     </Box>
   );
 };
 
-const NestedDropdownItemMobile: React.FC<any> = ({
-  subItem,
-  parentIndex,
-  subIndex,
-}) => {
-  const [isNestedDropdownOpen, setIsNestedDropdownOpen] =
-    useState<boolean>(false);
+const NestedDropdownItemMobile: React.FC<any> = ({ subItem, parentIndex, subIndex }) => {
+  const [isNestedDropdownOpen, setIsNestedDropdownOpen] = useState<boolean>(false);
 
   const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
 
@@ -330,8 +303,7 @@ const DropdownNavigationItemMobile: React.FC<{
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
 
   const subItems = navItem?.["sub-items"] as Array<any>;
-  const hasSubItems =
-    subItems && Array.isArray(subItems) && subItems.length > 0;
+  const hasSubItems = subItems && Array.isArray(subItems) && subItems.length > 0;
   const hasSubSubItems = hasSubItems;
 
   return (
@@ -341,9 +313,7 @@ const DropdownNavigationItemMobile: React.FC<{
         onClick={() => setIsDropdownOpen((prev) => !prev)}
         className="flex items-center justify-between focus:outline-none"
       >
-        <Typography
-          elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`}
-        />
+        <Typography elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
         {hasSubSubItems && (
           <ChevronDown
             aria-hidden="true"
@@ -363,16 +333,11 @@ const DropdownNavigationItemMobile: React.FC<{
         )}
       </Box>
       {isDropdownOpen && hasSubItems && (
-        <Box
-          elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`}
-          data-levo_group
-        >
+        <Box elementKey={`mobile-nav-menu.${index}.sub-items_levoGroup`} data-levo_group>
           {subItems?.map((subItem: any, idx: number) => {
             const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
             const hasNestedItems =
-              nestedSubItems &&
-              Array.isArray(nestedSubItems) &&
-              nestedSubItems.length > 0;
+              nestedSubItems && Array.isArray(nestedSubItems) && nestedSubItems.length > 0;
 
             return (
               <Box
@@ -415,17 +380,12 @@ const MobileNavItem: React.FC<{
   setIsOpen: (value: boolean) => void;
 }> = ({ navItem, index, setIsOpen }) => {
   const navSubItems = navItem?.["sub-items"] ?? [];
-  const isNavItemDropdown =
-    navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
 
   return (
     <React.Fragment>
       {isNavItemDropdown && (
-        <DropdownNavigationItemMobile
-          navItem={navItem}
-          setIsOpen={setIsOpen}
-          index={index}
-        />
+        <DropdownNavigationItemMobile navItem={navItem} setIsOpen={setIsOpen} index={index} />
       )}
       {!isNavItemDropdown && (
         <Box
@@ -486,15 +446,13 @@ const MobileNavigationSheet: React.FC<{
             </Box>
           )}
           <Box elementKey="icon_links_levoGroup" data-levo_group>
-            {((content as any)?.icon_links ?? [])?.map(
-              (_: any, index: number) => (
-                <Icon
-                  key={`footer-1-icon-${index}`}
-                  data-levo_group_item
-                  elementKey={`icon_links.${index}.icon`}
-                />
-              ),
-            )}
+            {((content as any)?.icon_links ?? [])?.map((_: any, index: number) => (
+              <Icon
+                key={`footer-1-icon-${index}`}
+                data-levo_group_item
+                elementKey={`icon_links.${index}.icon`}
+              />
+            ))}
           </Box>
         </Box>
       )}
@@ -502,9 +460,7 @@ const MobileNavigationSheet: React.FC<{
   );
 };
 
-const Navbar3: React.FC<ILevoBlockBaseProps<INavbar3Content>> = ({
-  content,
-}) => {
+const Navbar3: React.FC<ILevoBlockBaseProps<INavbar3Content>> = ({ content }) => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -536,17 +492,12 @@ const Navbar3: React.FC<ILevoBlockBaseProps<INavbar3Content>> = ({
           className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black/20"
         />
       )}
-      <Section
-        elementKey="layout"
-        className={cn(isScrolled ? "top-2" : "top-8")}
-      >
+      <Section elementKey="layout" className={cn(isScrolled ? "top-2" : "top-8")}>
         <Container elementKey="nav-container">
           <Image elementKey="nav-logo" alt="Logo" />
-          {desktopNavLinks &&
-            Array?.isArray(desktopNavLinks) &&
-            desktopNavLinks?.length > 0 && (
-              <DesktopNavigationMenu navItems={desktopNavLinks} />
-            )}
+          {desktopNavLinks && Array?.isArray(desktopNavLinks) && desktopNavLinks?.length > 0 && (
+            <DesktopNavigationMenu navItems={desktopNavLinks} />
+          )}
           <MobileNavigationSheet
             navItems={mobileNavLinks || []}
             content={content}