@orsetra/shared-ui 1.2.2 → 1.2.4

package/components/ui/detail-page-header.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { ArrowLeft } from "lucide-react"
+import Link from "next/link"
+import type { ReactNode, ElementType } from "react"
+
+const TAB_ACTIVE =
+  "border-b-2 border-ibm-blue-60 text-ibm-blue-60 bg-ibm-blue-10/60"
+const TAB_INACTIVE =
+  "border-b-2 border-transparent text-ibm-gray-60 hover:text-ibm-blue-60 hover:bg-ibm-blue-10/40"
+
+export interface DetailPageHeaderTab {
+  id: string
+  label: string
+  icon?: ElementType
+  href: string
+}
+
+export interface DetailPageHeaderProps {
+  /** Back breadcrumb link destination */
+  backHref: string
+  /** Back breadcrumb label */
+  backLabel: string
+  /** Optional icon rendered in a blue square container */
+  icon?: ReactNode
+  /** Page title – truncated to one line */
+  title: string
+  /** Optional subtitle – truncated to one line */
+  description?: string
+  /** Slot for badges, status buttons, action buttons placed to the right */
+  actions?: ReactNode
+  /** Optional tab navigation rendered at the bottom of the header */
+  tabBar?: DetailPageHeaderTab[]
+  /** Alignment of the tab bar – defaults to "left" */
+  tabBarPosition?: "left" | "right"
+  /** Currently active tab id */
+  activeTab?: string
+}
+
+export function DetailPageHeader({
+  backHref,
+  backLabel,
+  icon,
+  title,
+  description,
+  actions,
+  tabBar,
+  tabBarPosition = "left",
+  activeTab,
+}: DetailPageHeaderProps) {
+  return (
+    <div className="bg-white border-b border-ibm-gray-20">
+      <div className="px-4 sm:px-6 pt-4 pb-0">
+
+        {/* Breadcrumb */}
+        <Link
+          href={backHref}
+          className="inline-flex items-center gap-1.5 text-xs text-ibm-gray-50 hover:text-ibm-blue-60 transition-colors mb-3"
+        >
+          <ArrowLeft className="h-3 w-3" />
+          {backLabel}
+        </Link>
+
+        {/* Title row */}
+        <div className="flex items-center justify-between gap-4 pb-4">
+          <div className="flex items-center gap-3 min-w-0">
+            {icon && (
+              <div className="h-9 w-9 rounded bg-ibm-blue-10 flex items-center justify-center flex-shrink-0">
+                {icon}
+              </div>
+            )}
+            <div className="min-w-0">
+              <h1 className="text-lg font-semibold text-ibm-gray-100 leading-tight truncate">
+                {title}
+              </h1>
+              {description && (
+                <p className="text-xs text-ibm-gray-50 mt-0.5 truncate">
+                  {description}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {actions && (
+            <div className="flex items-center gap-2 shrink-0">
+              {actions}
+            </div>
+          )}
+        </div>
+
+        {/* Tab bar */}
+        {tabBar && tabBar.length > 0 && (
+          <nav
+            className={`flex gap-0 overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6 ${
+              tabBarPosition === "right" ? "justify-end" : "justify-start"
+            }`}
+            aria-label="Tabs"
+          >
+            {tabBar.map((tab) => {
+              const Icon = tab.icon
+              const isActive = activeTab === tab.id
+              return (
+                <Link
+                  key={tab.id}
+                  href={tab.href}
+                  className={`inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium transition-colors whitespace-nowrap ${
+                    isActive ? TAB_ACTIVE : TAB_INACTIVE
+                  }`}
+                >
+                  {Icon && <Icon className="h-4 w-4" />}
+                  {tab.label}
+                </Link>
+              )
+            })}
+          </nav>
+        )}
+
+      </div>
+    </div>
+  )
+}

package/components/ui/index.ts

@@ -9,6 +9,7 @@ export { UserMenu, type UserMenuItem, type UserMenuConfig } from './user-menu'
 export { Input } from './input'
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'
 export { PageHeader } from './page-header'
+export { DetailPageHeader, type DetailPageHeaderProps, type DetailPageHeaderTab } from './detail-page-header'
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from './chart'
 export { SearchInput } from './search-input'
 export { AssetsHeader } from './assets-header'

package/lib/interceptors.ts

@@ -14,19 +14,6 @@ export const interceptors: Interceptors = {
           case 401:
             window.location.href = '/login';
             break;
-            
-          case 403:
-            window.location.href = '/access-denied';
-            break;
-            
-          case 404:
-            window.location.href = '/not-found';
-            break;
-            
-          case 500:
-          default:
-            window.location.href = '/error';
-            break;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",