jmug/cactoide
1
0
Fork 1
mirror of https://github.com/polaroi8d/cactoide.git synced 2026-03-22 06:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add public/private event types

Browse Source
This commit is contained in:
Levente Orban
2025-08-27 08:47:05 +02:00
parent a91f863295
commit 4c387a10f1
9 changed files with 313 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/routes/+page.svelte
View File

@@ -29,7 +29,7 @@
<div class="relative z-10">
<h1 class="bg-gradient-to-r bg-clip-text text-5xl font-bold md:text-7xl lg:text-8xl">
Event Cactus
Event Cactus 🌵
</h1>
<p class="mt-6 text-xl md:text-2xl">The Ultimate RSVP Platform</p>
<p class="mt-4 text-lg md:text-xl">Create, share, and manage events with zero friction.</p>
@@ -48,11 +48,31 @@
</div>
</section>
<!-- Public Events Section -->
<section class="py-8">
<div class="container mx-auto px-4">
<div class="mb-16 text-center">
<h2 class="text-4xl font-bold text-white">Discover Public Events</h2>
<p class="mt-4 text-xl text-slate-300">See what others are planning and get inspired</p>
</div>
<div class="text-center">
<button
on:click={() => goto('/discover')}
class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
>
Browse All Public Events
</button>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20">
<div class="container mx-auto px-4">
<h2 class=" mb-16 text-center text-4xl font-bold">Why Event Cactus?</h2>
<h2 class=" mb-16 text-center text-4xl font-bold">
Why <span class="text-violet-400">Event Cactus?</span>
</h2>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="rounded-sm border p-8 text-center">

37
src/routes/create/+page.svelte
View File

@@ -10,7 +10,8 @@
time: '',
location: '',
type: 'unlimited',
attendee_limit: undefined
attendee_limit: undefined,
visibility: 'public'
};
let errors: Record<string, string> = {};
@@ -227,6 +228,40 @@
</div>
{/if}
<!-- Event Visibility -->
<div>
<label class="text-dark-800 mb-3 block text-sm font-semibold">
Visibility <span class="text-red-400">*</span></label
>
<div class="grid grid-cols-2 gap-3">
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
'public'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700'}"
on:click={() => (eventData.visibility = 'public')}
>
🌍 Public
</button>
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
'private'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
on:click={() => (eventData.visibility = 'private')}
>
🔒 Private
</button>
</div>
<p class="mt-2 text-xs text-slate-400">
{eventData.visibility === 'public'
? 'Public events are visible to everyone and can be discovered by others'
: 'Private events are only visible to you and people you share the link with'}
</p>
</div>
<!-- Submit Button -->
<button
type="submit"

145
src/routes/discover/+page.svelte Normal file
View File

@@ -0,0 +1,145 @@
<script lang="ts">
import { eventsStore } from '$lib/stores/events-supabase';
import type { Event } from '$lib/types';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
let publicEvents: Event[] = [];
let isLoading = true;
let error = '';
onMount(() => {
loadPublicEvents();
});
async function loadPublicEvents() {
try {
isLoading = true;
publicEvents = await eventsStore.getPublicEvents();
} catch (err) {
error = 'Failed to load public events';
} finally {
isLoading = false;
}
}
function formatDate(dateString: string): string {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}/${month}/${day}`;
}
function formatTime(timeString: string): string {
const [hours, minutes] = timeString.split(':');
return `${hours}:${minutes}`;
}
</script>
<svelte:head>
<title>Discover Events - Event Cactus</title>
</svelte:head>
<div class="flex min-h-screen flex-col">
<!-- Main Content -->
<div class="container mx-auto mt-8 flex-1 px-4 py-8 text-white">
{#if isLoading}
<div class="mx-auto max-w-2xl text-center">
<div
class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-violet-600"
></div>
<p>Loading public events...</p>
</div>
{:else if error}
<div class="mx-auto max-w-2xl text-center">
<div class="mb-4 text-4xl text-red-500">⚠️</div>
<p class="text-red-600">{error}</p>
<button
on:click={loadPublicEvents}
class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
>
Try Again
</button>
</div>
{:else if publicEvents.length === 0}
<div class="mx-auto max-w-2xl text-center">
<div class="mb-4 animate-pulse text-6xl">🔍</div>
<h2 class="mb-4 text-2xl font-bold">No Public Events Yet</h2>
<p class="text-white-600 mb-8">
There are no public events available at the moment. Be the first to create one!
</p>
<button
on:click={() => goto('/create')}
class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
>
Create Your First Event
</button>
</div>
{:else}
<div class="mx-auto max-w-4xl">
<div class="mb-6">
<h2 class="text-2xl font-bold text-slate-400">Public Events ({publicEvents.length})</h2>
<p class="text-slate-500">Discover events created by the community</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{#each publicEvents as event}
<div class="rounded-sm border border-slate-200 p-6 shadow-sm">
<div class="mb-4">
<h3 class="mb-2 text-xl font-bold text-slate-300">{event.name}</h3>
<div class="space-y-2 text-sm text-slate-500">
<div class="flex items-center space-x-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
<span>{formatDate(event.date)} at {formatTime(event.time)}</span>
</div>
<div class="flex items-center space-x-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
></path>
</svg>
<span>{event.location}</span>
</div>
<div class="flex items-center space-x-2">
<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
</span>
{#if event.type === 'limited' && event.attendee_limit}
<span class="text-xs">• {event.attendee_limit} max</span>
{/if}
</div>
</div>
</div>
<div class="flex space-x-3">
<button
on:click={() => goto(`/event/${event.id}`)}
class="flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-2 font-semibold duration-200 hover:bg-violet-400/70"
>
View Event
</button>
</div>
</div>
{/each}
</div>
</div>
{/if}
</div>
</div>

19
src/routes/event/+page.svelte
View File

@@ -124,14 +124,17 @@
{:else}
<div class="mx-auto max-w-4xl">
<div class="mb-6">
<h2 class="text-2xl font-bold text-slate-400">Your Events ({userEvents.length})</h2>
<h2 class="text-2xl font-bold text-slate-400">My Events ({userEvents.length})</h2>
<p class="text-slate-500">Manage your created events</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{#each userEvents as event}
<div class="rounded-sm border border-slate-200 p-6 shadow-sm">
<div class="mb-4">
<h3 class="mb-2 text-xl font-bold text-slate-300">{event.name}</h3>
<div class="mb-3 flex items-center justify-between">
<h3 class="text-xl font-bold text-slate-300">{event.name}</h3>
</div>
<div class="space-y-2 text-sm text-slate-500">
<div class="flex items-center space-x-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -165,10 +168,16 @@
<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
</span>
{#if event.type === 'limited' && event.attendee_limit}
<span class="text-xs">• {event.attendee_limit} max</span>
{/if}
<span
class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
'public'
? 'border-green-300 text-green-400'
: 'border-orange-300 text-orange-400'}"
>
{event.visibility === 'public' ? 'Public' : 'Private'}
</span>
</div>
<div class="flex items-center space-x-2"></div>
</div>
</div>

10
src/routes/event/[id]/+page.svelte
View File

@@ -177,12 +177,20 @@
</div>
</div>
<!-- Event Type & Capacity -->
<!-- Event Type, Visibility & Capacity -->
<div class="flex items-center justify-between rounded-sm p-3">
<div class="flex items-center space-x-2">
<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
</span>
<span
class="rounded-full border px-2 py-1 text-xs font-semibold {event.visibility ===
'public'
? 'border-green-300 text-green-400'
: 'border-orange-300 text-orange-400'}"
>
{event.visibility === 'public' ? '🌍 Public' : '🔒 Private'}
</span>
</div>
{#if event.type === 'limited' && event.attendee_limit}