npm - @djangocfg/layouts - Versions diffs - 1.0.1 - Mend

@djangocfg/layouts 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/LICENSE +21 -0
package/README.md +77 -0
package/package.json +86 -0
package/src/auth/README.md +962 -0
package/src/auth/context/AuthContext.tsx +458 -0
package/src/auth/context/index.ts +2 -0
package/src/auth/context/types.ts +63 -0
package/src/auth/hooks/index.ts +6 -0
package/src/auth/hooks/useAuthForm.ts +329 -0
package/src/auth/hooks/useAuthGuard.ts +23 -0
package/src/auth/hooks/useAuthRedirect.ts +51 -0
package/src/auth/hooks/useAutoAuth.ts +42 -0
package/src/auth/hooks/useLocalStorage.ts +211 -0
package/src/auth/hooks/useSessionStorage.ts +186 -0
package/src/auth/index.ts +10 -0
package/src/auth/middlewares/index.ts +1 -0
package/src/auth/middlewares/proxy.ts +24 -0
package/src/auth/server.ts +6 -0
package/src/auth/utils/errors.ts +34 -0
package/src/auth/utils/index.ts +2 -0
package/src/auth/utils/validation.ts +14 -0
package/src/index.ts +15 -0
package/src/layouts/AppLayout/AppLayout.tsx +123 -0
package/src/layouts/AppLayout/README.md +204 -0
package/src/layouts/AppLayout/SUMMARY.md +240 -0
package/src/layouts/AppLayout/USAGE.md +312 -0
package/src/layouts/AppLayout/components/PageProgress.tsx +104 -0
package/src/layouts/AppLayout/components/Seo.tsx +87 -0
package/src/layouts/AppLayout/components/index.ts +6 -0
package/src/layouts/AppLayout/context/AppContext.tsx +146 -0
package/src/layouts/AppLayout/context/index.ts +5 -0
package/src/layouts/AppLayout/hooks/index.ts +6 -0
package/src/layouts/AppLayout/hooks/useLayoutMode.ts +26 -0
package/src/layouts/AppLayout/hooks/useNavigation.ts +49 -0
package/src/layouts/AppLayout/index.ts +31 -0
package/src/layouts/AppLayout/layouts/AuthLayout/AuthContext.tsx +51 -0
package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx +111 -0
package/src/layouts/AppLayout/layouts/AuthLayout/AuthLayout.tsx +40 -0
package/src/layouts/AppLayout/layouts/AuthLayout/IdentifierForm.tsx +330 -0
package/src/layouts/AppLayout/layouts/AuthLayout/OTPForm.tsx +158 -0
package/src/layouts/AppLayout/layouts/AuthLayout/index.ts +13 -0
package/src/layouts/AppLayout/layouts/AuthLayout/types.ts +61 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/PrivateLayout.tsx +92 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardContent.tsx +60 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx +170 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx +164 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/components/index.ts +7 -0
package/src/layouts/AppLayout/layouts/PrivateLayout/index.ts +5 -0
package/src/layouts/AppLayout/layouts/PublicLayout/PublicLayout.tsx +44 -0
package/src/layouts/AppLayout/layouts/PublicLayout/components/DesktopUserMenu.tsx +136 -0
package/src/layouts/AppLayout/layouts/PublicLayout/components/Footer.tsx +262 -0
package/src/layouts/AppLayout/layouts/PublicLayout/components/MobileMenu.tsx +289 -0
package/src/layouts/AppLayout/layouts/PublicLayout/components/Navigation.tsx +159 -0
package/src/layouts/AppLayout/layouts/PublicLayout/index.ts +5 -0
package/src/layouts/AppLayout/layouts/index.ts +7 -0
package/src/layouts/AppLayout/providers/CoreProviders.tsx +47 -0
package/src/layouts/AppLayout/providers/index.ts +5 -0
package/src/layouts/AppLayout/types/config.ts +40 -0
package/src/layouts/AppLayout/types/index.ts +10 -0
package/src/layouts/AppLayout/types/layout.ts +47 -0
package/src/layouts/AppLayout/types/navigation.ts +41 -0
package/src/layouts/AppLayout/types/routes.ts +45 -0
package/src/layouts/AppLayout/utils/index.ts +5 -0
package/src/layouts/AppLayout/utils/routeDetection.ts +31 -0
package/src/layouts/PaymentsLayout/PaymentsLayout.tsx +125 -0
package/src/layouts/PaymentsLayout/README.md +133 -0
package/src/layouts/PaymentsLayout/components/CreateApiKeyDialog.tsx +172 -0
package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx +203 -0
package/src/layouts/PaymentsLayout/components/DeleteApiKeyDialog.tsx +100 -0
package/src/layouts/PaymentsLayout/components/index.ts +4 -0
package/src/layouts/PaymentsLayout/events.ts +106 -0
package/src/layouts/PaymentsLayout/index.ts +20 -0
package/src/layouts/PaymentsLayout/types.ts +19 -0
package/src/layouts/PaymentsLayout/views/apikeys/components/ApiKeyMetrics.tsx +109 -0
package/src/layouts/PaymentsLayout/views/apikeys/components/ApiKeysList.tsx +194 -0
package/src/layouts/PaymentsLayout/views/apikeys/components/index.ts +3 -0
package/src/layouts/PaymentsLayout/views/apikeys/index.tsx +19 -0
package/src/layouts/PaymentsLayout/views/overview/components/BalanceCard.tsx +99 -0
package/src/layouts/PaymentsLayout/views/overview/components/MetricsCards.tsx +103 -0
package/src/layouts/PaymentsLayout/views/overview/components/RecentPayments.tsx +138 -0
package/src/layouts/PaymentsLayout/views/overview/components/index.ts +4 -0
package/src/layouts/PaymentsLayout/views/overview/index.tsx +23 -0
package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx +282 -0
package/src/layouts/PaymentsLayout/views/payments/components/index.ts +2 -0
package/src/layouts/PaymentsLayout/views/payments/index.tsx +18 -0
package/src/layouts/PaymentsLayout/views/tariffs/index.tsx +29 -0
package/src/layouts/PaymentsLayout/views/transactions/index.tsx +29 -0
package/src/layouts/ProfileLayout/ProfileLayout.tsx +110 -0
package/src/layouts/ProfileLayout/components/AvatarSection.tsx +146 -0
package/src/layouts/ProfileLayout/components/ProfileForm.tsx +208 -0
package/src/layouts/ProfileLayout/components/index.ts +3 -0
package/src/layouts/ProfileLayout/index.ts +3 -0
package/src/layouts/SupportLayout/README.md +91 -0
package/src/layouts/SupportLayout/SupportLayout.tsx +178 -0
package/src/layouts/SupportLayout/components/CreateTicketDialog.tsx +154 -0
package/src/layouts/SupportLayout/components/MessageInput.tsx +92 -0
package/src/layouts/SupportLayout/components/MessageList.tsx +312 -0
package/src/layouts/SupportLayout/components/TicketCard.tsx +96 -0
package/src/layouts/SupportLayout/components/TicketList.tsx +152 -0
package/src/layouts/SupportLayout/components/index.ts +6 -0
package/src/layouts/SupportLayout/context/SupportLayoutContext.tsx +260 -0
package/src/layouts/SupportLayout/context/index.ts +2 -0
package/src/layouts/SupportLayout/events.ts +31 -0
package/src/layouts/SupportLayout/hooks/index.ts +2 -0
package/src/layouts/SupportLayout/hooks/useInfiniteMessages.ts +118 -0
package/src/layouts/SupportLayout/hooks/useInfiniteTickets.ts +91 -0
package/src/layouts/SupportLayout/index.ts +6 -0
package/src/layouts/SupportLayout/types.ts +23 -0
package/src/layouts/index.ts +9 -0
package/src/snippets/AuthDialog/AuthDialog.tsx +88 -0
package/src/snippets/AuthDialog/events.ts +21 -0
package/src/snippets/AuthDialog/index.ts +3 -0
package/src/snippets/AuthDialog/useAuthDialog.ts +27 -0
package/src/snippets/Breadcrumbs.tsx +80 -0
package/src/snippets/Chat/ChatUIContext.tsx +110 -0
package/src/snippets/Chat/ChatWidget.tsx +476 -0
package/src/snippets/Chat/README.md +122 -0
package/src/snippets/Chat/components/MessageInput.tsx +124 -0
package/src/snippets/Chat/components/MessageList.tsx +168 -0
package/src/snippets/Chat/components/SessionList.tsx +192 -0
package/src/snippets/Chat/components/index.ts +9 -0
package/src/snippets/Chat/hooks/index.ts +6 -0
package/src/snippets/Chat/hooks/useInfiniteSessions.ts +83 -0
package/src/snippets/Chat/index.tsx +44 -0
package/src/snippets/Chat/types.ts +79 -0
package/src/snippets/VideoPlayer/README.md +203 -0
package/src/snippets/VideoPlayer/VideoControls.tsx +133 -0
package/src/snippets/VideoPlayer/VideoPlayer.tsx +114 -0
package/src/snippets/VideoPlayer/index.ts +8 -0
package/src/snippets/VideoPlayer/types.ts +61 -0
package/src/snippets/index.ts +10 -0
package/src/styles/dashboard.css +41 -0
package/src/styles/index.css +20 -0
package/src/styles/sources.css +6 -0
package/src/types/index.ts +1 -0
package/src/types/pageConfig.ts +103 -0
package/src/utils/index.ts +6 -0
package/src/utils/logger.ts +57 -0

package/src/layouts/AppLayout/components/Seo.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+import Head from 'next/head';
+import { generateOgImageUrl } from '@djangocfg/og-image/utils';
+import { PageConfig } from '../../../types/pageConfig';
+interface SeoProps {
+  pageConfig: PageConfig;
+  icons?: {
+    logo192?: string;
+    logo384?: string;
+    logo512?: string;
+    logoVector?: string;
+  };
+  siteUrl?: string;
+}
+export default function Seo({ pageConfig, icons, siteUrl }: SeoProps) {
+  const {
+    title,
+    description,
+    keywords,
+    jsonLd,
+    ogImage,
+  } = pageConfig;
+  const ogTitle = ogImage?.title || title;
+  const ogSubtitle = ogImage?.subtitle || description;
+  // Generate OG image URL using @djangocfg/og-image utilities
+  const ogImageUrl = ogImage
+    ? generateOgImageUrl('/api/og', {
+        title: ogTitle || 'Untitled',
+        subtitle: ogSubtitle || '',
+        description: ogSubtitle || '',
+      })
+    : null;
+  // Make absolute URL if siteUrl provided
+  const absoluteOgImageUrl = ogImageUrl && siteUrl ? `${siteUrl}${ogImageUrl}` : ogImageUrl;
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      {keywords && <meta name="keywords" content={keywords} />}
+      {/* Favicon */}
+      <link rel="icon" type="image/png" href={icons?.logo192 || '/favicon.png'} />
+      {/* Open Graph */}
+      <meta property="og:title" content={ogTitle} />
+      <meta property="og:description" content={ogSubtitle} />
+      <meta property="og:type" content="website" />
+      {/* Site Name */}
+      {pageConfig.projectName && (
+        <meta property="og:site_name" content={pageConfig.projectName} />
+      )}
+      {/* Twitter */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={ogTitle} />
+      <meta name="twitter:description" content={ogSubtitle} />
+      {/* OG Image */}
+      {absoluteOgImageUrl && (
+        <>
+          <meta property="og:image" content={absoluteOgImageUrl} />
+          <meta property="og:image:width" content="1200" />
+          <meta property="og:image:height" content="630" />
+          <meta property="og:image:type" content="image/png" />
+          <meta name="twitter:image" content={absoluteOgImageUrl} />
+        </>
+      )}
+      {/* JSON-LD */}
+      {jsonLd && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(jsonLd),
+          }}
+        />
+      )}
+    </Head>
+  );
+}

package/src/layouts/AppLayout/components/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Components Module
+ */
+export { default as Seo } from './Seo';
+export { default as PageProgress } from './PageProgress';

package/src/layouts/AppLayout/context/AppContext.tsx ADDED Viewed

@@ -0,0 +1,146 @@
+/**
+ * App Context
+ *
+ * Unified context for entire application layout system
+ * Provides centralized access to configuration, state, and utilities
+ */
+'use client';
+import React, { createContext, useContext, useState, ReactNode, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import type { AppLayoutConfig, LayoutMode, RouteDetectors } from '../types';
+// ═══════════════════════════════════════════════════════════════════════════
+// Context Types
+// ═══════════════════════════════════════════════════════════════════════════
+interface AppContextValue {
+  // Configuration
+  config: AppLayoutConfig;
+  // Route detection
+  routes: RouteDetectors;
+  currentPath: string;
+  layoutMode: LayoutMode;
+  // Mobile menu state
+  mobileMenuOpen: boolean;
+  openMobileMenu: () => void;
+  closeMobileMenu: () => void;
+  toggleMobileMenu: () => void;
+  // User menu state (desktop dropdown)
+  userMenuOpen: boolean;
+  openUserMenu: () => void;
+  closeUserMenu: () => void;
+  toggleUserMenu: () => void;
+  // Sidebar state (dashboard)
+  sidebarCollapsed: boolean;
+  collapseSidebar: () => void;
+  expandSidebar: () => void;
+  toggleSidebar: () => void;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Context Creation
+// ═══════════════════════════════════════════════════════════════════════════
+const AppContext = createContext<AppContextValue | null>(null);
+// ═══════════════════════════════════════════════════════════════════════════
+// Provider Component
+// ═══════════════════════════════════════════════════════════════════════════
+export interface AppContextProviderProps {
+  children: ReactNode;
+  config: AppLayoutConfig;
+}
+/**
+ * AppContext Provider
+ *
+ * Provides unified application context to all child components
+ * Manages layout state and exposes configuration
+ */
+export function AppContextProvider({ children, config }: AppContextProviderProps) {
+  const router = useRouter();
+  // UI state
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  // Determine current layout mode
+  const layoutMode = useMemo((): LayoutMode => {
+    const { isAuthRoute, isPrivateRoute } = config.routes.detectors;
+    if (isAuthRoute(router.pathname)) return 'auth';
+    if (isPrivateRoute(router.pathname)) return 'private';
+    return 'public';
+  }, [router.pathname, config.routes.detectors]);
+  // Mobile menu handlers
+  const openMobileMenu = () => setMobileMenuOpen(true);
+  const closeMobileMenu = () => setMobileMenuOpen(false);
+  const toggleMobileMenu = () => setMobileMenuOpen(prev => !prev);
+  // User menu handlers
+  const openUserMenu = () => setUserMenuOpen(true);
+  const closeUserMenu = () => setUserMenuOpen(false);
+  const toggleUserMenu = () => setUserMenuOpen(prev => !prev);
+  // Sidebar handlers
+  const collapseSidebar = () => setSidebarCollapsed(true);
+  const expandSidebar = () => setSidebarCollapsed(false);
+  const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+  const value: AppContextValue = {
+    config,
+    routes: config.routes.detectors,
+    currentPath: router.pathname,
+    layoutMode,
+    mobileMenuOpen,
+    openMobileMenu,
+    closeMobileMenu,
+    toggleMobileMenu,
+    userMenuOpen,
+    openUserMenu,
+    closeUserMenu,
+    toggleUserMenu,
+    sidebarCollapsed,
+    collapseSidebar,
+    expandSidebar,
+    toggleSidebar,
+  };
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Hook
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Hook to access AppContext
+ *
+ * @throws {Error} If used outside AppContextProvider
+ *
+ * @example
+ * ```tsx
+ * const { config, layoutMode, toggleMobileMenu } = useAppContext();
+ * ```
+ */
+export function useAppContext(): AppContextValue {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error(
+      'useAppContext must be used within AppContextProvider. ' +
+      'Make sure your component is wrapped with <AppLayout>.'
+    );
+  }
+  return context;
+}

package/src/layouts/AppLayout/context/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+/**
+ * Context Module
+ */
+export * from './AppContext';

package/src/layouts/AppLayout/hooks/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Hooks Module
+ */
+export * from './useLayoutMode';
+export * from './useNavigation';

package/src/layouts/AppLayout/hooks/useLayoutMode.ts ADDED Viewed

@@ -0,0 +1,26 @@
+/**
+ * useLayoutMode Hook
+ *
+ * Returns current layout mode
+ */
+import { useAppContext } from '../context';
+import type { LayoutMode } from '../types';
+/**
+ * Get current layout mode
+ *
+ * @returns Current layout mode ('public' | 'private' | 'auth')
+ *
+ * @example
+ * ```tsx
+ * const mode = useLayoutMode();
+ * if (mode === 'private') {
+ *   return <DashboardContent />;
+ * }
+ * ```
+ */
+export function useLayoutMode(): LayoutMode {
+  const { layoutMode } = useAppContext();
+  return layoutMode;
+}

package/src/layouts/AppLayout/hooks/useNavigation.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * useNavigation Hook
+ *
+ * Navigation utilities
+ */
+import { useRouter } from 'next/router';
+import { useAppContext } from '../context';
+export interface UseNavigationReturn {
+  /** Current pathname */
+  currentPath: string;
+  /** Check if path is active */
+  isActive: (path: string) => boolean;
+  /** Get page title for current route */
+  getPageTitle: () => string;
+}
+/**
+ * Navigation utilities hook
+ *
+ * @example
+ * ```tsx
+ * const { isActive, getPageTitle } = useNavigation();
+ * const title = getPageTitle();
+ * ```
+ */
+export function useNavigation(): UseNavigationReturn {
+  const router = useRouter();
+  const { routes, currentPath } = useAppContext();
+  const isActive = (path: string): boolean => {
+    if (currentPath === path) return true;
+    if (path !== '/' && currentPath.startsWith(path)) return true;
+    return false;
+  };
+  const getPageTitle = (): string => {
+    return routes.getPageTitle(currentPath);
+  };
+  return {
+    currentPath,
+    isActive,
+    getPageTitle,
+  };
+}

package/src/layouts/AppLayout/index.ts ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * AppLayout - Unified Application Layout System
+ *
+ * Single self-sufficient component for all layout needs
+ */
+// Main component
+export { AppLayout } from './AppLayout';
+// Types
+export type {
+  AppLayoutConfig,
+  PublicLayoutConfig,
+  PrivateLayoutConfig,
+  RouteConfig,
+  RouteDetectors,
+  LayoutMode,
+  NavigationItem,
+  NavigationSection,
+  DashboardMenuItem,
+  DashboardMenuGroup,
+} from './types';
+// Context and hooks
+export { useAppContext, AppContextProvider } from './context';
+export { useLayoutMode, useNavigation } from './hooks';
+// Layouts (for custom usage if needed)
+export { PublicLayout } from './layouts/PublicLayout';
+export { PrivateLayout } from './layouts/PrivateLayout';
+export { AuthLayout } from './layouts/AuthLayout';

package/src/layouts/AppLayout/layouts/AuthLayout/AuthContext.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React, { createContext, useContext } from 'react';
+import { useAuthForm } from '../../../../auth/hooks';
+import type { AuthContextType, AuthProps } from './types';
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+export const AuthProvider: React.FC<AuthProps> = ({
+  children,
+  sourceUrl: sourceUrlProp,
+  supportUrl,
+  termsUrl,
+  privacyUrl,
+  enablePhoneAuth = true, // Default to true for backward compatibility
+  onIdentifierSuccess,
+  onOTPSuccess,
+  onError,
+}) => {
+  const sourceUrl = sourceUrlProp || (typeof window !== 'undefined' ? window.location.origin : '');
+  // Use the auth form hook with required sourceUrl
+  const authForm = useAuthForm({
+    onIdentifierSuccess,
+    onOTPSuccess,
+    onError,
+    sourceUrl,
+  });
+  const value: AuthContextType = {
+    // Form state from auth form hook
+    ...authForm,
+    // UI-specific configuration
+    sourceUrl,
+    supportUrl,
+    termsUrl,
+    privacyUrl,
+    enablePhoneAuth,
+  };
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+export const useAuthContext = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuthContext must be used within an AuthProvider');
+  }
+  return context;
+};

package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx ADDED Viewed

@@ -0,0 +1,111 @@
+import { Mail, MessageCircle } from 'lucide-react';
+import React from 'react';
+import { Button } from '@djangocfg/ui/components';
+import { useAuthContext } from './AuthContext';
+import type { AuthHelpProps } from './types';
+export const AuthHelp: React.FC<AuthHelpProps> = ({
+  className = '',
+  variant = 'default',
+}) => {
+  const { supportUrl, channel } = useAuthContext();
+  const getChannelIcon = () => {
+    return channel === 'phone' ? (
+      <MessageCircle className="w-4 h-4 text-muted-foreground" />
+    ) : (
+      <Mail className="w-4 h-4 text-muted-foreground" />
+    );
+  };
+  const getHelpText = () => {
+    return channel === 'phone' ? 'Check WhatsApp/SMS' : 'Check spam folder';
+  };
+  const getDetailedHelp = () => {
+    if (channel === 'phone') {
+      return {
+        title: "Didn't receive the code?",
+        tips: [
+          '• Check your WhatsApp messages',
+          '• Look for SMS messages',
+          '• Ensure you have signal/internet',
+          '• Wait a few minutes for delivery',
+        ],
+      };
+    } else {
+      return {
+        title: "Didn't receive the email?",
+        tips: [
+          '• Check your spam or junk folder',
+          '• Make sure you entered the correct email address',
+          '• Wait a few minutes for the email to arrive',
+        ],
+      };
+    }
+  };
+  if (variant === 'compact') {
+    return (
+      <div
+        className={`flex items-center justify-between p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+      >
+        <div className="flex items-center space-x-2">
+          {getChannelIcon()}
+          <span className="text-sm text-muted-foreground">{getHelpText()}</span>
+        </div>
+        {supportUrl && (
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="text-xs"
+          >
+            <a href={supportUrl} target="_blank" rel="noopener noreferrer">
+              Need help?
+            </a>
+          </Button>
+        )}
+      </div>
+    );
+  }
+  const helpData = getDetailedHelp();
+  return (
+    <div
+      className={`space-y-3 p-3 bg-muted/30 rounded-lg border border-border ${className}`}
+    >
+      <div className="flex items-start space-x-2">
+        {getChannelIcon()}
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium text-foreground">{helpData.title}</h4>
+          <div className="text-xs text-muted-foreground space-y-0.5">
+            {helpData.tips.map((tip, index) => (
+              <p key={index}>{tip}</p>
+            ))}
+          </div>
+        </div>
+      </div>
+      {supportUrl && (
+        <div className="flex items-center justify-between pt-2 border-t border-border">
+          <span className="text-xs text-muted-foreground">Still having trouble?</span>
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className="text-xs h-7 px-2"
+          >
+            <a href={supportUrl} target="_blank" rel="noopener noreferrer">
+              Get Help
+            </a>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/layouts/AppLayout/layouts/AuthLayout/AuthLayout.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AuthProvider, useAuthContext } from './AuthContext';
+import { IdentifierForm } from './IdentifierForm';
+import { OTPForm } from './OTPForm';
+import type { AuthProps } from './types';
+export const AuthLayout: React.FC<AuthProps> = (props) => {
+  return (
+    <AuthProvider {...props}>
+      <div
+        className={`min-h-screen flex flex-col items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8 ${props.className || ''}`}
+      >
+        <div className="max-w-md w-full space-y-8 flex-1 flex flex-col justify-center">
+          {props.children}
+          <AuthContent />
+        </div>
+      </div>
+    </AuthProvider>
+  );
+};
+// Separate component to use the context
+const AuthContent: React.FC = () => {
+  const { step, error } = useAuthContext();
+  return (
+    <>
+      {error && (
+        <div className="bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-md">
+          {error}
+        </div>
+      )}
+      <div>{step === 'identifier' ? <IdentifierForm /> : <OTPForm />}</div>
+    </>
+  );
+};