Skip to content

Commit

Permalink
background
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amogh76
Amogh76 committed Feb 8, 2025
1 parent 939087a commit 4bec23e
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 155 deletions.
8 changes: 4 additions & 4 deletions src/app/example/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import POICardList from "@/components/POICardList";
import POIListView from "@/components/POICardList";

export default function Page() {
return (
<div>
This is an example page using App Router!
<POICardList></POICardList>
<div className="p-6">
<POIListView />
</div>
);
}
124 changes: 113 additions & 11 deletions src/components/POICardList.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,119 @@
/* Checkbox.module.css */
.checkbox .chakra-checkbox__control {
width: 24px;
height: 24px;
border-radius: 50%;
border-color: gray;
background-color: white;
/* POIListView.css */

/* General Layout */
.poi-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
padding: 1.5rem;
}

.checkbox .chakra-checkbox__control[data-checked] {
background-color: green;
border-color: green;
.progress-bar-container {
width: 100%;
margin-bottom: 1.5rem;
}

.checkbox .chakra-checkbox__control[data-checked] svg {
.progress-bar {
width: 100%;
background-color: #e0e0e0;
border-radius: 9999px;
height: 12px;
}

.progress-bar-inner {
background-color: #c68a4d;
height: 100%;
border-radius: 9999px;
}

.sidebar-container {
display: flex;
flex-direction: column;
align-items: center;
width: 4rem;
position: relative;
}

.checkmark {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-size: 1.25rem;
font-weight: bold;
}

.completed {
background-color: #c68a4d;
color: white;
}

.incomplete {
border: 2px solid #bdbdbd;
color: #bdbdbd;
}

.dotted-connector {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}

.dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}

.dot.completed {
background-color: #c68a4d;
}

.dot.incomplete {
background-color: #bdbdbd;
}

.poi-list-container {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.poi-card {
display: flex;
align-items: center;
background-color: white;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 1rem;
padding: 1.5rem;
max-width: 40rem;
height: 12rem;
}

.poi-card img {
width: 8rem;
height: 8rem;
object-cover: cover;
border-radius: 1rem;
}

.poi-card-text {
margin-left: 1.5rem;
}

.poi-card-text h3 {
font-size: 1.5rem;
font-weight: bold;
}

.poi-card-text p {
font-size: 1.125rem;
color: #757575;
}
212 changes: 72 additions & 140 deletions src/components/POICardList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,84 @@
"use client";
import { useState } from "react";
import { Progress } from "./ui/progress";
import { Checkbox } from "./ui/checkbox";
import styles from "./POICardList.module.css";
import React from "react";
import "./POICardList.module.css"; //

export default function POICardList() {
const [cardsDone, setCardsDone] = useState(0);
const [data, setData] = useState([
{
_id: "1",
name: "Eiffel Tower",
description:
"A wrought-iron lattice tower in Paris, France, known for its stunning architecture and panoramic views.",
audioField: "eiffel_tower_audio.mp3",
isComplete: true,
},
{
_id: "2",
name: "Great Wall of China",
description: "A historic fortification stretching across China, built to protect against invasions.",
audioField: "great_wall_audio.mp3",
isComplete: false,
},
{
_id: "3",
name: "Machu Picchu",
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,
},
{
_id: "4",
name: "Colosseum",
description:
"A massive ancient amphitheater in Rome, Italy, once used for gladiatorial contests and public spectacles.",
audioField: "colosseum_audio.mp3",
isComplete: false,
},
{
_id: "5",
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,
},
{
_id: "6",
name: "Taj Mahal",
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,
},
{
_id: "7",
name: "Christ the Redeemer",
description:
"A colossal statue of Jesus Christ in Rio de Janeiro, Brazil, overlooking the city from Mount Corcovado.",
audioField: "christ_redeemer_audio.mp3",
isComplete: false,
},
{
_id: "8",
name: "Sydney Opera House",
description:
"An architectural masterpiece in Australia, known for its sail-like design and world-class performances.",
audioField: "sydney_opera_audio.mp3",
isComplete: true,
},
{
_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",
isComplete: false,
},
{
_id: "10",
name: "Niagara Falls",
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,
},
{
_id: "11",
name: "Grand Canyon",
description:
"A breathtaking natural wonder in Arizona, USA, carved by the Colorado River over millions of years.",
audioField: "grand_canyon_audio.mp3",
isComplete: false,
},
{
_id: "12",
name: "Mount Everest",
description:
"The tallest mountain in the world, located in the Himalayas, attracting climbers from around the globe.",
audioField: "mount_everest_audio.mp3",
isComplete: true,
},
{
_id: "13",
name: "Stonehenge",
description: "A mysterious prehistoric stone circle in England, believed to have been used for ceremonies.",
audioField: "stonehenge_audio.mp3",
isComplete: false,
},
{
_id: "14",
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,
},
{
_id: "15",
name: "Chichen Itza",
description: "A significant Mayan archaeological site in Mexico, featuring the famous pyramid El Castillo.",
audioField: "chichen_itza_audio.mp3",
isComplete: false,
},
]);
interface POI {
id: number;
name: string;
duration: string;
imageUrl: string;
completed: boolean;
}

const poiData: POI[] = [
{ id: 1, name: "Point of Interest 1", duration: "2:15 min", imageUrl: "/path-to-image1.jpg", completed: true },
{ id: 2, name: "Point of Interest 2", duration: "2:15 min", imageUrl: "/path-to-image2.jpg", completed: true },
{ id: 3, name: "Point of Interest 3", duration: "2:15 min", imageUrl: "/path-to-image3.jpg", completed: false },
];

const POIListView: React.FC = () => {
const completedCount = poiData.filter((poi) => poi.completed).length;

// Defining a custom variant
return (
<div>
<div>
<h1>All Audios</h1>
<h2>Kathleens Overlook Canyon</h2>
<div className="poi-container">
{/* Progress Bar */}
<div className="progress-bar-container">
<h2 className="text-xl font-bold">
Tour Progress {completedCount}/{poiData.length}
</h2>
<div className="progress-bar">
<div className="progress-bar-inner" style={{ width: `${(completedCount / poiData.length) * 100}%` }}></div>
</div>
</div>
<div>
<div>
<h1>Tour Progress: {cardsDone + " / " + data.length}</h1>
<Progress value={(cardsDone / data.length) * 100} />

<div className="flex">
{/* Sidebar Progress */}
<div className="sidebar-container">
{poiData.map((poi, index) => (
<div key={index} className="flex flex-col items-center justify-center relative">
{/* Dotted Connector ABOVE (spaced dots) */}
{index > 0 && (
<div className="dotted-connector">
{[...Array(8)].map((_, dotIndex) => (
<div
key={dotIndex}
className={`dot ${poiData[index - 1].completed ? "completed" : "incomplete"}`}
/>
))}
</div>
)}

{/* Checkmark */}
<div className={`checkmark ${poi.completed ? "completed" : "incomplete"}`}>
{poi.completed ? "✓" : "○"}
</div>

{/* Dotted Connector BELOW (spaced dots) */}
{index !== poiData.length - 1 && (
<div className="dotted-connector">
{[...Array(8)].map((_, dotIndex) => (
<div key={dotIndex} className={`dot ${poi.completed ? "completed" : "incomplete"}`} />
))}
</div>
)}
</div>
))}
</div>

<div>
{data.map((POI) => (
<div key={POI._id}>
<Checkbox className={styles.checkbox}></Checkbox>
<h2>{POI.name}</h2>
<p>{POI.description}</p>
<p>Status: {POI.isComplete ? "Completed" : "Not Completed"}</p>
{/* POI List */}
<div className="poi-list-container">
{poiData.map((poi) => (
<div key={poi.id} className="poi-card">
<img src={poi.imageUrl} alt={poi.name} />
<div className="poi-card-text">
<h3>{poi.name}</h3>
<p>{poi.duration}</p>
</div>
</div>
))}
</div>
</div>
</div>
);
}
};

export default POIListView;

0 comments on commit 4bec23e

Please sign in to comment.