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
I'm experiencing issues with the animations in my NextJS project. As a beginner, I'm not sure what's causing the problem.
I'm using NextUI for the UI components, but it doesn't seem to be helping resolve the animation issue.
The cards on my page appear and disappear without any animation effects.
I suspect that the lack of synchronization between expanded cards and clicked cards may be preventing the CSS animations from functioning properly.