frontend-shopify/nextjs-shopify-products
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign not-found and error states with clean black/white text

Browse Source 
Replace red alert boxes, icons, borders, and buttons with simple
centered text for product/collection not-found, load-failure, and
empty states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-06-10 14:11:11 -04:00
parent e4ecab1875
commit b0116ac0cb
4 changed files with 42 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/shopify/collections.tsx
View File

@@ -5,7 +5,7 @@ import { useCollections } from '@/hooks/use-shopify-collections';
import CollectionCard from './collection-card';
const Collections: React.FC = () => {
const { collections, loading, error, refetch } = useCollections(20);
const { collections, loading, error } = useCollections(20);
if (loading) {
return (
@@ -32,26 +32,14 @@ const Collections: React.FC = () => {
if (error) {
return (
<div className="py-16">
<div className="container mx-auto px-4 text-center">
<h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
Our Collections
<div className="container mx-auto px-4 py-24 text-center">
<h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
Collections Unavailable
</h2>
<div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
<h3 className="text-lg font-medium text-red-800 mb-2">
Failed to Load Collections
</h3>
<p className="text-red-600 mb-4">
{error}
</p>
<button
onClick={() => refetch()}
className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
>
Try Again
</button>
</div>
<p className="text-gray-500 max-w-md mx-auto">
We couldn&apos;t load any collections right now. Please try again
later.
</p>
</div>
</div>
);
@@ -65,9 +53,8 @@ const Collections: React.FC = () => {
Our Collections
</h2>
<div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
<i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
<h3 className="text-lg font-medium text-gray-600 mb-2">
<div className="max-w-md mx-auto py-12">
<h3 className="text-lg font-medium text-gray-900 mb-2">
No Collections Found
</h3>
<p className="text-gray-500">