@levo-so/blocks 0.1.59 → 0.1.61

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

@@ -0,0 +1,546 @@
+import { cn } from "@levo-so/react";
+import type { ILevoBlockBaseProps } from "@levo-so/studio";
+import {
+  Box,
+  Button,
+  Container,
+  Icon,
+  Image,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+  Section,
+  Typography,
+  UserMenu,
+} from "@levo-so/studio";
+import { ChevronDown, ChevronRight, Menu, X } from "lucide-react";
+import React, { useEffect, useState } from "react";
+
+import type { INavbar3Content } from "./navbar-3.schema";
+
+const NestedDropdownItem: React.FC<{
+  subItem: any;
+  parentIndex: number;
+  subIndex: number;
+}> = ({ subItem, parentIndex, subIndex }) => {
+  const [isNestedDropdownOpen, setIsNestedDropdownOpen] = useState<boolean>(false);
+  const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
+  const hasNestedItems =
+    nestedSubItems && Array.isArray(nestedSubItems) && nestedSubItems.length > 0;
+
+  if (!hasNestedItems) {
+    return (
+      <Box
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
+        data-levo_group_item
+        className="flex items-center gap-3"
+      >
+        {subItem?.["sub-item-icon"] && (
+          <Box
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon-container`}
+            className=""
+          >
+            <Icon
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon`}
+            />
+          </Box>
+        )}
+        <Box
+          elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
+          className=""
+        >
+          <Typography
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
+          />
+          <Typography
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <PopoverRoot open={isNestedDropdownOpen} onOpenChange={setIsNestedDropdownOpen}>
+      <PopoverTrigger
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-link`}
+        onMouseEnter={() => setIsNestedDropdownOpen(true)}
+        data-levo_group_item
+        className="group flex items-center justify-between px-4 py-2 focus:outline-none"
+      >
+        <div className="flex items-center gap-3">
+          {subItem?.["sub-item-icon"] && (
+            <Box
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon-container`}
+              className=""
+            >
+              <Icon
+                elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-icon`}
+              />
+            </Box>
+          )}
+          <Box
+            elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
+            className=""
+          >
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
+            />
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
+            />
+          </Box>
+        </div>
+        <div className="ml-auto group-hover:text-text-1">
+          <ChevronRight
+            aria-hidden="true"
+            style={{
+              position: "relative",
+              top: "1px",
+              height: "14px",
+              width: "14px",
+              transitionProperty:
+                "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+              transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+              transitionDuration: "300ms",
+              color: "var(--color-text-1)",
+            }}
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items`}
+        onMouseLeave={() => setIsNestedDropdownOpen(false)}
+        inPortal={true}
+        className="!bg-white z-[60] min-w-16 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)",
+          minWidth: "8rem",
+          width: "fit-content",
+        }}
+        side="right"
+        align="start"
+      >
+        {nestedSubItems?.map((_: any, nestedIdx: number) => (
+          <Box
+            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 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`}
+            />
+            <Typography
+              elementKey={`desktop-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
+            />
+          </Box>
+        ))}
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};
+
+const DropdownNavigationItem: React.FC<{
+  navItem: any;
+  index: number;
+}> = ({ navItem, index }) => {
+  const [isDropdownPopoverOpen, setIsDropdownPopoverOpen] = useState<boolean>(false);
+
+  const subItems = navItem?.["sub-items"] as Array<any>;
+
+  return (
+    <PopoverRoot
+      open={isDropdownPopoverOpen}
+      onOpenChange={(open) => setIsDropdownPopoverOpen(open)}
+      defaultOpen
+    >
+      <PopoverTrigger
+        elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger`}
+        onMouseEnter={() => setIsDropdownPopoverOpen(true)}
+        data-levo_group_item
+        className="focus:outline-none"
+      >
+        <Typography elementKey={`desktop-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
+        <ChevronDown
+          aria-hidden="true"
+          style={{
+            position: "relative",
+
+            height: "14px",
+            width: "14px",
+            transitionProperty:
+              "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            transitionDuration: "300ms",
+            rotate: isDropdownPopoverOpen ? "180deg" : "0deg",
+            color: "var(--color-text-1)",
+          }}
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        elementKey={`desktop-nav-menu.${index}.sub-items_levoGroup`}
+        data-levo_group
+        onMouseLeave={() => setIsDropdownPopoverOpen(false)}
+        inPortal={false}
+        className="focus:outline-none"
+        side="bottom"
+        align="start"
+      >
+        {subItems && Array?.isArray(subItems)
+          ? subItems?.map((subItem: any, idx: number) => (
+              <NestedDropdownItem
+                key={`subItem_${index}_${idx}`}
+                subItem={subItem}
+                parentIndex={index}
+                subIndex={idx}
+              />
+            ))
+          : null}
+      </PopoverContent>
+    </PopoverRoot>
+  );
+};
+
+const DesktopNavItem: React.FC<{
+  navItem: any;
+  index: number;
+}> = ({ index, navItem }) => {
+  const navSubItems = navItem?.["sub-items"] ?? [];
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+
+  console.log({
+    navItem,
+  });
+
+  return (
+    <>
+      {isNavItemDropdown && <DropdownNavigationItem navItem={navItem} index={index} />}
+      {!isNavItemDropdown && (
+        <Typography data-levo_groupItem elementKey={`desktop-nav-menu.${index}.nav-item-title`} />
+      )}
+    </>
+  );
+};
+
+const DesktopNavigationMenu: React.FC<{
+  navItems: any;
+}> = ({ navItems }) => {
+  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}`} />;
+      })}
+    </Box>
+  );
+};
+
+const NestedDropdownItemMobile: React.FC<any> = ({ subItem, parentIndex, subIndex }) => {
+  const [isNestedDropdownOpen, setIsNestedDropdownOpen] = useState<boolean>(false);
+
+  const nestedSubItems = subItem?.["sub-sub-items"] as Array<any>;
+
+  return (
+    <>
+      <Box
+        elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-trigger`}
+        onClick={() => setIsNestedDropdownOpen((prev) => !prev)}
+        data-levo_group_item
+        className="flex w-full items-center focus:outline-none"
+      >
+        <Box
+          elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-text-container`}
+        >
+          <Typography
+            elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-title`}
+          />
+
+          <Typography
+            elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-item-description`}
+          />
+        </Box>
+
+        <ChevronDown
+          aria-hidden="true"
+          className="flex-shrink-0"
+          style={{
+            height: "16px",
+            width: "16px",
+            transition: "transform 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+            transform: isNestedDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
+            color: "black",
+          }}
+        />
+      </Box>
+
+      {isNestedDropdownOpen && Array.isArray(nestedSubItems) && (
+        <Box
+          elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.nested-dropdown-trigger`}
+          className="mt-4 flex w-full flex-col gap-y-2 pl-4 focus:outline-none"
+        >
+          {nestedSubItems.map((nestedSubItem, nestedIdx) => (
+            <Box
+              key={`nestedSubItem_${parentIndex}_${subIndex}_${nestedIdx}`}
+              elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-container`}
+              className={cn("focus:outline-none")}
+              data-levo_group_item
+            >
+              <Typography
+                elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-title`}
+              />
+
+              <Typography
+                elementKey={`mobile-nav-menu.${parentIndex}.sub-items.${subIndex}.sub-sub-items.${nestedIdx}.nested-sub-item-description`}
+              />
+            </Box>
+          ))}
+        </Box>
+      )}
+    </>
+  );
+};
+
+const DropdownNavigationItemMobile: React.FC<{
+  navItem: any;
+  index: number;
+  setIsOpen: (value: boolean) => void;
+}> = ({ navItem, index, setIsOpen }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+  const subItems = navItem?.["sub-items"] as Array<any>;
+  const hasSubItems = subItems && Array.isArray(subItems) && subItems.length > 0;
+  const hasSubSubItems = hasSubItems;
+
+  return (
+    <Box elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-container`}>
+      <Box
+        elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger`}
+        onClick={() => setIsDropdownOpen((prev) => !prev)}
+        className="flex items-center justify-between focus:outline-none"
+      >
+        <Typography elementKey={`mobile-nav-menu.${index}.nav-item-dropdown-trigger-title`} />
+        {hasSubSubItems && (
+          <ChevronDown
+            aria-hidden="true"
+            style={{
+              position: "relative",
+              top: "2px",
+              height: "16px",
+              width: "16px",
+              transitionProperty:
+                "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+              transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+              transitionDuration: "300ms",
+              rotate: isDropdownOpen ? "180deg" : "0deg",
+              color: "var(--color-text-1)",
+            }}
+          />
+        )}
+      </Box>
+      {isDropdownOpen && hasSubItems && (
+        <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;
+
+            return (
+              <Box
+                key={`subItem_${index}_${idx}`}
+                elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-link`}
+                data-levo_group_item
+                className={cn("")}
+              >
+                {hasNestedItems ? (
+                  <NestedDropdownItemMobile
+                    subItem={subItem}
+                    parentIndex={index}
+                    subIndex={idx}
+                    setIsOpen={setIsOpen}
+                  />
+                ) : (
+                  <Box
+                    elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-text-container`}
+                  >
+                    <Typography
+                      elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-title`}
+                    />
+                    <Typography
+                      elementKey={`mobile-nav-menu.${index}.sub-items.${idx}.sub-item-description`}
+                    />
+                  </Box>
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const MobileNavItem: React.FC<{
+  navItem: any;
+  index: number;
+  setIsOpen: (value: boolean) => void;
+}> = ({ navItem, index, setIsOpen }) => {
+  const navSubItems = navItem?.["sub-items"] ?? [];
+  const isNavItemDropdown = navSubItems && Array.isArray(navSubItems) && navSubItems?.length > 0;
+
+  return (
+    <React.Fragment>
+      {isNavItemDropdown && (
+        <DropdownNavigationItemMobile navItem={navItem} setIsOpen={setIsOpen} index={index} />
+      )}
+      {!isNavItemDropdown && (
+        <Box
+          data-levo_group_item
+          elementKey={`mobile-nav-menu.${index}.nav-item-title-container`}
+          onClick={() => setIsOpen(false)}
+        >
+          <Typography elementKey={`mobile-nav-menu.${index}.nav-item-title`} />
+        </Box>
+      )}
+    </React.Fragment>
+  );
+};
+
+const MobileNavigationSheet: React.FC<{
+  navItems: any;
+  content: any;
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}> = ({ navItems, content, isOpen, setIsOpen }) => {
+  return (
+    <React.Fragment>
+      <Button
+        elementKey="mobile-nav-menu-button"
+        aria-label="Open navigation"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? <X size={32} /> : <Menu size={32} />}
+      </Button>
+      {isOpen && (
+        <Box elementKey="mobile-nav-menu-wrapper">
+          <Box elementKey="mobile-nav-menu_levoGroup" data-levo_group>
+            {Array.isArray(navItems)
+              ? navItems?.map((item, index) => {
+                  return (
+                    <MobileNavItem
+                      navItem={item}
+                      key={`${item?.["nav-item-title"]}_${index}`}
+                      setIsOpen={setIsOpen}
+                      index={index}
+                    />
+                  );
+                })
+              : null}
+          </Box>
+          {content?.["mobile-cta-group"]?.length > 0 && (
+            <Box elementKey="mobile-cta-group_levoGroup" data-levo_group>
+              {content?.["mobile-cta-group"]?.map((_: any, index: number) => (
+                <Button
+                  key={`mobile-cta-group.${index}.cta`}
+                  elementKey={`mobile-cta-group.${index}.cta`}
+                  data-levo_group_item
+                  className="mb-2 w-full"
+                >
+                  {content?.["mobile-cta-group"]?.[index]?.cta}
+                </Button>
+              ))}
+            </Box>
+          )}
+          <Box elementKey="socials-mobile_levoGroup" data-levo_group>
+            {content?.["socials-mobile"]?.map((_: any, index: number) => (
+              <Icon
+                key={`socials-mobile.${index}.social`}
+                elementKey={`socials-mobile.${index}.social`}
+                data-levo_group_item
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </React.Fragment>
+  );
+};
+
+const Navbar4: React.FC<ILevoBlockBaseProps<INavbar3Content>> = ({ content }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY === 0 && isScrolled) {
+        setIsScrolled(false);
+      } else if (window.scrollY >= 40 && !isScrolled) {
+        setIsScrolled(true);
+      }
+    };
+
+    document.addEventListener("scroll", handleScroll);
+
+    return () => {
+      document.removeEventListener("scroll", handleScroll);
+    };
+  }, [isScrolled]);
+
+  const desktopNavLinks = content?.["desktop-nav-menu"];
+  const mobileNavLinks = content?.["mobile-nav-menu"];
+
+  return (
+    <>
+      {isOpen && (
+        <Box
+          elementKey="mobile-background-overlay"
+          onClick={() => setIsOpen(false)}
+          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")}>
+        <Container elementKey="nav-container">
+          <Image elementKey="nav-logo" alt="Logo" />
+          <Box elementKey="nav-content">
+            <Box elementKey="nav-content-top">
+              <Box elementKey="socials_levoGroup" data-levo_group>
+                {content?.socials?.map((_: any, index: number) => (
+                  <Icon
+                    key={`socials.${index}.social`}
+                    elementKey={`socials.${index}.social`}
+                    data-levo_group_item
+                  />
+                ))}
+              </Box>
+              <Box elementKey="desktop-cta-group_levoGroup" data-levo_group>
+                {content?.["desktop-cta-group"]?.map((_: any, index: number) => (
+                  <Button
+                    key={`desktop-cta-group.${index}.cta`}
+                    elementKey={`desktop-cta-group.${index}.cta`}
+                    data-levo_group_item
+                  />
+                ))}
+              </Box>
+            </Box>
+            <Box elementKey="nav-content-bottom">
+              {desktopNavLinks &&
+                Array?.isArray(desktopNavLinks) &&
+                desktopNavLinks?.length > 0 && <DesktopNavigationMenu navItems={desktopNavLinks} />}
+            </Box>
+          </Box>
+
+          <MobileNavigationSheet
+            navItems={mobileNavLinks || []}
+            content={content}
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+          />
+        </Container>
+      </Section>
+    </>
+  );
+};
+
+export default Navbar4;

package/src/blocks/polling/polling-1.schema.ts

@@ -5,8 +5,7 @@ const DEFAULT_CONTENT = {
   container: null,
   header: null,
   title: "Polls",
-  description:
-    "Our polls help you to get the insights you need to make informed decisions.",
+  description: "Our polls help you to get the insights you need to make informed decisions.",
   polls: null,
   loading_container: null,
 };
@@ -60,25 +59,7 @@ export const Polling1: IBlock = {
       key: "default",
       title: "Default",
       styles: {
-        layout: {
-          width: "100%",
-          "padding-top": "10xl",
-          "padding-bottom": "10xl",
-          "padding-right": "8xl",
-          "padding-left": "8xl",
-          tablet: {
-            "padding-top": "5xl",
-            "padding-bottom": "5xl",
-            "padding-right": "5xl",
-            "padding-left": "5xl",
-          },
-          mobile: {
-            "padding-top": "2xl",
-            "padding-bottom": "2xl",
-            "padding-right": "2xl",
-            "padding-left": "2xl",
-          },
-        },
+        layout: {},
         container: {
           width: "100%",
           display: "flex",