tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sliding modals, view transitions, accessibility, etc, etc

Browse Source
This commit is contained in:
zach
2026-03-11 15:21:43 -04:00
parent 7482cb9e9c
commit 3d46a48a7d
20 changed files with 708 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/pages/index.astro
View File

@@ -1,22 +1,24 @@
---
export const prerender = false;
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>
<Layout title="Rigid's App Thing">
<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">
<h1>Rigid's App Thing</h1>
<p class="text-secondary">(working title)</p>
</div>
<div class="col-12 col-md-6 mb-2">
<h4 class="mt-3">Welcome!</h4>
<h2 class="mt-3">Welcome!</h2>
<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>
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 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!
@@ -25,30 +27,21 @@ import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/co
<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 class="col-12 col-md-6 d-flex justify-content-end align-items-start mt-3">
<div class="d-flex gap-3">
<Show when="signed-out">
<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>
<Show when="signed-in">
<SignOutButton asChild>
<button class="btn btn-danger">Sign Out</button>
</SignOutButton>
</Show>
</div>
</div>
</div>