diff --git a/web/src/app/_components/mapCard.tsx b/web/src/app/_components/mapCard.tsx index 3e4269a..539c08e 100644 --- a/web/src/app/_components/mapCard.tsx +++ b/web/src/app/_components/mapCard.tsx @@ -12,7 +12,7 @@ interface SubmissionCardProps { id: number; } -export default function SubmissionCard(props: SubmissionCardProps) { +export function SubmissionCard(props: SubmissionCardProps) { return ( <Link href={`/submissions/${props.id}`}> <div className="submissionCard"> @@ -40,3 +40,32 @@ export default function SubmissionCard(props: SubmissionCardProps) { </Link> ); } + +export function MapfixCard(props: SubmissionCardProps) { + return ( + <Link href={`/mapfixes/${props.id}`}> + <div className="MapfixCard"> + <div className="content"> + <div className="map-image"> + {/* TODO: Grab image of model */} + <Image width={230} height={230} layout="fixed" priority={true} src={`/thumbnails/asset/${props.assetId}`} alt={props.displayName} /> + </div> + <div className="details"> + <div className="header"> + <span className="displayName">{props.displayName}</span> + <div className="rating"> + <Rating value={props.rating} readOnly size="small" /> + </div> + </div> + <div className="footer"> + <div className="author"> + <Image className="avatar" width={28} height={28} priority={true} src={`/thumbnails/user/${props.authorId}`} alt={props.author}/> + <span>{props.author}</span> + </div> + </div> + </div> + </div> + </div> + </Link> + ); +} diff --git a/web/src/app/mapfixes/page.tsx b/web/src/app/mapfixes/page.tsx index 743062d..37f232b 100644 --- a/web/src/app/mapfixes/page.tsx +++ b/web/src/app/mapfixes/page.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { MapfixInfo } from "../ts/Mapfix"; -import MapfixCard from "../_components/mapCard"; +import { MapfixCard } from "../_components/mapCard"; import Webpage from "@/app/_components/webpage"; // TODO: MAKE MAPFIX & SUBMISSIONS USE THE SAME COMPONENTS :angry: (currently too lazy) diff --git a/web/src/app/submissions/page.tsx b/web/src/app/submissions/page.tsx index 05d3ce7..05b877c 100644 --- a/web/src/app/submissions/page.tsx +++ b/web/src/app/submissions/page.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { SubmissionInfo } from "../ts/Submission"; -import SubmissionCard from "../_components/mapCard"; +import { SubmissionCard } from "../_components/mapCard"; import Webpage from "@/app/_components/webpage"; import "./(styles)/page.scss";