atridad/ixabatasha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Oops

Browse Source
This commit is contained in:
Atridad Lahiji
2025-02-25 10:06:58 -06:00
parent 4d2353b2c3
commit a3fa905e95
1 changed files with 90 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/index.astro
View File

@ -1,72 +1,107 @@
---
import Layout from "../layouts/Layout.astro";
import SignIn from "../components/SignIn.tsx";
import SignOut from "../components/SignOut.tsx";
---
<Layout title="Welcome">
<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
<img src="/hero.jpeg" alt="" height="250" width="250" class="rounded-full mx-auto">
<!-- Header -->
<div class="text-center space-y-4">
<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;">❤️ Natasha + Ixabat ❤️</div>
<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
</div>
<div id="auth-container">
<SignIn client:load onSuccess={() => {}} requiredRole="guest" />
</div>
<!-- Event Details Cards -->
<div class="flex flex-col md:flex-row gap-6">
<!-- Ceremony Card -->
<div class="card bg-base-100 shadow-xl flex-1">
<div class="card-body">
<h2 class="card-title text-2xl justify-center">Ceremony</h2>
<div class="text-center space-y-2">
<p class="text-xl">1:00 PM</p>
<p>Preston Avenue Community Church</p>
<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
<a
href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK"
target="_blank"
class="btn btn-outline btn-sm mt-2"
>
View on Map
</a>
<div id="content-container" class="hidden">
<div class="flex flex-col gap-8 max-w-5xl mx-auto p-6">
<img src="/hero.jpeg" alt="" height="250" width="250" class="rounded-full mx-auto">
<!-- Header -->
<div class="text-center space-y-4">
<div class="text-5xl font-normal" style="font-family: 'Great Vibes', cursive;">❤️ Natasha + Ixabat ❤️</div>
<p class="text-xl text-gray-600">We hope you can join us in celebration on</p>
<p class="text-2xl font-semibold">Saturday, June 7, 2025</p>
</div>
<!-- Event Details Cards -->
<div class="flex flex-col md:flex-row gap-6">
<!-- Ceremony Card -->
<div class="card bg-base-100 shadow-xl flex-1">
<div class="card-body">
<h2 class="card-title text-2xl justify-center">Ceremony</h2>
<div class="text-center space-y-2">
<p class="text-xl">1:00 PM</p>
<p>Preston Avenue Community Church</p>
<p class="text-gray-600">2216 Preston Avenue, Saskatoon, SK</p>
<a
href="https://maps.google.com/?q=2216+Preston+Avenue+Saskatoon+SK"
target="_blank"
class="btn btn-outline btn-sm mt-2"
>
View on Map
</a>
</div>
</div>
</div>
<!-- Reception Card -->
<div class="card bg-base-100 shadow-xl flex-1">
<div class="card-body">
<h2 class="card-title text-2xl justify-center">Reception</h2>
<div class="text-center space-y-2">
<p class="text-xl">5:00 PM</p>
<p>Saskatoon Christian School</p>
<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
<a
href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK"
target="_blank"
class="btn btn-outline btn-sm mt-2"
>
View on Map
</a>
</div>
</div>
</div>
</div>
<!-- Reception Card -->
<div class="card bg-base-100 shadow-xl flex-1">
<div class="card-body">
<h2 class="card-title text-2xl justify-center">Reception</h2>
<div class="text-center space-y-2">
<p class="text-xl">5:00 PM</p>
<p>Saskatoon Christian School</p>
<p class="text-gray-600">55 Glazier Road, Corman Park, SK</p>
<a
href="https://maps.google.com/?q=55+Glazier+Road+Corman+Park+SK"
target="_blank"
class="btn btn-outline btn-sm mt-2"
>
View on Map
</a>
</div>
<!-- RSVP Section -->
<div class="text-center space-y-4">
<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/rsvp" class="btn btn-primary btn-lg">
RSVP Now
</a>
<a href="/registry" class="btn btn-secondary btn-lg">
Wedding Registry
</a>
<a href="/faq" class="btn btn-accent btn-lg">
FAQ
</a>
</div>
</div>
</div>
<!-- RSVP Section -->
<div class="text-center space-y-4">
<p class="text-lg">Please RSVP whether you're able to come or not by <span class="font-semibold">April 1</span></p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/rsvp" class="btn btn-primary btn-lg">
RSVP Now
</a>
<a href="/registry" class="btn btn-secondary btn-lg">
Wedding Registry
</a>
<a href="/faq" class="btn btn-accent btn-lg">
FAQ
</a>
<div class="text-center mt-4">
<SignOut client:load />
</div>
</div>
</div>
</Layout>
<script>
import { hasRole, isAuthenticated } from "../utils/auth-client";
function updateVisibility() {
const authContainer = document.getElementById("auth-container");
const contentContainer = document.getElementById("content-container");
if (isAuthenticated() && hasRole("guest")) {
authContainer?.classList.add("hidden");
contentContainer?.classList.remove("hidden");
} else {
authContainer?.classList.remove("hidden");
contentContainer?.classList.add("hidden");
}
}
// Check auth state on page load
updateVisibility();
// Add event listener for custom event from SignIn component
document.addEventListener("auth-success", updateVisibility);
</script>