import Section from '@/components/section'
import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react";
import { CSSProperties, useState } from 'react';
 
const Index = () => {
  const ExpandedCard = ({ card }: { card: { name: string; price: string } }) => {
    return (
      <div
        style={{
          width: '100%',
          height: '30vh',
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
          transition: 'opacity 0.5s ease-in-out', // Add transition effect
        }}
      >
        <h2>{card.name}</h2>
        <p>{card.price} RSD</p>
        <button onClick={() => setExpandedCard(null)}>Close</button>
      </div>
    );
  };
 
  const [expandedCard, setExpandedCard] = useState<number | null>(null);
 
  const handleCardClick = (index: number) => {
    setExpandedCard(index);
  };
 
  const cards = [
    { name: 'Tost', price: '140' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
  ];
 
  return (
    <Page>
      <Section>
        {expandedCard !== null ? (
          <ExpandedCard card={cards[expandedCard]} />
        ) : (
          <div className="grid grid-cols-2 gap-2 justify-center">
            {cards.map((card: { name: string; price: string }, index: number) => (
              <Card
                key={index}
                isPressable
                onClick={() => handleCardClick(index)}
                style={{
                  transition: 'opacity 0.5s ease-in-out', // Add transition effect
                }}
              >
                <CardBody>
                  <img src="https://via.placeholder.com/200x150" alt="Placeholder Image" />
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}>
                    <h5>{card.name}</h5>
                    <p>{card.price} RSD</p>
                  </div>
                </CardBody>
              </Card>
            ))}
          </div>
        )}
      </Section>
    </Page>
  );
};
 
export default Index
 

My animations on my NextJS project are not working for some reason, im a newbie so i dont really know whats going on.

Im using NextUI for the UI elements if that helps

The cards just appear and dissapear.

Card animations are there but they dont do anything, i think its because expanded card and the clicked cards are not the same thing so css cant animate separate elements?