trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -12,6 +12,7 @@
"dependencies": {
"@auth/prisma-adapter": "2.7.2",
"@prisma/client": "^6.5.0",
"embla-carousel-react": "^8.5.2",
"next": "15.2.4",
"next-auth": "5.0.0-beta.25",
"react": "^19.0.0",

28
pnpm-lock.yaml
View file

@ -14,6 +14,9 @@ importers:
'@prisma/client':
specifier: ^6.5.0
version: 6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2)
embla-carousel-react:
specifier: ^8.5.2
version: 8.5.2(react@19.0.0)
next:
specifier: 15.2.4
version: 15.2.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@ -962,6 +965,19 @@ packages:
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
engines: {node: '>= 0.4'}
embla-carousel-react@8.5.2:
resolution: {integrity: sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==}
peerDependencies:
react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
embla-carousel-reactive-utils@8.5.2:
resolution: {integrity: sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==}
peerDependencies:
embla-carousel: 8.5.2
embla-carousel@8.5.2:
resolution: {integrity: sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==}
emoji-regex@9.2.2:
resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@ -2766,6 +2782,18 @@ snapshots:
es-errors: 1.3.0
gopd: 1.2.0
embla-carousel-react@8.5.2(react@19.0.0):
dependencies:
embla-carousel: 8.5.2
embla-carousel-reactive-utils: 8.5.2(embla-carousel@8.5.2)
react: 19.0.0
embla-carousel-reactive-utils@8.5.2(embla-carousel@8.5.2):
dependencies:
embla-carousel: 8.5.2
embla-carousel@8.5.2: {}
emoji-regex@9.2.2: {}
enhanced-resolve@5.18.1:

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}

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

@ -3,6 +3,7 @@ import Link from "next/link";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import Carousel from "@/app/components/carousel";
import LikeButton from "@/app/components/like-button";
interface Props {
@ -38,7 +39,8 @@ export default async function ProfilePage({ params }: Props) {
return (
<div className="flex gap-2 max-sm:flex-col">
<img src="https://placehold.co/400x300" alt="mii" className="rounded-xl border-2 border-zinc-300 shadow-lg" />
<Carousel images={["https://placehold.co/600x400", "https://placehold.co/600x400", "https://placehold.co/600x400"]} className="shadow-lg" />
<div className="flex flex-col gap-1 p-4">
<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">