@metadiv-studio/auth-layout-001

@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