@greatapps/common 1.1.217 → 1.1.219

package/src/components/layouts/AppNavBar.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { NavBar } from "./NavBar";
-import { ProfilePopover } from "./ProfilePopover";
-import { NotificationsPopover } from "./NotificationsPopover";
-import { useAccountModals } from "../../store/useAccountModals";
-import type { ProfileMenuItem } from "./ProfilePopover";
-
-export interface AppNavBarProps {
-  onLogoClick?: () => void;
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  appIconHref?: string;
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  onCreditsClick?: () => void;
-  onNotificationsViewAll?: () => void;
-  logoutRedirect?: string;
-}
-
-export function AppNavBar({
-  onLogoClick,
-  activeApp,
-  appIconHref = "/",
-  showExpandButton = false,
-  onExpandClick,
-  menuItems = [],
-  onCreditsClick,
-  onNotificationsViewAll,
-  logoutRedirect,
-}: AppNavBarProps) {
-  const router = useRouter();
-  const { openConfigurations } = useAccountModals();
-
-  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
-  const handleAppIconClick = () => router.push(appIconHref);
-
-  return (
-    <NavBar
-      onLogoClick={handleLogoClick}
-      onAppIconClick={handleAppIconClick}
-      activeApp={activeApp}
-      showExpandButton={showExpandButton}
-      onExpandClick={onExpandClick}
-    >
-      <NotificationsPopover onViewAll={onNotificationsViewAll} />
-      <ProfilePopover
-        onEditProfile={() => openConfigurations()}
-        onCreditsClick={onCreditsClick}
-        menuItems={menuItems}
-        logoutRedirect={logoutRedirect}
-      />
-    </NavBar>
-  );
-}
+"use client";
+
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { useAccountModals } from "../../store/useAccountModals";
+import type { ProfileMenuItem } from "./ProfilePopover";
+
+export interface AppNavBarProps {
+  onLogoClick?: () => void;
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  appIconHref?: string;
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onCreditsClick?: () => void;
+  onNotificationsViewAll?: () => void;
+  logoutRedirect?: string;
+}
+
+export function AppNavBar({
+  onLogoClick,
+  activeApp,
+  appIconHref = "/",
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  onNotificationsViewAll,
+  logoutRedirect,
+}: AppNavBarProps) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
+  const handleAppIconClick = () => router.push(appIconHref);
+
+  return (
+    <NavBar
+      onLogoClick={handleLogoClick}
+      onAppIconClick={handleAppIconClick}
+      activeApp={activeApp}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+    >
+      <NotificationsPopover onViewAll={onNotificationsViewAll} />
+      <ProfilePopover
+        onEditProfile={() => openConfigurations()}
+        onCreditsClick={onCreditsClick}
+        menuItems={menuItems}
+        logoutRedirect={logoutRedirect}
+      />
+    </NavBar>
+  );
+}

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -1,9 +1,9 @@
-'use client';
-
+'use client';
+
 "use client"
 
 import * as React from "react"
-import { ChevronLeft } from "lucide-react"
+import { IconChevronLeft } from '@tabler/icons-react'
 import { useMdSidebarStore } from "../../store/useMdSidebarStore"
 import { cn } from "../../infra/utils/clsx"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
@@ -40,7 +40,7 @@ function MdSideBarNavigation({
                                     onClick={collapse}
                                     className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
                                 >
-                                    <ChevronLeft size={16} className="text-gray-500" />
+                                    <IconChevronLeft size={16} className="text-gray-500" />
                                 </button>
                             </TooltipTrigger>
                             <TooltipContent side="right">Recolher menu</TooltipContent>

package/src/components/layouts/NavBar.tsx

@@ -1,120 +1,120 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import { ChevronRight } from "lucide-react";
-import { Separator } from "../ui/data-display/Separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { cn } from "../../infra/utils/clsx";
-
-type NavBarProps = {
-  onLogoClick: () => void;
-  onAppIconClick?: () => void;
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-function NavBar({
-  onLogoClick,
-  onAppIconClick,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  children,
-  className,
-}: NavBarProps) {
-  return (
-    <div
-      className={cn(
-        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
-        className,
-      )}
-    >
-      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
-        {/* GreatApps logo */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger
-              className="cursor-pointer"
-              asChild
-              onClick={onLogoClick}
-            >
-              <Image
-                src="/icons/great-icon.svg"
-                alt="Great Icon"
-                width={28}
-                height={28}
-              />
-            </TooltipTrigger>
-            <TooltipContent side="right">Great</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
-              activeApp === "gapps" ? "opacity-100" : "opacity-0",
-            )}
-          />
-        </div>
-
-        <div className="relative w-full mt-[7.5px]">
-          <Separator />
-          {showExpandButton && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onExpandClick}
-                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
-                >
-                  <ChevronRight size={16} className="text-gray-500" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">Expandir menu</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild onClick={onAppIconClick}>
-              {activeApp === "gpages" ? (
-                <div className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300">
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                </div>
-              ) : (
-                <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300">
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={28}
-                    height={28}
-                  />
-                </div>
-              )}
-            </TooltipTrigger>
-            <TooltipContent side="right">GreatPages</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
-              activeApp === "gpages" ? "opacity-100" : "opacity-0",
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center gap-2">{children}</div>
-    </div>
-  );
-}
-
-export { NavBar };
-export type { NavBarProps };
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { IconChevronRight } from '@tabler/icons-react';
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  onLogoClick: () => void;
+  onAppIconClick?: () => void;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  return (
+    <div
+      className={cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
+        {/* GreatApps logo */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger
+              className="cursor-pointer"
+              asChild
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="Great Icon"
+                width={28}
+                height={28}
+              />
+            </TooltipTrigger>
+            <TooltipContent side="right">Great</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
+                >
+                  <IconChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild onClick={onAppIconClick}>
+              {activeApp === "gpages" ? (
+                <div className="size-10 rounded-lg cursor-pointer flex items-center justify-center bg-cyan-100 border-2 border-white ring-2 ring-cyan-300">
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                </div>
+              ) : (
+                <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300">
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={28}
+                    height={28}
+                  />
+                </div>
+              )}
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatPages</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-cyan-300 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gpages" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps };

package/src/components/layouts/NotificationsPopover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Bell } from "lucide-react";
+import { IconBell } from '@tabler/icons-react';
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
 import { Button } from "../ui/buttons/Button";
@@ -46,7 +46,7 @@ function NotificationsPopover({
         <div
           className={`relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`}
         >
-          <Bell size={20} className="text-gray-500" />
+          <IconBell size={20} className="text-gray-500" />
           {totalUnread > 0 && (
             <span
               className={cn(
@@ -75,7 +75,7 @@ function NotificationsPopover({
             messages.map((message, index) => (
               <NotificationCard
                 key={message.id}
-                icon={<Bell size={16} />}
+                icon={<IconBell size={16} />}
                 iconBgColor="bg-gray-100"
                 title={message.subject}
                 time={formatDistanceToNow(new Date(message.datetime_add), {
@@ -89,7 +89,7 @@ function NotificationsPopover({
           ) : (
             <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
               <div className="bg-gray-50 rounded-md p-2.5">
-                <Bell size={20} color="var(--color-gray-950)" />
+                <IconBell size={20} color="var(--color-gray-950)" />
               </div>
               <span className="paragraph-small-medium text-gray-950">
                 Sem notificações por enquanto

package/src/components/layouts/ProfilePopover.tsx

@@ -6,7 +6,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
 import { Progress } from "../ui/feedback/Progress";
 import { Separator } from "../ui/data-display/Separator";
-import { Settings } from "lucide-react";
+import { IconSettings } from '@tabler/icons-react';
 import { NavBarItem } from "./NavBarItem";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
@@ -165,7 +165,7 @@ function ProfilePopover({
                 )}
                 {onEditProfile && (
                   <NavBarItem
-                    icon={<Settings size={16} />}
+                    icon={<IconSettings size={16} />}
                     label="Configurações"
                     onClick={onEditProfile}
                   />