Merge pull request #47 from hack4impact-calpoly/combiningComponents

Combining components

src/app/page.tsx

@@ -1,8 +1,10 @@
 import Navbar from "@/components/Navbar";
+import POICardList from "@/components/POICardList";
 export default function Home() {
   return (
     <main>
       <Navbar />
+      <POICardList></POICardList>
     </main>
   );
 }

src/app/poi/page.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Suspense } from "react"; // Import Suspense from React
+import POICard from "@/components/POICard";
+import { useParams, useSearchParams } from "next/navigation";
+
+function POIDetailContent() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  const { id } = params;
+  const name = searchParams.get("name");
+  const duration = searchParams.get("duration");
+  const imageUrl = searchParams.get("url");
+
+  return (
+    <div>
+      <POICard title={name || "Unknown POI"} duration={duration || "Unknown Duration"} imageUrl={imageUrl}></POICard>
+    </div>
+  );
+}
+
+export default function POIDetail() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <POIDetailContent />
+    </Suspense>
+  );
+}

src/components/POICard.module.css

@@ -0,0 +1,9 @@
+.base {
+  flex: auto;
+  width: 324.07px;
+  height: 178.444px;
+  position: relative;
+  background-color: white;
+  border-radius: 16px;
+  padding: 4px;
+}

src/components/POICard.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import styles from "./POICard.module.css";
+import React from "react";
+
+interface POICardProps {
+  title: string | null;
+  duration: string | null;
+  imageUrl: string | null;
+}
+
+function POICard({ title, duration, imageUrl }: POICardProps) {
+  return (
+    <div className={styles.base}>
+      {/* Image Section */}
+      <div className="rounded-t-2xl overflow-hidden w-full h-[112.81px]">
+        <img
+          src={
+            imageUrl ||
+            "https://images.unsplash.com/uploads/141148589884100082977/a816dbd7?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          }
+          className="object-cover w-full h-full"
+        />
+      </div>
+
+      {/* Content Section */}
+      <div className="bg-white rounded-b-2xl p-2 w-full h-[66.66px]">
+        <h3 className="text-lg font-semibold text-black ml-1.5">{title}</h3>
+        <p className="text-sm text-gray-500 ml-1.5">{duration}</p>
+      </div>
+    </div>
+  );
+}
+
+export default POICard;

src/components/POICardList.module.css

@@ -1,6 +1,49 @@
+.base {
+  flex: auto;
+  background-color: #f7f3ef;
+  padding-top: 20px;
+}
+
+.header {
+  display: flex;
+  height: 97.637px;
+  padding: 19px 46px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  background: var(--White, #fff);
+}
+
+.headerTitle {
+  height: 21.88px;
+  align-self: stretch;
+  color: #333;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 22.145px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.headerSubtitle {
+  height: 21.88px;
+  align-self: stretch;
+  color: #757575;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 16.105px;
+  font-style: normal;
+  font-weight: 550;
+  line-height: 140%; /* 22.547px */
+}
+
 .poicard {
   display: flex;
   justify-content: space-between;
+  padding: 20px;
 }
 
 .checkbox-container {
@@ -46,19 +89,36 @@
   background-color: transparent; /* Ensure background is transparent when not checked */
 }
 
-.cardtbd {
-  background: #f8f6f3;
-  border-radius: 16px; /* Rounded corners */
-  overflow: hidden; /* Ensures image and content stay inside the card */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
-  width: 100%;
-  max-width: 400px;
-  font-family: Arial, sans-serif;
-  margin: 1em 1.5em 0 0;
+.topProgress {
+  display: flex;
+  width: 370.07px;
+  padding: 0px 20px;
+  flex-direction: column;
+  gap: 10px;
+  margin-left: auto;
+  padding-bottom: 20px;
 }
 
-.topProgress {
-  padding-left: 3.4em;
+.textProgress {
+  width: 300.764px;
+  height: 21.904px;
+  position: absolute;
+  right: -2.764px;
+  color: #333;
+  font-family: sans-serif;
+  font-size: 14.656px;
+  font-style: normal;
+  font-weight: 550;
+  line-height: 110%; /* 16.122px */
+}
+.textInnerProgress {
+  color: #d29561;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 14.656px;
+  font-style: normal;
+  font-weight: 550;
+  line-height: normal;
 }
 
 .tourProgress {