Add styling to project

app/events/[eventId]/event.module.scss

@@ -0,0 +1,48 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.eventCard {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+  padding: 1rem;
+  width: 100%;
+  max-width: 600px;
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px 10px 0 0;
+  }
+}
+
+.eventDetails {
+  padding: 1rem;
+}
+
+.eventName {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.eventType,
+.eventCategory,
+.eventDate,
+.eventDuration,
+.eventLocation,
+.eventDescription,
+.eventOrganizerUrl,
+.eventEntryFee {
+  margin-bottom: 0.5rem;
+}
+
+.backLink {
+  margin-top: 2rem;
+}

app/events/[eventId]/page.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { getEventInsecure } from '../../../database/events';
+import styles from './event.module.scss';
 
 type Props = {
   params: {
@@ -31,31 +32,36 @@ export default async function EventPage(props: Props) {
   }
 
   return (
-    <div>
-      <h1>{singleEvent.name}</h1>
-
-      <div>
+    <div className={styles.container}>
+      <h1 className={styles.eventName}>{singleEvent.name}</h1>
+      <div className={styles.eventCard}>
         <img src={singleEvent.image} alt={singleEvent.name} />
-        <br />
-        {singleEvent.type}
-        <br />
-        {singleEvent.category}
-        <br />
-        {singleEvent.date.toLocaleDateString()}
-        <br />
-        {formatDuration(singleEvent.duration)}
-        <br />
-        {singleEvent.location}
-        <br />
-        {singleEvent.description}
-        <br />
-        {singleEvent.organizerUrl}
-        <br />
-        <p>€{singleEvent.entryFee}</p>
-        <br />
+        <div className={styles.eventDetails}>
+          <div className={styles.eventType}>{singleEvent.type}</div>
+          <div className={styles.eventCategory}>{singleEvent.category}</div>
+          <div className={styles.eventDate}>
+            {singleEvent.date.toLocaleDateString()}
+          </div>
+          <div className={styles.eventDuration}>
+            {formatDuration(singleEvent.duration)}
+          </div>
+          <div className={styles.eventLocation}>{singleEvent.location}</div>
+          <div className={styles.eventDescription}>
+            {singleEvent.description}
+          </div>
+          <div className={styles.eventOrganizerUrl}>
+            <a
+              href={singleEvent.organizerUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {singleEvent.organizerUrl}
+            </a>
+          </div>
+          <div className={styles.eventEntryFee}>€{singleEvent.entryFee}</div>
+        </div>
       </div>
-      <div>
-        <br />
+      <div className={styles.backLink}>
         <Link href="/events">Back to Upcoming Events</Link>
       </div>
     </div>

app/events/events.module.scss

@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+}
+
+.eventCard {
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 1rem 0;
+  padding: 1rem;
+  width: 100%;
+  max-width: 600px;
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px 10px 0 0;
+  }
+}
+
+.eventDetails {
+  padding: 1rem;
+}
+
+.eventName {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.eventType,
+.eventDate,
+.eventLocation,
+.eventCategory {
+  margin-bottom: 0.5rem;
+}
+
+.backLink {
+  margin-top: 2rem;
+}

app/events/page.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { getEventsInsecure } from '../../database/events';
+import styles from './events.module.scss'; // Import the CSS module
 
 export const metadata = {
   title: 'Upcoming Events',
@@ -9,40 +10,83 @@ export const metadata = {
 export default async function EventsPage() {
   const events = await getEventsInsecure();
   return (
-    <div>
+    <div className={styles.container}>
       <h1>These Are Our Currently Listed Upcoming Events</h1>
       <div>
-        <br />
         {events.map((event) => (
-          <div key={`events-${event.id}`}>
-            <Link href={`/events/${event.id}`}>
-              <div>
-                {event.name}
-                <br />
-                {event.type}
-                <br />
-                {event.date.toLocaleDateString()}
-                <br />
-                {event.location}
-                <br />
-                <img src={event.image} alt={event.name} />
-                {/* temporary for now */}
-                <br />
-                {event.category}
-                <br />
-                <br />
+          <Link
+            href={`/events/${event.id}`}
+            key={`events-${event.id}`}
+            passHref
+          >
+            <div className={styles.eventCard}>
+              <img src={event.image} alt={event.name} />
+              <div className={styles.eventDetails}>
+                <div className={styles.eventName}>{event.name}</div>
+                <div className={styles.eventType}>{event.type}</div>
+                <div className={styles.eventDate}>
+                  {event.date.toLocaleDateString()}
+                </div>
+                <div className={styles.eventLocation}>{event.location}</div>
+                <div className={styles.eventCategory}>{event.category}</div>
               </div>
-              <br />
-              <br />
-            </Link>
-          </div>
+            </div>
+          </Link>
         ))}
-        <br />
       </div>
-      <br />
-      <div>
+      <div className={styles.backLink}>
         <Link href="/">Back to Home page</Link>
       </div>
     </div>
   );
 }
+
+// import Link from 'next/link';
+// import { getEventsInsecure } from '../../database/events';
+// import styles from './events.module.scss';
+
+// export const metadata = {
+//   title: 'Upcoming Events',
+//   description: 'Upcoming events around the city',
+// };
+
+// export default async function EventsPage() {
+//   const events = await getEventsInsecure();
+//   return (
+//     <div className={styles.container}>
+//       <h1>These Are Our Currently Listed Upcoming Events</h1>
+//       <div>
+//         <br />
+//         {events.map((event) => (
+//           <div key={`events-${event.id}`} className={styles.eventCard}>
+//             <Link href={`/events/${event.id}`}>
+//               <div>
+//                 {event.name}
+//                 <br />
+//                 {event.type}
+//                 <br />
+//                 {event.date.toLocaleDateString()}
+//                 <br />
+//                 {event.location}
+//                 <br />
+//                 <img src={event.image} alt={event.name} />
+//                 {/* temporary for now */}
+//                 <br />
+//                 {event.category}
+//                 <br />
+//                 <br />
+//               </div>
+//               <br />
+//               <br />
+//             </Link>
+//           </div>
+//         ))}
+//         <br />
+//       </div>
+//       <br />
+//       <div>
+//         <Link href="/">Back to Home page</Link>
+//       </div>
+//     </div>
+//   );
+// }