kurihada
b98920858c
将 state + setTimeout 自动消失逻辑封装为 useToast hook， Toast UI 统一为组件支持 top/bottom 两种位置，净减约 12 行。
35 lines
925 B
TypeScript
35 lines
925 B
TypeScript
"use client";
|
|
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
interface ToastProps {
|
|
message: string;
|
|
position?: "top" | "bottom";
|
|
}
|
|
|
|
const positionClass = {
|
|
top: "top-10",
|
|
bottom: "bottom-8",
|
|
};
|
|
|
|
export default function Toast({ message, position = "top" }: ToastProps) {
|
|
const isTop = position === "top";
|
|
const y = isTop ? -12 : 12;
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{message && (
|
|
<motion.div
|
|
className={`fixed left-1/2 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-heading shadow-lg ring-1 ring-subtle ${positionClass[position]}`}
|
|
initial={{ opacity: 0, y, x: "-50%" }}
|
|
animate={{ opacity: 1, y: 0, x: "-50%" }}
|
|
exit={{ opacity: 0, y, x: "-50%" }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 25 }}
|
|
>
|
|
{message}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|