cardosofelipe/eventspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor event details to use reusable InfoCard component

Browse Source 
Replaced repetitive JSX for event details (date/time, location) with the reusable `InfoCard` component. This reduces code duplication, improves readability, and centralizes styling logic. Added support for image positioning and optional button props in `InfoCard`.
This commit is contained in:
Felipe Cardoso
2025-03-14 11:46:06 +01:00
parent 991fd0356a
commit 5ca138928a
2 changed files with 33 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@@ -6,6 +6,7 @@ REGISTRY := gitea.pragmazest.com/cardosofelipe/eventspace
dev:
docker compose -f docker-compose.dev.yml up --build -d
docker compose logs -f
prod:
docker compose up --build -d

143
frontend/src/app/(public)/invite/[slug]/page.tsx
View File

@@ -12,6 +12,7 @@ import { Loader2 } from "lucide-react";
import { useParams } from "next/navigation";
import { EventResponse } from "@/client";
import { getServerFileUrl } from "@/lib/utils";
import InfoCard from "@/components/info-card";
interface InvitationParams {
slug: string;
@@ -122,7 +123,6 @@ const InvitationPage = () => {
Safari Adventure
</h2>
</div>
{/* Safari Animals Banner */}
<div className="mb-8 flex justify-center">
{eventTheme?.foreground_image_url ? (
@@ -147,115 +147,40 @@ const InvitationPage = () => {
</div>
)}
</div>
{/* Date/Time with Elephant */}
<div className="mb-10 flex flex-col items-center md:flex-row md:items-start md:space-x-6">
<div className="mb-4 md:mb-0">
<div
className="flex h-28 w-28 items-center justify-center rounded-full border-2 md:h-32 md:w-32"
style={{ borderColor: colors.accent2 }}
>
{getAssetUrl("elephant") ? (
<div className="relative h-24 w-24 md:h-28 md:w-28">
<Image
src={getAssetUrl("elephant") || ""}
alt="Elephant"
fill
className="object-contain"
/>
</div>
) : (
<p className="text-center text-sm">Elephant</p>
)}
</div>
</div>
<Card
className="flex-1 p-6"
style={{
backgroundColor: "rgba(240, 233, 214, 0.7)",
borderColor: colors.accent2,
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
}}
>
<h3
className="mb-2 text-center text-2xl font-bold md:text-left"
style={headingStyle}
>
{eventDate}
</h3>
{timeRange && (
<p
className="text-center text-lg md:text-left"
style={{ color: colors.text }}
>
{timeRange}
</p>
)}
</Card>
</div>
<InfoCard
imageSrc={getAssetUrl("elephant")}
imageAlt="Elephant"
borderColor={colors.accent2}
backgroundColor="rgba(240,233,214,0.7)"
headingText={eventDate || ""}
headingStyle={headingStyle}
bodyText={timeRange || ""}
bodyTextColor={colors.text}
/>
{/* Location with Giraffe */}
<div className="mb-10 flex flex-col-reverse items-center md:flex-row md:items-start md:space-x-6">
<Card
className="flex-1 p-6"
style={{
backgroundColor: "rgba(240, 233, 214, 0.7)",
borderColor: colors.secondary,
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
}}
>
<h3
className="mb-2 text-center text-2xl font-bold md:text-left"
style={headingStyle}
>
{event.location_name}
</h3>
<p
style={{ color: colors.text }}
className="text-center md:text-left"
>
{event.location_address}
</p>
{event.location_url && (
<div className="mt-4 text-center md:text-left">
<Link
href={event.location_url}
target="_blank"
rel="noopener noreferrer"
>
<Button
className="rounded-full"
style={{
backgroundColor: colors.secondary,
color: "white",
}}
>
View Map
</Button>
</Link>
</div>
)}
</Card>
<div className="mb-4 md:mb-0">
<div
className="flex h-28 w-28 items-center justify-center rounded-full border-2 md:h-32 md:w-32"
style={{ borderColor: colors.secondary }}
>
{getAssetUrl("giraffe") ? (
<div className="relative h-24 w-24 md:h-28 md:w-28">
<Image
src={getAssetUrl("giraffe") || ""}
alt="Giraffe"
fill
className="object-contain"
/>
</div>
) : (
<p className="text-center text-sm">Giraffe</p>
)}
</div>
</div>
</div>
<InfoCard
imageSrc={getAssetUrl("giraffe")}
imageAlt="Giraffe"
borderColor={colors.secondary}
backgroundColor="rgba(240,233,214,0.7)"
headingText={event.location_name || ""}
headingStyle={headingStyle}
bodyText={event.location_address || ""}
bodyTextColor={colors.text}
buttonProps={
event.location_url
? {
text: "View Map",
href: event.location_url,
backgroundColor: colors.secondary,
textColor: "white",
}
: undefined
}
imagePosition="right" // key part for giraffe card
/>
{/* Description */}
<Card
@@ -290,7 +215,6 @@ const InvitationPage = () => {
)}
</div>
</Card>
{/* RSVP Section */}
{event.rsvp_enabled && (
<div
@@ -326,7 +250,6 @@ const InvitationPage = () => {
</div>
</div>
)}
{/* Gift Registry with Lion */}
{event.gift_registry_enabled && (
<div className="mb-10 flex flex-col items-center md:flex-row md:items-center md:space-x-6">
@@ -385,7 +308,6 @@ const InvitationPage = () => {
</Card>
</div>
)}
{/* View Map Button */}
{event.location_url && (
<div className="mb-10 flex justify-center">
@@ -406,7 +328,6 @@ const InvitationPage = () => {
</Link>
</div>
)}
{/* Footer with Contact Info */}
<div
className="mx-auto max-w-2xl rounded-lg p-6 text-center"