41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
|
|
export const EmptyGalleryState = () => {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-16 px-6">
|
|
<div className="w-24 h-24 mb-6 rounded-full bg-slate-800 flex items-center justify-center">
|
|
<svg
|
|
className="w-12 h-12 text-gray-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h3 className="text-xl md:text-2xl font-bold text-white mb-3 text-center">
|
|
No Generated Images Yet
|
|
</h3>
|
|
|
|
<p className="text-gray-400 text-center mb-8 max-w-md">
|
|
Your generated images will appear here. Start creating AI-powered images using the text-to-image tool.
|
|
</p>
|
|
|
|
<Link
|
|
href="/demo/tti"
|
|
className="inline-block px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
|
|
>
|
|
Generate Images
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|