// File: App.jsx (или ваш главный файл для предпросмотра)
import * as React from "react";
// Мы импортируем ТОЛЬКО чистый компонент. Никаких зависимостей от Framer.
import { SwipeableCardStack } from "@/components/ui/tinder-like-swipe";
// Это наш Демо-Контейнер. Его единственная задача - показать компонент в действии.
export default function TinderSwipeDemo() {
// Данные для демонстрации, которые в Framer приходят из property controls
const demoProps = {
images: [
"https://cdn.21st.dev/assets/mirror/ba/baf7e1328606b1be8b7468aa5df391c9b06817f54e2e7ef00ddb1ef3c8096f20.jpg",
"https://cdn.21st.dev/assets/mirror/8c/8c6e5dbb7f78c8188e967bd5556b7e2c4bdf5867caa9f9d7e26756041b93467a.jpg",
"https://cdn.21st.dev/assets/mirror/0a/0aaa68a0b278e07af2b80b77c12c49c0e880a2ca2eb327dec3447c650e7a0fe9.jpg",
],
rightIcon: "https://uploads-ssl.webflow.com/6226162356726c4835057a73/6232367c3761286ddff6004c_icon-like.svg",
leftIcon: "https://uploads-ssl.webflow.com/6226162356726c4835057a73/6232367c825de783a6697a3c_icon-dislike.svg",
borderRadius: 20,
};
return (
// 1. Контейнер для центрирования и красивого фона
<div style={{
display: "grid",
placeItems: "center",
width: "100vw",
height: "100vh",
background: "#e0e0e0",
}}>
{/* 2. Обертка, задающая размер карточке */}
<div style={{ width: "300px", height: "400px" }}>
{/* 3. Вызываем чистый компонент с нашими демо-пропсами */}
<SwipeableCardStack {...demoProps} />
</div>
</div>
);
}
