From 216a9d880ff88575110d3bab0331255b8a4838b6 Mon Sep 17 00:00:00 2001
From: zaaakher <zakhermasri@gmail.com>
Date: Tue, 7 Nov 2023 18:28:52 +0300
Subject: [PATCH] SIKKA-5612[completed]

---
 package.json                                 |  2 +-
 stories/ElementsStories/Carousel.stories.tsx | 43 +++++++++++++++++---
 2 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index bc84907ce..7a5b020a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.16.14",
+  "version": "0.16.15",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
diff --git a/stories/ElementsStories/Carousel.stories.tsx b/stories/ElementsStories/Carousel.stories.tsx
index df6bcb9ad..f1a2d6c79 100644
--- a/stories/ElementsStories/Carousel.stories.tsx
+++ b/stories/ElementsStories/Carousel.stories.tsx
@@ -13,8 +13,12 @@ import {
   CopyIcon,
   Edit2,
   Heart,
+  AppWindow,
   ScreenShare,
+  ScreenShareOff,
   Trash2,
+  Apple,
+  HardDrive,
 } from "lucide-react";
 
 const meta = {
@@ -62,13 +66,10 @@ export const Cards: Story = {
   },
 };
 export const Autoplay: Story = {
-  render: () => (
+  render: (args) => (
     <div className="hawa-flex hawa-flex-col hawa-gap-10">
       <div className="hawa-h-52  hawa-max-w-md">
-        <Carousel items={cards} loop={false} />
-      </div>
-      <div className="hawa-h-52  hawa-max-w-md">
-        <Carousel items={cards1} loop={false} />
+        <Carousel {...args} items={autoplayCards} loop={false} />
       </div>
     </div>
   ),
@@ -89,6 +90,38 @@ const images = [
   <img src="https://source.unsplash.com/featured/?nature,8" />,
   <img src="https://source.unsplash.com/featured/?nature,9" />,
 ];
+const autoplayCards = [
+  <LandingCard
+    className={"hawa-h-full hawa-max-w-sm"}
+    title="These cards will autoplay"
+    subtitle="This is a longer description of the landing card, you can use this directly in a landing page"
+    icon={<ScreenShare />}
+  />,
+  <LandingCard
+    className={"hawa-h-full hawa-max-w-sm"}
+    title="This is the second card"
+    subtitle="This is a longer description of the landing card, you can use this directly in a landing page"
+    icon={<ScreenShareOff />}
+  />,
+  <LandingCard
+    className={"hawa-h-full hawa-max-w-sm"}
+    title="This is the 3rd card"
+    subtitle="This is a longer description of the landing card, you can use this directly in a landing page"
+    icon={<AppWindow />}
+  />,
+  <LandingCard
+    className={"hawa-h-full hawa-max-w-sm"}
+    title="This is the 4th card"
+    subtitle="This is a longer description of the landing card, you can use this directly in a landing page"
+    icon={<Apple />}
+  />,
+  <LandingCard
+    className={"hawa-h-full hawa-max-w-sm"}
+    title="This is the 5th card"
+    subtitle="This is a longer description of the landing card, you can use this directly in a landing page"
+    icon={<HardDrive />}
+  />,
+];
 const cards = [
   <LandingCard
     className={"hawa-h-full hawa-max-w-sm"}