Merge remote-tracking branch 'origin/develop' into Howler

src/app/api/audiofile/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from "next/server";
+import connectDB from "@/database/db";
+import Audiofile from "@/database/models/audiofileSchema";
+
+export async function GET() {
+  try {
+    await connectDB();
+    const audiofiles = await Audiofile.find().exec();
+    if (!audiofiles.length) {
+      return NextResponse.json({ error: "No audio files found." }, { status: 404 });
+    }
+    return NextResponse.json(audiofiles, { status: 200 });
+  } catch (error) {
+    console.error("Error fetching audio files:", error);
+    return NextResponse.json({ error: "Error: Unable to fetch audio files." }, { status: 500 });
+  }
+}
+export async function POST(request: Request) {
+  try {
+    await connectDB();
+
+    // Parse the request body
+    const body = await request.json();
+    const { name, url, duration, description } = body;
+
+    // Validate required fields
+    if (!name || !url) {
+      return NextResponse.json({ error: "Name and URL are required fields." }, { status: 400 });
+    }
+
+    // Create and save the new audiofile
+    const newAudiofile = new Audiofile({ name, url, duration, description });
+    await newAudiofile.save();
+
+    return NextResponse.json(newAudiofile, { status: 201 });
+  } catch (error) {
+    console.error("Error creating audio file:", error);
+    return NextResponse.json({ error: "Error: Unable to create audio file." }, { status: 500 });
+  }
+}

src/components/Point of Interest (List-View).tsx

@@ -0,0 +1,43 @@
+/* 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 (
+    <div className="relative bg-black rounded-2xl p-1 w-[324.07px] h-[178.44px]">
+      {/* Image Section */}
+      <div className="rounded-t-2xl overflow-hidden w-full h-[112.81px]">
+        <img src={imageUrl} alt={title} 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>
+  );
+}
+
+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="POICard">
+      <POICard title={poi.title} duration={poi.duration} imageUrl={poi.imageUrl} />
+    </div>
+  );
+}
+
+export default POIListView;