ShoppingCart.jsx

import { useState,useEffect ,useRef } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCartShopping } from '@fortawesome/free-solid-svg-icons'
import gsap from "gsap";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(TextPlugin);



function ShoppingCart() {
  const[cartitem, setCartitem]=useState([])
  const [showCart, setShowCart] = useState(true);
const textRef=useRef(null)

useEffect(()=>{

  const element = textRef.current;
gsap.to(element,{
duration:3,
repeat:-1,
text:'Your Shopping Cart',
ease:'none'


})

},[])


  const Add=(c)=>{
    setCartitem([...cartitem,c].slice(0,6))
     setShowCart(true);
  }
  const Remove=(indexd)=>{
    setCartitem((c)=>c.filter((__, item)=>item !==indexd))

  }
  const totalPrice=cartitem.reduce((addition,item)=>addition +item.Price,0)
  const cart = [
    {
        
      id: 1,
      image: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=1760&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      Name: 'Hearty Harvest Bowl',
       Price: 120.000,
    },
    {
      id: 2,
      image: 'https://images.unsplash.com/photo-1511690656952-34342bb7c2f2?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      Name: 'Fresh Green Salad',
      Price: 700.000,
    },
    {
      id: 3,
      image: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
       Name: 'Vegan Buddha Bowl',  
      Price: 150.000,

    },
    {
      id: 4,
      image: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe',
      Name: 'Classic Cheeseburger',  
      Price: 120.000,
    },
    {
      id: 5,
      image: 'https://images.unsplash.com/photo-1484980972926-edee96e0960d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      Name: 'Classic Gourmet Burger',
         Price: 450.000
    },
    {
      id: 6,
      image: 'https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?q=80&w=1075&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      Name: 'Authentic Ramen Bowl',
         Price: 350.000,
    },
  ];

  return (
    <>
     <h1 ref={textRef} className="  text-3xl font-bold mb-8 text-center content-center bg-gray-200 p-14 transition duration-300  ">'' </h1>
    <div className="max-h-screen flex flex-col md: items-center justify-center md:flex-row bg-gray-200 p-8">
      
       

      <div className=" flex flex-col md:flex-row w-full max-w-6xl">

      
       
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3  w-full max-w-6xl grow">
        
        {cart.map((item) => (
          <div key={item.id} className=" rounded-2xl shadow-lg  transform text-center  bg-gray-100 p-6 hover:scale-105 hover:shadow-xl transition duration-300">
            <img src={item.image} alt={item.Name} className="w-48 h-48 rounded-full object-cover mx-auto mb-4 flex-shrink-0" />
            <p className="text-xl font-bold">{item.Name}</p>
            <p className='text-xl'>{item.Price}</p>
            <button onClick={()=>Add(item)} className='bg-zinc-900 p-2 px-12 rounded-2xl text-white hover:bg-zinc-700 transition duration-300'>Add to Cart</button>
          
          
          </div>

          
        ))}
      </div>
  
   {showCart &&( <div className="w-full md:w-82 lg:w-96 bg-neutral-600 rounded-lg shadow-lg p-6 flex-shrink-0">
        <h1 className="text-2xl font-bold text-amber-50 w-full text-center">Card</h1>
      <h2 className="text-xl font-bold mb-2 text-amber-50">
        <FontAwesomeIcon icon={faCartShopping} style={{color:'white'}} /> Cart
      </h2>
{cartitem.length===0 ?(<p className="text-gray-300">Cart is empty</p>) : <ul>
    
    { cartitem.map((item,index)=>(
      <li className="flex items-center justify-between space-x-4 py-2" key={item.id}>
        <span className="text-white font-bold w-5">{index + 1}.</span>
    <img className="w-16 h-16 rounded-full object-cover" src={item.image} />
    <div className="flex flex-col flex-grow">
      <p className="text-xl text-amber-50 font-bold">{item.Name}</p>
      <p className="text-xl text-amber-50">{item.Price}</p>
      </div>
      <div className="flex space-x-2  ">
      <button
        onClick={() => Add(item)}
        className="bg-green-600 text-white px-2 py-1 rounded"
      >
        +
      </button>
 <button
        onClick={() => Remove(index)}
        className="bg-red-600 text-white px-2 py-1 rounded "
      >-
        
      </button>


      </div>
      </li>


    ))}

    </ul>}

    <div className="flex flex-row gap-4">
        <button className="bg-zinc-700 px-2 py-2 text-white  hover:bg-zinc-500 transition duration-300 " onClick={()=>setShowCart(false)}>Close</button>
     <p className="  bg-green-600 px-4 py-2 text-white rounded">Total { totalPrice}</p>
    </div>

    </div>
   )}

</div>
</div>
</>
  );
}

export default ShoppingCart;