Banners Component Added To design System

master
Pedram Keshavarzi 3 years ago
parent af0ad66cb9
commit 8e525c93aa
  1. 60
      src/components/Banners/index.js
  2. 11
      src/redux/data.js

@ -0,0 +1,60 @@
import React from "react";
const Banners = ({
mainBanner,
leftBanner,
midTopBanner,
midBottomBanner,
}) => {
return (
<div className="flex w-full justify-between" style={{
height: '400px'
}}>
<div className={`h-full w-1/2 rounded-xl flex items-center`} style={{
background: mainBanner ? '' : 'rgba(134,160,185,0.16)',
}}>
<img src={mainBanner} className="rounded-xl h-full" />
</div>
<div className="flex h-full w-1/2 ">
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
<div className={`${midTopBanner ? '' : 'h-1/2 '} w-full rounded-xl mb-2`}
style={{
background: midTopBanner ? '' : 'rgba(134,160,185,0.16)',
}}
>
<img src={midTopBanner} className="rounded-xl" />
</div>
<div className={`${midBottomBanner ? '' : 'h-1/2 '} w-full rounded-xl mt-2`}
style={{
background: midBottomBanner ? '' : 'rgba(134,160,185,0.16)',
}}
>
<img src={midBottomBanner} className="rounded-xl" />
</div>
</div>
<div className=" h-full w-1/2 rounded-xl"
style={{
background: leftBanner ? '' : 'rgba(134,160,185,0.16)',
}}
>
<img src={leftBanner} className="rounded-xl" />
</div>
</div>
</div>
)
}
export default Banners;

@ -39,6 +39,7 @@ import VodProductNew from "../components/VodProductNew";
import AddToCartCard from "../components/AddToCart";
import ProductDescription from "../components/ProductDescription";
import QandA from '../components/QandA';
import Banners from '../components/Banners';
const components = [
{
@ -653,6 +654,16 @@ const components = [
code: null,
},
},
{
name: "Banners",
author: "Keshavarzi",
props: [],
content: {
name: "Banners Container",
component: <Banners />,
code: null,
},
},
];
export default components;

Loading…
Cancel
Save