From 13b17a3bbe9ef00a7c4f666806898ac7962aa582 Mon Sep 17 00:00:00 2001
From: Abdelrhman <abdoxrs223@gmail.com>
Date: Fri, 12 Dec 2025 00:01:09 +0200
Subject: [PATCH] Adding reset button

---
 src/App.tsx                                |  8 +--
 src/components/core/DraggableContainer.tsx |  7 +--
 src/components/features/ImageStack.tsx     | 51 +++++++++++------
 src/index.css                              | 64 ++++++++++++++++++++++
 4 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e85704d..683c46b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,9 @@
-import { ImageCardStack } from "./components/features/ImageStack";
-
+import { ImageStack } from "./components/features/ImageStack";
 export default function App() {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <ImageCardStack />
+    <div className="min-h-screen flex flex-col items-center justify-center p-4 text-cyan-600">
+      <h1 className="text-3xl font-extrabold text-center mb-15">Image-Card Slider</h1>
+      <div><ImageStack/></div>
     </div>
   );
 }
diff --git a/src/components/core/DraggableContainer.tsx b/src/components/core/DraggableContainer.tsx
index 3055395..eda2f58 100644
--- a/src/components/core/DraggableContainer.tsx
+++ b/src/components/core/DraggableContainer.tsx
@@ -7,14 +7,9 @@ interface DraggableContainerProps {
   className?: string;
 }
 
-export function DraggableContainer({
-  children,
-  onSendToBack,
-  className,
-}: DraggableContainerProps) {
+export function DraggableContainer({children,onSendToBack,className,}:DraggableContainerProps) {
   const { x, y, rotateX, rotateY, handleDragEnd } =
     useCardRotation(onSendToBack);
-
   return (
     <motion.div
       className={className}
diff --git a/src/components/features/ImageStack.tsx b/src/components/features/ImageStack.tsx
index 2b2f748..04af197 100644
--- a/src/components/features/ImageStack.tsx
+++ b/src/components/features/ImageStack.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { CardStack } from "../core/CardStack";
 import type { StackableItem } from "../../lib/types";
 
@@ -5,25 +6,39 @@ interface ImageCard extends StackableItem {
   img: string;
 }
 
-export function ImageCardStack() {
-  const items: ImageCard[] = [
-    { id: 1, img: "/1.avif" },
-    { id: 2, img: "/2.jpg" },
-    { id: 3, img: "/3.jpg" },
-    { id: 4, img: "/4.jpg" },
-  ];
+const INITIAL_ITEMS: ImageCard[] = [
+  { id: 1, img: "/1.avif" },
+  { id: 2, img: "/2.jpg" },
+  { id: 3, img: "/3.jpg" },
+  { id: 4, img: "/4.jpg" },
+];
+
+export function ImageStack() {
+  const [key, setKey] = useState(0);
+
+  const handleReset = () => {
+    setKey((prev) => prev + 1);
+  };
 
   return (
-    <CardStack items={items}>
-      {(card) => (
-        <img
-          src={card.img as string}
-          alt="card"
-          width={1000}
-          height={1000}
-          className="pointer-events-none h-full w-full rounded-lg object-cover"
-        />
-      )}
-    </CardStack>
+    <div className="flex flex-col items-center gap-4">
+      <CardStack key={key} items={INITIAL_ITEMS}>
+        {(card) => (
+          <img
+            src={card.img as string}
+            alt="card"
+            width={1000}
+            height={1000}
+            className="pointer-events-none h-full w-full rounded-lg object-cover"
+          />
+        )}
+      </CardStack>
+
+      <button className="btn" onClick={handleReset}>
+        <span className="spn2">✨ RESET ✨</span>
+      </button>
+
+
+    </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 552e8d4..37c9147 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,4 +2,68 @@
 
 body {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  @apply flex h-screen w-screen items-center justify-center bg-black;
+}
+
+
+.btn {
+  margin-top: 20px;
+  position: relative;
+  display: inline-block;
+  padding: 15px 30px;
+  border: 2px solid #fefefe;
+  text-transform: uppercase;
+  color: #fefefe;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 20px;
+  transition: 0.3s;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.btn::before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: calc(100% + 6px);
+  height: calc(100% + 2px);
+  background-color: black;
+  transition: 0.3s ease-out;
+  transform: scaleY(1);
+}
+
+.btn::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: calc(100% + 4px);
+  height: calc(100% - 50px);
+  background-color: black;
+  transition: 0.3s ease-out;
+  transform: scaleY(1);
+}
+
+.btn:hover::before {
+  transform: translateY(-25px);
+  height: 0;
+}
+
+.btn:hover::after {
+  transform: scaleX(0);
+  transition-delay: 0.15s;
+}
+
+.btn:hover {
+  border: 2px solid #fefefe;
+}
+
+.btn .spn2 {
+  position: relative;
+  z-index: 3;
+  text-decoration: none;
+  border: none;
+  background-color: transparent;
 }