Merge pull request #54 from hack4impact-calpoly/CreatePOIComponent

fix: Move CSS into separate file

src/components/POICard.module.css

@@ -0,0 +1,57 @@
+.base {
+  flex: auto;
+  width: 324.07px;
+  height: 178.444px;
+  position: relative;
+  background-color: white;
+  border-radius: 16px;
+  padding: 4px;
+}
+
+.card {
+  background-color: black;
+  border-radius: 1rem;
+  padding: 0.25rem;
+  width: 324.07px;
+  height: 178.44px;
+  position: relative;
+}
+
+.imageContainer {
+  border-radius: 0.75rem 0.75rem 0 0;
+  width: 100%;
+  height: 112.81px;
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  background-color: white;
+  border-radius: 0 0 0.75rem 0.75rem;
+  width: 100%;
+  height: 66.66px;
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 600; 
+  color: black;
+  margin-left: 0.375rem; 
+}
+
+.duration {
+  font-size: 0.875rem; 
+  color: #6b7280; 
+  margin-left: 0.375rem;
+}
+
+.poiList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/components/POICard.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+import styles from "./POICard.module.css";
+
+interface POICardProps {
+  title: string;
+  duration: string;
+  imageUrl: string;
+}
+
+function POICard({ title, duration, imageUrl }: POICardProps) {
+  return (
+    <div className={`${styles.card} relative`}>
+      {/* Image Section */}
+      <div className={`${styles.imageContainer} overflow-hidden`}>
+        <img src={imageUrl} alt={title} className={`${styles.image}`} />
+      </div>
+
+      {/* Content Section */}
+      <div className={`${styles.content} p-2`}>
+        <h3 className={`${styles.title}`}>{title}</h3>
+        <p className={`${styles.duration}`}>{duration}</p>
+      </div>
+    </div>
+  );
+}
+
+function POIListView() {
+  // Placeholder data
+  const poi = {
+    title: "Point of interest's name",
+    duration: "2:15 min",
+    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",
+  };
+
+  return (
+    <div className={styles.poiList}>
+      <POICard title={poi.title} duration={poi.duration} imageUrl={poi.imageUrl} />
+    </div>
+  );
+}
+
+export default POIListView;