[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { WishlistToastDemo } from "@/components/wishlist-toast-demo" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/animated-heart.tsx" "use client" import type React from "react" import { useState } from "react" import { motion } from "framer-motion" interface AnimatedHeartProps { isInWishlist: boolean onClick: () => void } export const AnimatedHeart: React.FC = ({ isInWishlist, onClick }) => { const [isAnimating, setIsAnimating] = useState(false) const handleClick = () => { setIsAnimating(true) onClick() } return ( setIsAnimating(false)} > ) } [V0_FILE]typescriptreact:file="components/wishlist-toast-demo.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Toast } from "./toast" import { AnimatedHeart } from "./animated-heart" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export const WishlistToastDemo: React.FC = () => { const [showToast, setShowToast] = useState(false) const [isInWishlist, setIsInWishlist] = useState(false) const handleAddToWishlist = () => { setIsInWishlist(!isInWishlist) setShowToast(true) } const handleCloseToast = () => { setShowToast(false) } const handleViewWishlist = () => { alert("Navigating to wishlist...") } return (

Transition SENTINEL X0 AXS 29" Carbon Mountainbike

Experience the ultimate trail riding with the Transition SENTINEL X0 AXS. This 29" carbon mountain bike offers unparalleled performance and durability for the most demanding riders.

{showToast && ( )}

) } [V0_FILE]typescriptreact:file="components/toast.tsx" isEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Heart, X, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" interface ToastProps { onClose: () => void onViewWishlist: () => void message: string } export const Toast: React.FC = ({ onClose, onViewWishlist, message }) => { const [isVisible, setIsVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setIsVisible(false) setTimeout(onClose, 300) }, 3000) return () => clearTimeout(timer) }, [onClose]) return (

{message}

) }