fix(reports): updated reports card images and images in reports to use next js image component

Author: 0xRowdy

app/reports/[slug]/page.tsx

@@ -11,6 +11,7 @@ import type { Report } from "@/types";
 import parse from "html-react-parser";
 import { ChevronLeft, MapPin } from "lucide-react";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 
 interface ReportPageProps {
@@ -114,11 +115,14 @@ export default async function ReportPage({ params }: ReportPageProps) {
 							<h3 className="font-bold text-2xl pb-3">Summary</h3>
 							<p className="text-wrap leading-relaxed">{report.summary}</p>
 						</div>
-						<img
-							src={report.image}
-							alt="Report illustration"
-							className="rounded-2xl md:h-[420px] md:object-cover md:w-full"
-						/>
+						<div className="relative rounded-2xl md:h-[420px] h-[358px] w-full overflow-hidden">
+							<Image
+								src={report.image}
+								alt="Report illustration"
+								className="-z-10 object-cover bg-center"
+								fill
+							/>
+						</div>
 						{htmlParsedStory && (
 							<article className="prose text-vd-blue-900">
 								{htmlParsedStory}

components/reports/reports-view.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/lib/search-filter-utils";
 import type { ISortingOption, Report } from "@/types";
 import Fuse from "fuse.js";
+import Image from "next/image";
 import { useCallback, useMemo, useState } from "react";
 import { ShowingDisplay, VDPaginator } from "../global/vd-paginator";
 import { SidebarFilter } from "./filter-sidebar";
@@ -130,11 +131,14 @@ export function ReportsView({ reports }: IPageData) {
 					) : (
 						<section className="w-full flex justify-center items-center py-6">
 							<div className="flex flex-col items-center text-center pb-24 md:pb-10">
-								<img
-									className="h-20 w-20"
-									src="/reports_not_found.svg"
-									alt="flower illustration"
-								/>
+								<div className="h-20 w-20">
+									<Image
+										src="/reports_not_found.svg"
+										alt="flower illustration"
+										height={20}
+										width={20}
+									/>
+								</div>
 								<p className="text-lg font-bold text-vd-beige-600">
 									We couldn't find any reports matching your search or filter.
 								</p>