trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: image carousels

Browse source
This commit is contained in:
trafficlunar 2025-03-31 18:04:53 +01:00
parent e458d4459f
commit a806003bc6
5 changed files with 93 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/app/components/carousel.tsx Normal file
View file

@ -0,0 +1,57 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import useEmblaCarousel from "embla-carousel-react";
import { Icon } from "@iconify/react";
interface Props {
images: string[];
className?: string;
}
export default function Carousel({ images, className }: Props) {
const [emblaRef, emblaApi] = useEmblaCarousel();
const [selectedIndex, setSelectedIndex] = useState(0);
const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
useEffect(() => {
if (!emblaApi) return;
setScrollSnaps(emblaApi.scrollSnapList());
emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
}, [emblaApi]);
const scrollTo = useCallback((index: number) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
return (
<div className="relative max-w-lg">
<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className}`} ref={emblaRef}>
<div className="flex">
{images.map((src, index) => (
<div key={index} className="flex-[0_0_100%]">
<img src={src} alt="" className="w-full h-auto" />
</div>
))}
</div>
</div>
<button onClick={scrollPrev} className="absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-left" />
</button>
<button onClick={scrollNext} className="absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl cursor-pointer">
<Icon icon="ic:round-chevron-right" />
</button>
<div className="flex justify-center gap-2 absolute left-1/2 -translate-x-1/2 bottom-2">
{scrollSnaps.map((_, index) => (
<button
key={index}
onClick={() => scrollTo(index)}
className={`size-1.5 rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
/>
))}
</div>
</div>
);
}

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

@ -1,10 +1,11 @@
import Link from "next/link";
import { Prisma } from "@prisma/client";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import Carousel from "./carousel";
import LikeButton from "./like-button";
import Link from "next/link";
interface Props {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@ -120,9 +121,8 @@ export default async function MiiList({ searchParams, userId }: Props) {
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"
>
<Link href={`/mii/${mii.id}`}>
<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl border-2 border-zinc-300" />
</Link>
<Carousel images={["https://placehold.co/600x400", "https://placehold.co/600x400", "https://placehold.co/600x400"]} />
<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}>
{mii.name}