Authentication Template for Astro

---
import Authentication from '@templates/Authentication.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}
---

<Authentication
    layout={layout}
    banner={{ ... }} {/* Your banner image */}
    type={'login'} {/* Type of form to show ('signup' | 'login'). Defaults to signup */}
    loginForm={{ ... }} {/* Customize your login form */}
    signUpForm={{ ... }} {/* Customize your sign up form */}
    tabs={{ ... }} {/* Customize your tabs when both forms are displayed */}
    reverse={true} {/* Reverse your layout. Defaults to false */}
    className="auth" {/* Pass additional CSS classes to your layout */}
/>

---
import { type TabsProps } from 'webcoreui/astro'

import logo from '@img/logo.svg?raw'
import Authentication from '@templates/Authentication/Authentication.astro'

// Your layout, including menu and footer
const layout = {
    seo: {
        title: 'Authentication Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'A customizable and easy to use template for login and sign up forms.',
        faviconUrl: '/logo.svg'
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Home', href: '/' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Sitemap',
                items: [
                    { href: '/', name: 'Home' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Your banner image
const banner = {
    src: '/img/banner.png',
    alt: 'Banner',
    width: 500,
    height: 1000
}

// Tabs if you need both login and sign up forms
const tabs = {
    theme: 'outline' as TabsProps['theme'],
    even: true,
    items: [
        {
            label: 'Login',
            value: 'login', // Value must be one of 'login' | 'signup'
            active: true
        }, {
            label: 'Sign Up',
            value: 'signup'
        }
    ]
}
---

<Authentication
    type="login"
    layout={layout}
    banner={banner}
    tabs={tabs}
/>