trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add mii images to carousel and add mii info to mii page

Browse source
This commit is contained in:
trafficlunar 2025-04-05 21:39:08 +01:00
parent e12521e6fa
commit 70f4950363
2 changed files with 68 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/mii-list.tsx
View file

@ -132,7 +132,7 @@ export default async function MiiList({ searchParams, userId, where }: Props) {
key={mii.id} key={mii.id}
className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600" className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
> >
<Carousel images={mii.images.length > 0 ? mii.images : ["/missing.webp"]} /> <Carousel images={[`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...mii.images]} />
<div className="p-4 flex flex-col gap-1 h-full"> <div className="p-4 flex flex-col gap-1 h-full">
<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}> <Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis line-clamp-2" title={mii.name}>

48
src/app/mii/[slug]/page.tsx
View file

@ -1,3 +1,4 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
@ -42,11 +43,16 @@ export default async function MiiPage({ params }: Props) {
if (!mii) redirect("/404"); if (!mii) redirect("/404");
return ( const images = [`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...mii.images];
<div className="flex gap-2 max-sm:flex-col">
<Carousel images={mii?.images && mii?.images.length > 0 ? mii?.images : ["/missing.webp"]} className="shadow-lg" />
<div className="flex flex-col gap-1 p-4"> return (
<div>
<div className="relative grid grid-cols-5 gap-2 max-sm:grid-cols-1 max-lg:grid-cols-2">
<div className="min-w-full flex justify-center col-span-2 max-lg:col-span-1">
<Carousel images={images} className="shadow-lg" />
</div>
<div className="flex flex-col gap-1 p-4 col-span-2 max-lg:col-span-1">
<h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1> <h1 className="text-5xl font-extrabold break-words">{mii?.name}</h1>
<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs"> <div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
{mii?.tags.map((tag) => ( {mii?.tags.map((tag) => (
@ -75,6 +81,40 @@ export default async function MiiPage({ params }: Props) {
/> />
</div> </div>
</div> </div>
<section className="p-6 bg-orange-100 rounded-2xl shadow-lg border-2 border-orange-400 h-min">
<legend className="text-lg font-semibold mb-2">Mii Info</legend>
<ul className="text-sm *:flex *:justify-between *:items-center">
<li>
Name:{" "}
<span className="text-right">
{mii.firstName} {mii.lastName}
</span>
</li>
<li>
From: <span className="text-right">{mii.islandName} Island</span>
</li>
<li>
Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox" />
</li>
</ul>
</section>
</div>
<div className="overflow-x-scroll">
<div className="flex gap-2 w-max py-4">
{images.map((src, index) => (
<Image
key={index}
src={src}
width={256}
height={1}
alt="mii screenshots"
className="rounded-xl bg-zinc-300 border-2 border-zinc-300 shadow-md aspect-[3/2] h-full object-contain"
/>
))}
</div>
</div>
</div> </div>
); );
} }