From 866329ba63f8dac16ab57fe11705e7131a4a84ec Mon Sep 17 00:00:00 2001
From: Daksh Singh Rathore <dakshrathore1729@gmail.com>
Date: Wed, 13 Dec 2023 14:19:27 +0530
Subject: [PATCH] code: added relevant args for cta

---
 src/stories/Components/Button.stories.jsx | 60 ++++++++---------
 src/stories/Components/Cta.jsx            | 82 +++++++++++++----------
 src/stories/Components/Cta.stories.jsx    |  4 +-
 3 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/src/stories/Components/Button.stories.jsx b/src/stories/Components/Button.stories.jsx
index 7ba7828..3af7ffc 100644
--- a/src/stories/Components/Button.stories.jsx
+++ b/src/stories/Components/Button.stories.jsx
@@ -17,37 +17,37 @@ export default {
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Primary',
-  },
-};
+  export const Primary = {
+    args: {
+      primary: true,
+      label: 'Primary',
+    },
+  };
 
-export const Secondary = {
-  args: {
-    label: 'Secondary',
-  },
-};
+  export const Secondary = {
+    args: {
+      label: 'Secondary',
+    },
+  };
 
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Large',
-  },
-};
+  export const Large = {
+    args: {
+      size: 'large',
+      label: 'Large',
+    },
+  };
 
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Small',
-  },
-};
+  export const Small = {
+    args: {
+      size: 'small',
+      label: 'Small',
+    },
+  };
 
-export const Warning = {
-  args: {
-    primary: true,
-    label: 'Delete now',
-    backgroundColor: 'red',
-  }
-};
\ No newline at end of file
+  export const Warning = {
+    args: {
+      primary: true,
+      label: 'Delete now',
+      backgroundColor: 'red',
+    }
+  };
\ No newline at end of file
diff --git a/src/stories/Components/Cta.jsx b/src/stories/Components/Cta.jsx
index 7ef8f25..e36e332 100644
--- a/src/stories/Components/Cta.jsx
+++ b/src/stories/Components/Cta.jsx
@@ -1,45 +1,57 @@
 import React from 'react'
+import PropTypes from 'prop-types';
 import 'tailwindcss/tailwind.css';
-export default function Cta() {
+
+function Cta({ title, description, buttonText, buttonLink, imageSrc,  }) {
   return (
     <div>
-      {/*
-  Heads up! 👋
-
-  This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
-*/}
-
-<section className="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2">
-  <div className="p-8 md:p-12 lg:px-16 lg:py-24">
-    <div className="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
-      <h2 className="text-2xl font-bold text-gray-900 md:text-3xl">
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit
-      </h2>
-
-      <p className="hidden text-gray-500 md:mt-4 md:block">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam
-        sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat
-        quisque ut interdum tincidunt duis.
-      </p>
+      <section className="overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2">
+        <div className="p-8 md:p-12 lg:px-16 lg:py-24">
+          <div className="mx-auto max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
+            <h2 className="text-2xl font-bold text-gray-900 md:text-3xl">
+              {title}
+            </h2>
 
-      <div className="mt-4 md:mt-8">
-        <a
-          href="#"
-          className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400"
-        >
-          Get Started Today
-        </a>
-      </div>
-    </div>
-  </div>
+            <p className="hidden text-gray-500 md:mt-4 md:block">
+              {description}
+            </p>
 
-  <img
-    alt="Student"
-    src="https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
-    className="h-56 w-full object-cover sm:h-full"
-  />
-</section>
+            <div className="mt-4 md:mt-8">
+              <a
+                href={buttonLink}
+                className={`inline-block rounded px-12 py-3 text-sm font-medium text-white transition focus:outline-none focus:ring focus:ring-yellow-400 bg-yellow-500 hover:bg-yellow-600`}
+              >
+                {buttonText}
+              </a>
+            </div>
+          </div>
+        </div>
 
+        <img
+          alt="Student"
+          src={imageSrc}
+          className="h-56 w-full object-cover sm:h-full"
+        />
+      </section>
     </div>
   )
 }
+
+Cta.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  buttonText: PropTypes.string,
+  buttonLink: PropTypes.string,
+  imageSrc: PropTypes.string,
+};
+
+Cta.defaultProps = {
+  title: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit',
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat quisque ut interdum tincidunt duis.',
+  buttonText: 'Get Started Today',
+  buttonLink: '#',
+  imageSrc: 'https://images.unsplash.com/photo-1464582883107-8adf2dca8a9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  
+};
+
+export default Cta;
diff --git a/src/stories/Components/Cta.stories.jsx b/src/stories/Components/Cta.stories.jsx
index 3c1002b..bc41846 100644
--- a/src/stories/Components/Cta.stories.jsx
+++ b/src/stories/Components/Cta.stories.jsx
@@ -12,6 +12,6 @@ export default {
     },
 };
 
+export const CtaPage = (args) => <Cta {...args} />;
+
 
-  
-    export const CtaPage= (args) => <Cta {...args} />;