82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import { Link } from "@remix-run/react"
|
|
import { logout } from "~/lib/auth.client"
|
|
import { APP_NAME } from "~/lib/env"
|
|
import { useStore } from "~/lib/store"
|
|
|
|
export function MainLayout({
|
|
isLoggedIn,
|
|
children,
|
|
}: {
|
|
isLoggedIn: boolean
|
|
children: React.ReactNode
|
|
}) {
|
|
const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
|
|
|
|
const links: Array<{ text: string; href?: string; onClick?: () => void }> =
|
|
isLoggedIn
|
|
? [
|
|
{
|
|
text: "Dashboard",
|
|
href: "/dashboard",
|
|
},
|
|
{
|
|
text: "Log out",
|
|
onClick() {
|
|
logout()
|
|
},
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
text: "Log in",
|
|
onClick() {
|
|
setLoginModalOpened(true)
|
|
},
|
|
},
|
|
]
|
|
return (
|
|
<>
|
|
<div className="h-screen flex items-center justify-center">
|
|
<div className="-mt-20">
|
|
<div className="max-w-screen-md mx-auto px-5">
|
|
<div>
|
|
<span className="inline-block text-3xl lg:text-7xl px-3 rounded-lg py-2 font-bold bg-indigo-600 text-white">
|
|
{APP_NAME}
|
|
</span>
|
|
</div>
|
|
<div className="italic text-zinc-500 text-sm mt-1">
|
|
..is under early testing, don't use this app in production.
|
|
</div>
|
|
<div className="space-x-5 mt-10">
|
|
{links.map((link) => {
|
|
if (link.href) {
|
|
return (
|
|
<Link
|
|
to={link.href}
|
|
className="font-bold nav-link underline"
|
|
key={link.text}
|
|
>
|
|
{link.text}
|
|
</Link>
|
|
)
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="font-bold nav-link underline"
|
|
onClick={link.onClick}
|
|
key={link.text}
|
|
>
|
|
{link.text}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</>
|
|
)
|
|
}
|