Refactor Stack: Content Flexibility, Autoplay and Layout Sync

[freakdaniel]

I completely reworked the Stack component to make it flexible when working with arbitrary content (children), add the necessary autoplay functionality & synchronize content processing (e.g., for i18n)

AND AGAIN KEY CHANGES

1. Content Architecture & Flexibility Before: Component required structured cardsData (array of objects with id and img) and manually rendered <img> tags. After: Switched to accepting arbitrary children (React.ReactNode[]). The component now manages the order of the children's indices internally, making it a flexible container for any content (images, forms, custom UI)

2. Autoplay & Interaction Control Added autoplay (boolean) and autoplayDelay (number, ms) props to enable automatic card cycling. Autoplay is automatically paused when the user interacts with the stack (drag start) or hovers the mouse over the container (onMouseEnter), ensuring a better user experience

3. Layout & Responsiveness Before: Required explicit cardDimensions prop, making responsiveness difficult and limiting component flexibility. After: Removed cardDimensions. The component now uses w-full / h-full internally and relies on the CSS dimensions of the parent container to define the card size. This allows for native CSS responsiveness (e.g., using Tailwind classes like w-1/2 or aspect-square on the wrapper)

4. Content Update Handling (i18n Ready) Implemented useEffect to watch the number of children. Technical explanation: If the content inside the cards changes (e.g., text translation via i18n), the component re-renders the children without losing the current stack order or interrupting the ongoing animation. The order is reset only if the count of cards changes

Testing

1. Verify that arbitrary React nodes (e.g., divs with text, not just images) render and stack correctly
2. Test the autoplay={true} prop and ensure cards cycle automatically every autoplayDelay milliseconds
3. Verify that hovering the mouse over the stack successfully pauses the automatic cycling
4. Test drag and click functionality to ensure the top card moves to the back correctly
5. Check responsiveness by placing the component in a fluid container (e.g., w-1/2) to confirm card size adapts