WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'home-banners-dashboard' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-02-26 15:46:14 +00:00
committed by Gogs
parent dc07cff959 dd802ab22e
commit bddbe6ceb4
1 changed files with 77 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dashboards/AccountDashboard.jsx
+77 -9
View File
@@ -1,15 +1,83 @@
import React from 'react' import React from "react";
const AccountDashboard = ({className}) => { const AccountDashboard = ({ className }) => {
return ( return (
<div className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-[#ffed00] ${ <div
className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
className || "" className || ""
}`}> }`}
<div className="w-full h-full flex items-center justify-center text-5xl text-center"> >
Account Dashboard <div className="w-full h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
<TopBanner />
<TopBanner />
<TopBanner />
</div>
<div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
<LowerBanner />
<LowerBanner />
</div> </div>
</div> </div>
) );
} };
export default AccountDashboard export default AccountDashboard;
const TopBanner = () => {
let Image = require(`../../assets/images/offer.jpg`);
return (
<div className="flex flex-col shadow-md rounded-xl">
<div className="h-[12rem] rounded-t-xl">
<img
src={Image}
alt="banner-img"
className="w-full h-full rounded-t-xl"
/>
</div>
<div className="h-[7rem] rounded-b-xl bg-white">
<div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
<h3 className="font-bold text-lg">Banner Title</h3>
<p>Banner description text will come follow</p>
</div>
<div className="flex justify-between w-full px-2 items-center">
<span className="text-slate-300 font-semibold">follow up text</span>
<button className="flex items-center justify-center gap-2">
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
</button>
</div>
</div>
</div>
);
};
const LowerBanner = () => {
let Image = require(`../../assets/images/offer.jpg`);
return (
<div className="flex flex-col bg-white shadow-md h-full rounded-xl">
<div className="w-full flex justify-between border-b border-slate-300 p-2">
<div className="h-[130px] flex justify-between items-center">
<div className="px-2">
<h3 className="text-lg font-bold">Banner Title</h3>
<p className="text-sm">Banner description text will come follow</p>
</div>
</div>
<div className="w-[150px] h-[100px]">
<img
src={Image}
alt="banner-img"
className="w-full h-full rounded-xl"
/>
</div>
</div>
<div className="flex justify-between w-full px-2 items-center">
<span className="text-slate-300 font-semibold">follow up text</span>
<button className="flex items-center justify-center gap-2">
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
<div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
</button>
</div>
</div>
);
};