hamid zarghami
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { FC, ReactNode } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
type Props = {
|
|
title: string
|
|
icon: ReactNode,
|
|
color: string,
|
|
count: number,
|
|
description: string,
|
|
to?: string
|
|
}
|
|
|
|
const ItemDashboard: FC<Props> = (props: Props) => {
|
|
|
|
return (
|
|
<Link to={props.to ? props.to : ''} className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
|
|
<div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
|
|
{props.icon}
|
|
</div>
|
|
<div className='mt-5'>
|
|
{props.title}
|
|
</div>
|
|
|
|
<div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
|
|
<div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
|
|
<div className='flex gap-0.5'>
|
|
<div>{props.count}</div>
|
|
<div className='whitespace-nowrap'>
|
|
{props.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default ItemDashboard |