From 5ca138928aa82e898bb71232c494338d4be334c8 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Fri, 14 Mar 2025 11:46:06 +0100
Subject: [PATCH] Refactor event details to use reusable InfoCard component

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`.
---
 Makefile                                      |   1 +
 .../src/app/(public)/invite/[slug]/page.tsx   | 143 ++++--------------
 2 files changed, 33 insertions(+), 111 deletions(-)

diff --git a/Makefile b/Makefile
index 5f36564..6c9901a 100644
--- a/Makefile
+++ b/Makefile
@@ -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
diff --git a/frontend/src/app/(public)/invite/[slug]/page.tsx b/frontend/src/app/(public)/invite/[slug]/page.tsx
index 1346078..86251cf 100644
--- a/frontend/src/app/(public)/invite/[slug]/page.tsx
+++ b/frontend/src/app/(public)/invite/[slug]/page.tsx
@@ -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"