home page started
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
@@ -0,0 +1,163 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
import AreaChart from '../charts/AreaChart'
|
||||
import CardContainer from '../CardContainer'
|
||||
import { FaArrowUp } from 'react-icons/fa'
|
||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="p-10 flex flex-col justify-center items-center gap-8">
|
||||
|
||||
<Link className='w-full block text-left' to={siteLinks.login}>Logout</Link>
|
||||
|
||||
<BreadcrumbCom title={'Home'} paths={['Dashboard', 'Home']} />
|
||||
<div className='w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Revenues</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Conversion Rate</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Transaction</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 flex justify-between items-center'>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black text-3xl font-semibold'>52%</h1>
|
||||
<p className='text-black-gray font-medium text-10'>Past 12 hours</p>
|
||||
</div>
|
||||
<div className='flex flex-col gap-1'>
|
||||
<h1 className='text-black-gray text-12 font-semibold'>Purchases</h1>
|
||||
<p className='text-black-gray font-medium text-10 flex gap-2'><span><FaArrowUp /></span> <span>5.35%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart />
|
||||
</CardContainer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* top selling */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-9 gap-8'>
|
||||
<div className='w-full col-span-1 xl:col-span-6'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Top Selling Products</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full col-span-1 xl:col-span-3'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Lifetime sales</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='px-4 h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* yearly sells */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-2 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Yearly Sales Report</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Invoices Status</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* conversion */}
|
||||
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Conversion Visualizer</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Best selling product</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
<div className='w-full'>
|
||||
<CardContainer>
|
||||
<div className='px-4 pb-4 flex justify-between items-center border-b'>
|
||||
<div className='flex justify-between'>
|
||||
<h1 className='text-black text-lg font-semibold'>Sales overview</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-[350px]'></div>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user