@metadiv-studio/auth-layout-001

A React component library providing a flexible authentication layout with theme support and customizable header/footer sections.

🚀 Installation

npm i @metadiv-studio/auth-layout-001

📋 Description

This package provides a comprehensive authentication layout component designed for login, signup, and other authentication-related pages. It features:

• Responsive Design: Fixed full-screen layout that adapts to all screen sizes
• Theme Support: Built-in dark/light mode toggle with theme context integration
• Customizable Header/Footer: Flexible header and footer sections with left, center, and right content areas
• Background Image Support: Optional background image overlay
• PDF Mode: Special mode for displaying PDF documents in a viewer
• TypeScript Support: Full TypeScript definitions included
• Tailwind CSS: Styled with Tailwind CSS for easy customization

🎯 Dependencies

This package requires the following peer dependencies:

• react ^18
• react-dom ^18

And includes the following dependencies:

• @metadiv-studio/button - Button component with theme support
• @metadiv-studio/theme-context - Theme context provider
• lucide-react - Icon library

📖 Usage

Basic Usage

import AuthLayout from '@metadiv-studio/auth-layout-001';

function LoginPage() {
  return (
    <AuthLayout title={<h1 className="text-xl font-bold">Login</h1>}>
      <div className="p-6">
        <form>
          <input type="email" placeholder="Email" className="w-full p-2 mb-4 border rounded" />
          <input type="password" placeholder="Password" className="w-full p-2 mb-4 border rounded" />
          <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
            Sign In
          </button>
        </form>
      </div>
    </AuthLayout>
  );
}

With Header and Footer Content

import AuthLayout from '@metadiv-studio/auth-layout-001';

function SignupPage() {
  return (
    <AuthLayout
      title={<h1 className="text-xl font-bold">Create Account</h1>}
      headerLeft={<img src="/logo.png" alt="Logo" className="h-8" />}
      headerCenter={<nav className="text-sm">Navigation Menu</nav>}
      headerRight={<span className="text-sm">Help</span>}
      footerLeft={<span className="text-xs">© 2024 Company</span>}
      footerCenter={<span className="text-xs">Privacy Policy | Terms</span>}
      footerRight={<span className="text-xs">Contact Us</span>}
    >
      <div className="p-6">
        <form>
          <input type="text" placeholder="Full Name" className="w-full p-2 mb-4 border rounded" />
          <input type="email" placeholder="Email" className="w-full p-2 mb-4 border rounded" />
          <input type="password" placeholder="Password" className="w-full p-2 mb-4 border rounded" />
          <button type="submit" className="w-full p-2 bg-green-500 text-white rounded">
            Create Account
          </button>
        </form>
      </div>
    </AuthLayout>
  );
}

With Background Image

import AuthLayout from '@metadiv-studio/auth-layout-001';

function WelcomePage() {
  return (
    <AuthLayout
      title={<h1 className="text-2xl font-bold">Welcome</h1>}
      backgroundImage="https://example.com/background.jpg"
    >
      <div className="p-6 text-center">
        <p className="mb-4">Welcome to our platform!</p>
        <button className="px-6 py-2 bg-blue-500 text-white rounded">
          Get Started
        </button>
      </div>
    </AuthLayout>
  );
}

PDF Viewer Mode

import AuthLayout from '@metadiv-studio/auth-layout-001';

function DocumentViewer() {
  return (
    <AuthLayout
      pdfMode={true}
      pdfUrl="https://example.com/document.pdf"
      headerLeft={<button>← Back</button>}
      headerRight={<button>Download</button>}
    />
  );
}

With Theme Context

import { ThemeProvider } from '@metadiv-studio/theme-context';
import AuthLayout from '@metadiv-studio/auth-layout-001';

function App() {
  return (
    <ThemeProvider>
      <AuthLayout title={<h1>Themed Layout</h1>}>
        <div className="p-6">
          {/* The theme toggle button is automatically included in the layout header */}
          <p>This layout supports automatic theme switching!</p>
        </div>
      </AuthLayout>
    </ThemeProvider>
  );
}

🎨 Props

AuthLayout Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | React.ReactNode | undefined | Title content displayed in the auth card header | | children | React.ReactNode | Required | Main content of the auth card | | headerLeft | React.ReactNode | undefined | Content for the left section of the page header | | headerCenter | React.ReactNode | undefined | Content for the center section of the page header | | headerRight | React.ReactNode | undefined | Content for the right section of the page header | | footerLeft | React.ReactNode | undefined | Content for the left section of the page footer | | footerCenter | React.ReactNode | undefined | Content for the center section of the page footer | | footerRight | React.ReactNode | undefined | Content for the right section of the page footer | | backgroundImage | string | undefined | URL of the background image | | pdfMode | boolean | false | Enable PDF viewer mode | | pdfUrl | string | undefined | URL of the PDF to display (required when pdfMode is true) |

🎯 Layout Structure

The AuthLayout creates a full-screen fixed layout with the following structure:

┌─────────────────────────────────────────┐
│ Header (24 units high)                  │
│ [Left] [Center (grows)] [Right]         │
├─────────────────────────────────────────┤
│                                         │
│ Main Content Area (grows)               │
│   ┌─────────────────┐                   │
│   │ Auth Card       │ (centered)        │
│   │ (480x455px)     │                   │
│   │                 │                   │
│   └─────────────────┘                   │
│                                         │
├─────────────────────────────────────────┤
│ Footer (24 units high)                  │
│ [Left] [Center (grows)] [Right]         │
└─────────────────────────────────────────┘

🎨 Styling

The component uses Tailwind CSS classes and supports custom theme variables:

• bg-bgc-lv1: Background color level 1 (auth card background)
• bg-bgc-lv3: Background color level 3 (page background)
• text-txtc-lv1: Text color level 1
• dark:border-white/10: Dark mode border styling

Make sure to include the package in your Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  content: [
    // ... other content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

🛠️ TypeScript Support

This package includes full TypeScript definitions. All props are typed, and you'll get full IntelliSense support in your IDE.

import AuthLayout from '@metadiv-studio/auth-layout-001';

// All props are fully typed
const MyComponent = () => (
  <AuthLayout
    title="Login" // ✅ string | ReactNode
    pdfMode={true} // ✅ boolean
    // TypeScript will catch any invalid props
  >
    <div>Content</div>
  </AuthLayout>
);

📄 License

UNLICENSED

Built with ❤️ by Metadiv Studio