feat: 增加滑动参与感 - 进度条、实时气泡、热度标签
- 卡片上方显示滑动进度条和计数 (3/15)
- 轮询检测到当前卡片新增 like 时弹出"有人也想去这家!"气泡
- 卡片图片角落显示"🔥N 人想去"热度标签
- 后端 GET /api/room/[id] 新增 likeCounts 字段
This commit is contained in:
@@ -1,18 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { Star, MapPin, Clock, ExternalLink } from "lucide-react";
|
||||
import { Star, MapPin, Clock, ExternalLink, Flame } from "lucide-react";
|
||||
import { Restaurant } from "@/types";
|
||||
|
||||
interface RestaurantCardProps {
|
||||
restaurant: Restaurant;
|
||||
likeCount?: number;
|
||||
}
|
||||
|
||||
function stopAll(e: React.SyntheticEvent) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
|
||||
export default function RestaurantCard({ restaurant, likeCount = 0 }: RestaurantCardProps) {
|
||||
const openLink = useCallback(
|
||||
(url: string) => (e: React.MouseEvent | React.TouchEvent) => {
|
||||
e.stopPropagation();
|
||||
@@ -37,11 +38,19 @@ export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
|
||||
/>
|
||||
<div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
|
||||
|
||||
{restaurant.category && (
|
||||
<span className="absolute bottom-3 left-4 rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
|
||||
{restaurant.category}
|
||||
</span>
|
||||
)}
|
||||
<div className="absolute bottom-3 left-4 flex items-center gap-1.5">
|
||||
{restaurant.category && (
|
||||
<span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
|
||||
{restaurant.category}
|
||||
</span>
|
||||
)}
|
||||
{likeCount > 0 && (
|
||||
<span className="flex items-center gap-0.5 rounded-full bg-rose-500/90 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm">
|
||||
<Flame size={11} />
|
||||
{likeCount} 人想去
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
|
||||
|
||||
Reference in New Issue
Block a user