diff --git a/src/app/page.tsx b/src/app/page.tsx index cc3a8ce..a4ae68e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,8 +1,10 @@ import Navbar from "@/components/Navbar"; +import POICardList from "@/components/POICardList"; export default function Home() { return (
+
); } diff --git a/src/app/poi/page.tsx b/src/app/poi/page.tsx new file mode 100644 index 0000000..49ab45b --- /dev/null +++ b/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 ( +
+ +
+ ); +} + +export default function POIDetail() { + return ( + Loading...}> + + + ); +} diff --git a/src/components/POICard.module.css b/src/components/POICard.module.css new file mode 100644 index 0000000..d05e90e --- /dev/null +++ b/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; +} diff --git a/src/components/POICard.tsx b/src/components/POICard.tsx new file mode 100644 index 0000000..e250680 --- /dev/null +++ b/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 ( +
+ {/* Image Section */} +
+ +
+ + {/* Content Section */} +
+

{title}

+

{duration}

+
+
+ ); +} + +export default POICard; diff --git a/src/components/POICardList.module.css b/src/components/POICardList.module.css index a456581..58d2911 100644 --- a/src/components/POICardList.module.css +++ b/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 { diff --git a/src/components/POICardList.tsx b/src/components/POICardList.tsx index 7325d0a..ae730d7 100644 --- a/src/components/POICardList.tsx +++ b/src/components/POICardList.tsx @@ -4,6 +4,8 @@ import { Progress } from "./ui/progress"; import { Checkbox } from "./ui/checkbox"; import styles from "./POICardList.module.css"; import { FaCheck } from "react-icons/fa"; +import POICard from "./POICard"; +import Link from "next/link"; export default function POICardList() { const [cardsDone, setCardsDone] = useState(0); @@ -14,13 +16,19 @@ export default function POICardList() { description: "A wrought-iron lattice tower in Paris, France, known for its stunning architecture and panoramic views.", audioField: "eiffel_tower_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "2", name: "Great Wall of China", description: "A historic fortification stretching across China, built to protect against invasions.", audioField: "great_wall_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -29,7 +37,10 @@ export default function POICardList() { description: "An ancient Incan citadel set high in the Andes Mountains in Peru, known for its breathtaking ruins.", audioField: "machu_picchu_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "4", @@ -37,6 +48,9 @@ export default function POICardList() { description: "A massive ancient amphitheater in Rome, Italy, once used for gladiatorial contests and public spectacles.", audioField: "colosseum_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -44,7 +58,10 @@ export default function POICardList() { name: "Statue of Liberty", description: "A symbol of freedom and democracy, located on Liberty Island in New York Harbor.", audioField: "statue_liberty_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "6", @@ -52,7 +69,10 @@ export default function POICardList() { description: "A stunning white marble mausoleum in India, built by Mughal Emperor Shah Jahan in memory of his wife.", audioField: "taj_mahal_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "7", @@ -60,6 +80,9 @@ export default function POICardList() { description: "A colossal statue of Jesus Christ in Rio de Janeiro, Brazil, overlooking the city from Mount Corcovado.", audioField: "christ_redeemer_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -68,13 +91,19 @@ export default function POICardList() { description: "An architectural masterpiece in Australia, known for its sail-like design and world-class performances.", audioField: "sydney_opera_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "9", name: "Pyramids of Giza", description: "One of the Seven Wonders of the Ancient World, located in Egypt and built as tombs for pharaohs.", audioField: "pyramids_giza_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -83,7 +112,10 @@ export default function POICardList() { description: "A powerful set of waterfalls on the border of the USA and Canada, attracting millions of visitors each year.", audioField: "niagara_falls_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "11", @@ -91,6 +123,9 @@ export default function POICardList() { description: "A breathtaking natural wonder in Arizona, USA, carved by the Colorado River over millions of years.", audioField: "grand_canyon_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -99,13 +134,19 @@ export default function POICardList() { description: "The tallest mountain in the world, located in the Himalayas, attracting climbers from around the globe.", audioField: "mount_everest_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "13", name: "Stonehenge", description: "A mysterious prehistoric stone circle in England, believed to have been used for ceremonies.", audioField: "stonehenge_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, { @@ -113,18 +154,24 @@ export default function POICardList() { name: "The Louvre Museum", description: "A world-famous museum in Paris, home to iconic artworks like the Mona Lisa and the Venus de Milo.", audioField: "louvre_museum_audio.mp3", - isComplete: true, + duration: "1:00", + 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", + isComplete: false, }, { _id: "15", name: "Chichen Itza", description: "A significant Mayan archaeological site in Mexico, featuring the famous pyramid El Castillo.", audioField: "chichen_itza_audio.mp3", + duration: "1:00", + 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", isComplete: false, }, ]); - const toggleComplete = (id) => { + const toggleComplete = (id: string) => { const clickedIndex = data.findIndex((item) => item._id === id); const isCurrentlyComplete = data[clickedIndex].isComplete; @@ -150,47 +197,59 @@ export default function POICardList() { // Defining a custom variant return ( -
-
-

All Audios

-

Kathleens Overlook Canyon

+
+
+

All Audios

+

Kathleens Overlook Canyon

-
+
-

Tour Progress: {cardsDone + " / " + data.length}

- +
+ Visited Spots: {cardsDone + "/" + data.length} +
+
{data.map((POI, index) => ( -
-
- {Array(4) // Adjust the number of dots - .fill(null) - .map((_, dotIndex) => ( -
- ))} - - -
-
-

{POI.name}

-

{POI.description}

-

Status: {POI.isComplete ? "Completed" : "Not Completed"}

+ +
+
+ {Array(4) + .fill(null) + .map((_, dotIndex) => ( +
+ ))} + +
+
-
+ ))}
diff --git a/src/components/poiList.tsx b/src/components/poiList.tsx deleted file mode 100644 index fb44151..0000000 --- a/src/components/poiList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* eslint-disable @next/next/no-img-element */ -import React from "react"; - -interface POICardProps { - title: string; - duration: string; - imageUrl: string; -} - -function POICard({ title, duration, imageUrl }: POICardProps) { - return ( -
- {/* Image Section */} -
- {title} -
- - {/* Content Section */} -
-

{title}

-

{duration}

-
-
- ); -} - -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 ( -
- -
- ); -} - -export default POIListView;