kurihada
d87d30ccc0
- Framer Motion 卡片滑动 UI，带物理阻尼动画 - 多人房间系统，4位房间号 + SWR 实时轮询 - 高德地图 POI v5 API 搜索附近餐厅 - Web Share API 一键邀请，剪贴板降级方案 - SQLite/Prisma 持久化存储 - 移动端优先响应式设计 (Tailwind CSS)
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { X, Heart } from "lucide-react";
|
|
import { SwipeDirection } from "@/types";
|
|
|
|
interface ActionButtonsProps {
|
|
onAction: (direction: SwipeDirection) => void;
|
|
disabled: boolean;
|
|
}
|
|
|
|
export default function ActionButtons({
|
|
onAction,
|
|
disabled,
|
|
}: ActionButtonsProps) {
|
|
return (
|
|
<div className="relative z-10 flex items-center justify-center gap-8 pb-8 pt-4">
|
|
<motion.button
|
|
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
|
|
whileTap={{ scale: 0.85 }}
|
|
whileHover={{ scale: 1.08 }}
|
|
onClick={() => onAction("left")}
|
|
disabled={disabled}
|
|
aria-label="Nope"
|
|
>
|
|
<X size={30} className="text-rose-500" strokeWidth={3} />
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
className="flex h-16 w-16 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
|
|
whileTap={{ scale: 0.85 }}
|
|
whileHover={{ scale: 1.08 }}
|
|
onClick={() => onAction("right")}
|
|
disabled={disabled}
|
|
aria-label="Like"
|
|
>
|
|
<Heart
|
|
size={28}
|
|
className="fill-emerald-500 text-emerald-500"
|
|
strokeWidth={2.5}
|
|
/>
|
|
</motion.button>
|
|
</div>
|
|
);
|
|
}
|