Merge pull request #55 from plezanje-net/update-tab-menu

Add disabled option to tab-menu and update sandbox page.
plezanje-net · Nov 2, 2024 · e4483dd · e4483dd
2 parents 30057a7 + d7fa87e
commit e4483dd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 26 deletions.
diff --git a/src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-header/crag-tab-menu.tsx b/src/app/[lang]/crag/[cragSlug]/(crag)/components/crag-header/crag-tab-menu.tsx
@@ -6,7 +6,7 @@ import IconComment from "@/components/ui/icons/comment";
 import IconGallery from "@/components/ui/icons/gallery";
 import IconInfo from "@/components/ui/icons/info";
 import IconRoutes from "@/components/ui/icons/routes";
-import TabMenu, { TabMenuItem } from "@/components/ui/tab-menu";
+import TabMenu, { TTabMenuItem } from "@/components/ui/tab-menu";
 import { IconSize } from "@/components/ui/icons/icon-size";
 
 interface Props {
@@ -16,7 +16,7 @@ interface Props {
 function CragTabMenu({ crag }: Props) {
   const i18nPathname = useI18nPathname();
 
-  const menuItems: TabMenuItem[] = [
+  const menuItems: TTabMenuItem[] = [
     {
       label: "Info",
       link: `/plezalisce/${crag.slug}/info`,

diff --git a/src/app/sandbox/tab-menu/[selectedTab]/page.tsx b/src/app/sandbox/tab-menu/[selectedTab]/page.tsx
@@ -1,12 +1,13 @@
 "use client";
-import TabMenu, { TabMenuItem } from "@/components/ui/tab-menu";
 
-interface Params {
+import TabMenu, { TTabMenuItem } from "@/components/ui/tab-menu";
+
+type TTabMenuPageParams = {
   params: { selectedTab?: string };
-}
+};
 
-function TabMenuPage({ params }: Params) {
-  const menuItems: TabMenuItem[] = [
+function TabMenuPage({ params }: TTabMenuPageParams) {
+  const menuItems: TTabMenuItem[] = [
     {
       label: "Informacije",
       link: "/sandbox/tab-menu/info",
@@ -25,9 +26,11 @@ function TabMenuPage({ params }: Params) {
     {
       label: "Galerija",
       link: "/sandbox/tab-menu/galerija",
-      isActive: params.selectedTab === "galerija",
+      isActive: false,
+      isDisabled: true,
     },
   ];
+
   return (
     <div className="m-8">
       <h1 className="text-xl">Tab menu demo</h1>

diff --git a/src/components/ui/tab-menu.tsx b/src/components/ui/tab-menu.tsx
@@ -1,18 +1,19 @@
 import Link from "next/link";
 import { ReactNode } from "react";
 
-export interface TabMenuItem {
+type TTabMenuItem = {
   label: string;
   link: string;
   isActive: boolean;
   icon?: ReactNode;
-}
+  isDisabled?: boolean;
+};
 
-interface TabMenuProps {
-  items: TabMenuItem[];
-}
+type TTabMenuProps = {
+  items: TTabMenuItem[];
+};
 
-function TabMenu({ items }: TabMenuProps) {
+function TabMenu({ items }: TTabMenuProps) {
   return (
     <ul className="flex justify-center border-b border-b-neutral-200 border-t border-t-transparent">
       {items.map((item, index) => (
@@ -22,27 +23,42 @@ function TabMenu({ items }: TabMenuProps) {
                     ${
                       item.isActive
                         ? "-mt-px rounded-t-lg border-l border-r border-t border-neutral-200 bg-white"
-                        : "px-px"
+                        : item.isDisabled
+                          ? "text-neutral-400 px-px"
+                          : "px-px"
                     }
                     `}
         >
-          <Link
-            href={item.link}
-            className={`flex gap-2 px-4 py-2 hover:fill-blue-500 hover:text-blue-500 ${
-              item.isActive && " fill-blue-500 text-blue-500"
-            }`}
-          >
-            {item.icon}
-            <span
-              className={`${item.icon && !item.isActive && "hidden md:inline"}`}
+          {!item.isDisabled ? (
+            <Link
+              href={item.link}
+              className={`flex gap-2 px-4 py-2 hover:fill-blue-500 hover:text-blue-500 ${
+                item.isActive && " fill-blue-500 text-blue-500"
+              }`}
             >
-              {item.label}
+              {item.icon}
+              <span
+                className={`${item.icon && !item.isActive && "hidden md:inline"}`}
+              >
+                {item.label}
+              </span>
+            </Link>
+          ) : (
+            <span className="flex gap-2 px-4 py-2">
+              {item.icon}
+              <span
+                className={`${item.icon && !item.isActive && "hidden md:inline"}`}
+              >
+                {item.label}
+              </span>
             </span>
-          </Link>
+          )}
         </li>
       ))}
     </ul>
   );
 }
 
 export default TabMenu;
+
+export type { TTabMenuItem };