voucher/resources/js/Layouts/GuestLayout.jsx

import React from 'react'
import ApplicationLogo from '@/Components/Defaults/ApplicationLogo'
import { Link } from '@inertiajs/react'
import { Flowbite } from 'flowbite-react'

const customTheme = {
    button: {
        color: {
            primary: 'bg-blue-700 hover:bg-blue-600 text-white',
        },
    },
    dropdown: {
        color: {
            primary: 'bg-blue-700 hover:bg-blue-600 text-white',
        },
    },
}

export default function Guest({ children }) {
    return (
        <Flowbite theme={{ theme: customTheme }}>
            <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
                <div>
                    <Link href="/">
                        <ApplicationLogo className="w-auto h-20 fill-current text-gray-500 text-5xl font-bold text-center" />
                    </Link>
                </div>

                <div className="w-full max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
                    {children}
                </div>
            </div>
        </Flowbite>
    )
}