71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { mediaUrl } from "@/app/lib/media";
|
|
import type { DatingProfile } from "../types";
|
|
import SwipeCard from "./SwipeCard";
|
|
|
|
interface SwipeStackProps {
|
|
current: DatingProfile;
|
|
next?: DatingProfile;
|
|
badgeText: string;
|
|
dragX: number;
|
|
isDragging: boolean;
|
|
isAnimatingOut: "left" | "right" | null;
|
|
onLike: () => void;
|
|
onDislike: () => void;
|
|
onBeginDrag: (clientX: number) => void;
|
|
onMoveDrag: (clientX: number) => void;
|
|
onEndDrag: () => void;
|
|
t: (key: string) => string;
|
|
}
|
|
|
|
export default function SwipeStack({
|
|
current,
|
|
next,
|
|
badgeText,
|
|
dragX,
|
|
isDragging,
|
|
isAnimatingOut,
|
|
onLike,
|
|
onDislike,
|
|
onBeginDrag,
|
|
onMoveDrag,
|
|
onEndDrag,
|
|
t,
|
|
}: SwipeStackProps) {
|
|
return (
|
|
<div className="relative">
|
|
{next ? (
|
|
<div
|
|
aria-hidden
|
|
className={`pointer-events-none absolute inset-x-0 top-3 mx-auto w-[92%] scale-[0.96] rounded-2xl bg-gradient-to-br ${next.gradient} opacity-70 shadow-lg`}
|
|
>
|
|
<div className="flex justify-center py-10">
|
|
<img
|
|
src={mediaUrl(next.photo)}
|
|
alt=""
|
|
className="h-20 w-20 rounded-full border-4 border-white/40 object-cover"
|
|
/>
|
|
</div>
|
|
<div className="pb-6 text-center text-sm font-semibold text-white/90">{next.name}</div>
|
|
</div>
|
|
) : null}
|
|
<div className="relative z-10">
|
|
<SwipeCard
|
|
profile={current}
|
|
badgeText={badgeText}
|
|
dragX={dragX}
|
|
isDragging={isDragging}
|
|
isAnimatingOut={isAnimatingOut}
|
|
onLike={onLike}
|
|
onDislike={onDislike}
|
|
onBeginDrag={onBeginDrag}
|
|
onMoveDrag={onMoveDrag}
|
|
onEndDrag={onEndDrag}
|
|
t={t}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|