Dashboard Card - Copy this React, Tailwind Component to your project
'use client'; import { useSession } from 'next auth/react'; import { FaUsers, FaBoxes, FaHistory } from 'react icons/fa'; import Link from 'next/link'; import { useEffect, useState } from 'react'; interface DashboardCardProps { title: string; count?: number; content?: string; icon: React.ReactNode; link: string; } const DashboardCard: React.FC<DashboardCardProps> = ({ title, count, content, icon, link }) => ( <div className="bg white shadow rounded lg p 6 flex flex col justify between h full"> <div> <div className="flex items center justify between mb 4"> <h2 className="text xl font semibold text gray 800">{title}</h2> {icon} </div> {count !== undefined ? ( <p className="text 3xl font bold text gray 700">{count}</p> ) : ( <p className="text gray 600">{content}</p> )} </div> <Link href={link} className="text blue 600 hover:text blue 800 mt 4 inline block transition colors"> Xem chi tiết </Link> </div> ); export function HomeContent() { const { data: session, status } = useSession(); const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (status !== 'loading') { setIsLoading(false); } }, [status]); if (isLoading) { return <div className="flex justify center items center h screen">Loading...</div>; } if (!session) { return <div className="flex justify center items center h screen">Vui lòng đăng nhập để xem nội dung này.</div>; } return ( <div className="min h screen bg gray 100 p 4 sm:p 6 w full"> <h1 className="text 2xl sm:text 3xl font bold mb 6 text gray 800">Tổng quan</h1> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 4"> <DashboardCard title="Khách hàng" count={0} icon={<FaUsers className="w 8 h 8 text blue 500" />} link="/customers" /> <DashboardCard title="Sản phẩm" count={0} icon={<FaBoxes className="w 8 h 8 text green 500" />} link="/products" /> <DashboardCard title="Lịch sử mua hàng gần đây" content="Chưa có dữ liệu" icon={<FaHistory className="w 8 h 8 text purple 500" />} link="/purchase history" /> </div> </div> ); } design for me
