41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { PackageOpen } from 'lucide-react'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
interface EmptyStateProps {
|
|
title?: string
|
|
message?: string
|
|
actionText?: string
|
|
actionLink?: string
|
|
actionClick?: () => void
|
|
}
|
|
|
|
export default function EmptyState({
|
|
title = 'Nothing found',
|
|
message = 'We could not find any items here.',
|
|
actionText = 'Browse Shop',
|
|
actionLink,
|
|
actionClick
|
|
}: EmptyStateProps) {
|
|
const ButtonContent = () => (
|
|
<span className="inline-block mt-6 px-8 py-3 bg-pop-black text-pop-bg rounded-xl text-sm font-bold uppercase tracking-widest hover:bg-pop-pink hover:text-pop-bg hover:shadow-lg transition-all cursor-pointer">
|
|
{actionText}
|
|
</span>
|
|
)
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center p-12 bg-pop-bg border border-pop-black/10 rounded-2xl shadow-sm max-w-lg mx-auto my-8">
|
|
<div className="w-16 h-16 bg-pop-black/5 rounded-full flex items-center justify-center mb-2">
|
|
<PackageOpen className="w-8 h-8 text-pop-black" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-pop-black">{title}</h3>
|
|
<p className="text-pop-black/70">{message}</p>
|
|
|
|
{actionClick ? (
|
|
<div onClick={actionClick}><ButtonContent /></div>
|
|
) : actionLink ? (
|
|
<Link to={actionLink}><ButtonContent /></Link>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|