@digilogiclabs/create-saas-app 1.5.3 → 1.6.0

package/src/templates/web/ui-auth-payments-video/template/src/components/shared/header.tsx

@@ -2,12 +2,21 @@
 
 import React from 'react';
 import Link from 'next/link';
-import { LogOut, CreditCard } from 'lucide-react';
+import { LogOut, CreditCard, User, Settings, Home, Video, Film, Play } from 'lucide-react';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { ThemeToggle } from '../ui/theme-toggle';
+import { 
+  ResponsiveHeader,
+  MobileNavigation,
+  HamburgerIcon,
+  useNetworkInfo,
+  useOfflineState
+} from '@digilogiclabs/saas-factory-ui';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 
 export function Header() {
   const { user, signOut } = useAuth();
+  const networkInfo = useNetworkInfo();
+  const isOnline = useOfflineState();
   
   const handleSignOut = async () => {
     try {
@@ -17,46 +26,129 @@ export function Header() {
     }
   };
 
+  const navigationItems = [
+    { 
+      label: 'Home', 
+      href: '/',
+      icon: Home,
+      protected: false 
+    },
+    { 
+      label: 'Video Library', 
+      href: '/videos',
+      icon: Video,
+      protected: true 
+    },
+    { 
+      label: 'Watch Later', 
+      href: '/watchlater',
+      icon: Film,
+      protected: true 
+    },
+    { 
+      label: 'Dashboard', 
+      href: '/dashboard',
+      icon: User,
+      protected: true 
+    },
+    { 
+      label: 'Billing', 
+      href: '/billing',
+      icon: CreditCard,
+      protected: true 
+    },
+    { 
+      label: 'Checkout', 
+      href: '/checkout',
+      icon: CreditCard,
+      protected: false 
+    },
+    { 
+      label: 'Settings', 
+      href: '/settings',
+      icon: Settings,
+      protected: true 
+    }
+  ];
+
+  const authActions = user ? [
+    {
+      label: 'Sign Out',
+      icon: LogOut,
+      onClick: handleSignOut,
+      variant: 'ghost' as const
+    }
+  ] : [
+    {
+      label: 'Login',
+      href: '/login',
+      variant: 'ghost' as const
+    },
+    {
+      label: 'Sign Up',
+      href: '/signup',
+      variant: 'default' as const
+    }
+  ];
+
   return (
-    <header className="bg-white dark:bg-gray-800 shadow-md">
-      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-        <Link href="/" className="text-2xl font-bold text-gray-900 dark:text-white">
-          {{titleCaseName}}
-        </Link>
-        <nav className="flex items-center gap-4">
-          <ThemeToggle />
-          {user ? (
-            <>
-              <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Dashboard
-              </Link>
-              <Link href="/billing" className="flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                <CreditCard className="h-4 w-4" />
-                Billing
-              </Link>
-              <button 
-                onClick={handleSignOut}
-                className="p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
-              >
-                <LogOut className="h-5 w-5" />
-              </button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
-                Login
-              </Link>
-              <Link 
-                href="/signup"
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Sign Up
-              </Link>
-            </>
-          )}
-        </nav>
-      </div>
-    </header>
+    <>
+      {/* Network Status Banner */}
+      {!isOnline && (
+        <div className="bg-red-500 text-white text-center py-2 text-sm animate-pulse">
+          <span>📹 Offline - Cached videos only</span>
+        </div>
+      )}
+      
+      {/* Video Quality Banner */}
+      {isOnline && networkInfo?.effectiveType === '2g' && (
+        <div className="bg-yellow-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🐌 Slow connection - Video quality reduced to 360p • Buffering optimized • Download recommended for smooth playback
+          </div>
+        </div>
+      )}
+
+      {/* HD Video Quality Banner */}
+      {isOnline && (networkInfo?.effectiveType === '4g' || networkInfo?.effectiveType === '5g') && (
+        <div className="bg-green-500 text-white text-center py-2 text-sm">
+          <div className="animate-marquee whitespace-nowrap">
+            🎬 High-speed connection - HD/4K video quality enabled • Instant streaming • Auto-quality adjustment active
+          </div>
+        </div>
+      )}
+
+      <ResponsiveHeader
+        logo={{
+          text: '{{titleCaseName}}',
+          href: '/',
+          className: 'text-2xl font-bold flex items-center gap-2',
+          icon: <Play className="w-6 h-6" />
+        }}
+        navigationItems={navigationItems}
+        actions={authActions}
+        showThemeToggle={true}
+        user={user}
+        mobileBreakpoint="md"
+        className="bg-white dark:bg-gray-800 shadow-md"
+        hamburgerIcon={
+          <HamburgerIcon 
+            className="w-6 h-6 text-gray-600 dark:text-gray-300"
+            animated={true}
+            hapticFeedback={true}
+          />
+        }
+        networkStatus={{
+          isOnline,
+          connectionType: networkInfo?.effectiveType,
+          showIndicator: true,
+          customLabels: {
+            online: 'Streaming Ready',
+            offline: 'Offline Mode'
+          }
+        }}
+      />
+    </>
   );
 }
 

package/src/templates/web/ui-only/template/package.json

@@ -4,7 +4,7 @@
   "description": "{{description}} (with UI Package v0.11.1)",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",