Skip to content

Commit

Permalink
code: added relevant args for cta
Browse files Browse the repository at this point in the history
  • Loading branch information
dakshsinghrathore committed Dec 13, 2023
1 parent 532a311 commit 866329b
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 67 deletions.
60 changes: 30 additions & 30 deletions src/stories/Components/Button.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
};
export const Warning = {
args: {
primary: true,
label: 'Delete now',
backgroundColor: 'red',
}
};
82 changes: 47 additions & 35 deletions src/stories/Components/Cta.jsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions src/stories/Components/Cta.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@ export default {
},
};

export const CtaPage = (args) => <Cta {...args} />;



export const CtaPage= (args) => <Cta {...args} />;

0 comments on commit 866329b

Please sign in to comment.