Banners Component Made

temp
Pedram Keshavarzi 3 years ago
parent 819337bb53
commit 0091aa4f7e
  1. 60
      src/components/Banners/index.js
  2. 4
      src/views/Home/Desktop/index.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;

@ -16,7 +16,9 @@ const DesktopHome = (
return (
<div className="flex flex-col items-center w-4/5 justify-center">
<Banners />
<Banners
/>
</div>
)

Loading…
Cancel
Save