feat: category page empty state (#1476)

.changeset/rich-flies-hang.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+adds an empty state to category pages

core/app/[locale]/(default)/(faceted)/category/[slug]/_components/empty-state.tsx

@@ -0,0 +1,22 @@
+import { PackageOpen } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
+
+export const EmptyState = () => {
+  const t = useTranslations('Category.Empty');
+
+  return (
+    <div className="my-10 flex flex-col items-center justify-center rounded-lg text-center">
+      <PackageOpen className="text-muted-foreground mb-4 h-16 w-16" />
+      <h2 className="mb-2 text-2xl font-semibold tracking-tight">{t('message')}</h2>
+
+      <div>
+        <Button asChild variant="subtle">
+          <Link href="/">{t('cta')}</Link>
+        </Button>
+      </div>
+    </div>
+  );
+};

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { SortBy } from '../../_components/sort-by';
 import { fetchFacetedSearch } from '../../fetch-faceted-search';
 
 import { CategoryViewed } from './_components/category-viewed';
+import { EmptyState } from './_components/empty-state';
 import { SubCategories } from './_components/sub-categories';
 import { getCategoryPageData } from './page-data';
 
@@ -109,6 +110,8 @@ export default async function Category({ params: { locale, slug }, searchParams
             {t('products')}
           </h2>
 
+          {products.length === 0 && <EmptyState />}
+
           <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 sm:gap-8">
             {products.map((product, index) => (
               <ProductCard

core/messages/en.json

@@ -122,7 +122,11 @@
   "Category": {
     "sortBy": "{items, plural, =0 {no items} =1 {1 item} other {# items}}",
     "products": "Products",
-    "items": "items"
+    "items": "items",
+    "Empty": {
+      "message": "No products in this category",
+      "cta": "Return to Home"
+    }
   },
   "Search": {
     "title": "Search results",