pokemon/src/pages/index.astro

---
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
---
<Layout>
    <NavBar slot="navbar">
        <NavItems slot="navItems" />
    </NavBar>
    <div class="row mb-4" slot="page">
        <h1>Rigid's App Thing</h1>
        <h5 class="text-secondary">(working title)</h5>
        <div class="col-12 col-md-6 mb-2">
            <h4 class="mt-3">Welcome!</h4>
            <p class="mt-2">
                You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.</p>
            </p>
            <p class="my-2">
                After the closed beta is complete, the app will move into a more open beta. Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
            </p>
            <Show when="signed-in">
                <a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
            </Show>
        </div>
        <div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
            <div>
                <Show when="signed-out">
                <!-- Using Bootstrap btn classes -->
                <SignInButton asChild mode="modal">
                <button class="btn btn-success">
                    Sign In
                </button>
                </SignInButton>
                <SignUpButton asChild mode="modal">
                <button class="btn btn-dark">
                    Request Access
                </button>
                </SignUpButton>
            </Show>
            </div>
            <div>
            <Show when="signed-in">
                <SignOutButton asChild mode="modal">
                <button class="btn btn-danger">
                    Sign Out
                </button>
                </SignOutButton>
            </Show>
            </div>
        </div>
    </div>
    <Footer slot="footer" />
</Layout>