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-spa-forest text-spa-light rounded-xl text-sm font-bold uppercase tracking-widest hover:bg-spa-stone 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-spa-light border border-spa-stone/10 rounded-2xl shadow-sm max-w-lg mx-auto my-8">
|
|
<div className="w-16 h-16 bg-spa-sage/30 rounded-full flex items-center justify-center mb-2">
|
|
<PackageOpen className="w-8 h-8 text-spa-forest" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-pop-black">{title}</h3>
|
|
<p className="text-spa-stone">{message}</p>
|
|
|
|
{actionClick ? (
|
|
<div onClick={actionClick}><ButtonContent /></div>
|
|
) : actionLink ? (
|
|
<Link to={actionLink}><ButtonContent /></Link>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|