kurihada
2a3cef890c
- MatchResult: 提取 NoMatchResult、RunnerUpCard（635 → 513 行） - ProfilePage: 提取 ProfileHistoryCard、ProfileFavoritesCard（692 → 526 行） - BlindboxRoomPage: 提取 BlindboxMyIdeas、BlindboxDrawnHistory（855 → 668 行）
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { useRouter } from "next/navigation";
|
||
import { SearchX, RotateCcw, Home } from "lucide-react";
|
||
import Button from "@/components/Button";
|
||
|
||
interface NoMatchResultProps {
|
||
onReset: () => Promise<void>;
|
||
resetting: boolean;
|
||
}
|
||
|
||
export default function NoMatchResult({ onReset, resetting }: NoMatchResultProps) {
|
||
const router = useRouter();
|
||
|
||
return (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.4 }}
|
||
>
|
||
<motion.div
|
||
initial={{ scale: 0, rotate: -20 }}
|
||
animate={{ scale: 1, rotate: 0 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
|
||
>
|
||
<SearchX size={56} className="text-muted" />
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
className="mt-4 text-3xl font-black text-heading"
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.35 }}
|
||
>
|
||
都不太满意
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
|
||
initial={{ y: 20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.45 }}
|
||
>
|
||
这一轮没有店被选中，换个范围或类型再试试？
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
className="mt-8 flex w-full max-w-xs flex-col gap-3"
|
||
initial={{ y: 30, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ delay: 0.55 }}
|
||
>
|
||
<Button
|
||
onClick={onReset}
|
||
shape="pill"
|
||
loading={resetting}
|
||
loadingText="重置中..."
|
||
icon={<RotateCcw size={15} />}
|
||
className="px-8 py-3"
|
||
>
|
||
再来一轮
|
||
</Button>
|
||
|
||
<Button
|
||
onClick={() => router.push("/")}
|
||
variant="secondary"
|
||
shape="pill"
|
||
icon={<Home size={15} />}
|
||
className="px-8 py-3"
|
||
>
|
||
换个条件重新搜
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
);
|
||
}
|