@alphasquad/saleor-template-advance 0.1.0

package/src/app/components/shop/CategoryFilter.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import type { CategoryNode } from "@/graphql/queries/getAllCategoriesTree";
+import { FiltersCollapsible } from "@/app/components/filtersCollapsible";
+
+export interface CategoryFilterProps {
+  categories: { edges: { node: CategoryNode }[] };
+  selectedSlugs: string[];
+  // Callback with the updated selection
+  onChangeSelected?: (next: string[]) => void;
+}
+
+export default function CategoryFilter({ categories, selectedSlugs, onChangeSelected }: CategoryFilterProps) {
+
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(selectedSlugs));
+  const [expanded, setExpanded] = useState<Set<string>>(() => {
+    const open = new Set<string>();
+    categories.edges.forEach(({ node }) => {
+      if (selectedSlugs.includes(node.slug)) open.add(node.id);
+      const hasSelectedChild = node.children?.edges?.some(({ node: c }) => selectedSlugs.includes(c.slug));
+      if (hasSelectedChild) open.add(node.id);
+    });
+    return open;
+  });
+
+  // Stable key that changes only when the category tree structure changes
+  const categoriesKey = useMemo(() => {
+    try {
+      return JSON.stringify(
+        categories.edges.map(({ node }) => ({
+          id: node.id,
+          slug: node.slug,
+          children: node.children?.edges?.map(({ node: c }) => c.id) ?? [],
+        }))
+      );
+    } catch {
+      // Fallback to length if serialization fails for any reason
+      return String(categories.edges.length);
+    }
+  }, [categories]);
+
+  // Build a lookup of slug -> all descendant slugs (one level deep based on current query)
+  const slugToDescSlugs = useMemo(() => {
+    const map = new Map<string, string[]>();
+    const walkChildren = (n: CategoryNode | undefined | null): string[] => {
+      if (!n?.children?.edges?.length) return [];
+      const direct = n.children.edges.map(({ node }) => node.slug);
+      // If future depth is added, recurse here
+      return direct;
+    };
+    categories.edges.forEach(({ node }) => {
+      map.set(node.slug, walkChildren(node));
+      node.children?.edges?.forEach(({ node: child }) => {
+        // Children in current query do not include nested children; treat as leaf
+        map.set(child.slug, []);
+      });
+    });
+    return map;
+  }, [categoriesKey, categories]);
+
+   
+  useEffect(() => {
+    // keep local state in sync with props when SSR re-renders
+    setSelected(new Set(selectedSlugs));
+    // re-compute expanded to ensure parents with selections are open
+    const open = new Set<string>();
+    categories.edges.forEach(({ node }) => {
+      if (selectedSlugs.includes(node.slug)) open.add(node.id);
+      const hasSelectedChild = node.children?.edges?.some(({ node: c }) => selectedSlugs.includes(c.slug));
+      if (hasSelectedChild) open.add(node.id);
+    });
+    setExpanded(open);
+  }, [selectedSlugs, categoriesKey]);
+
+  const toggle = (slug: string) => {
+    const base = new Set(selected);
+    const descendants = slugToDescSlugs.get(slug) || [];
+    if (base.has(slug)) {
+      base.delete(slug);
+      descendants.forEach((s) => base.delete(s));
+    } else {
+      base.add(slug);
+      descendants.forEach((s) => base.add(s));
+    }
+
+    // Update state only, don't modify URL
+    setSelected(base);
+    // Notify parent component about the change (if callback provided)
+    onChangeSelected?.(Array.from(base));
+  };
+
+  const clearAll = () => {
+    // Update state only, don't modify URL
+    setSelected(new Set());
+    // Notify parent component about the change
+    onChangeSelected?.([]);
+  };
+
+  const isChecked = (slug: string) => selected.has(slug);
+
+  const toggleParent = (id: string) => {
+    const next = new Set(expanded);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    setExpanded(next);
+  };
+
+  return (
+    <FiltersCollapsible title="Categories" defaultOpen>
+      {/* <div className="mb-2 flex items-center justify-end px-2">
+        <button
+          type="button"
+          onClick={clearAll}
+          className="text-sm text-[var(--color-secondary-700)] hover:text-[var(--color-secondary-900)] font-secondary"
+        >
+          Clear all
+        </button>
+      </div> */}
+      <div className="px-1">
+        <ul className="space-y-4 md:space-y-3">
+          {categories.edges.map(({ node }) => (
+            <li key={node.id} >
+              <div className="flex items-center justify-between gap-2 cursor-pointer">
+                <label className="flex flex-1 items-center gap-2 font-secondary text-[var(--color-secondary-800)] w-full cursor-pointer">
+                  <input
+                    type="checkbox"
+                    className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+                    checked={isChecked(node.slug)}
+                    onChange={() => toggle(node.slug)}
+                  />
+                  <span className="flex items-center gap-2">
+                    <span className="truncate">{node.name}</span>
+
+                  </span>
+                </label>
+                {node.children?.edges?.length ? (
+                  <button
+                    type="button"
+                    aria-label={expanded.has(node.id) ? "Collapse" : "Expand"}
+                    className="p-2 md:p-1 text-[var(--color-secondary-700)] hover:text-[var(--color-secondary-900)] transition-transform cursor-pointer"
+                    onClick={() => toggleParent(node.id)}
+                  >
+                    <svg
+                      className={`h-5 w-5 md:h-4 md:w-4 transition-transform ${expanded.has(node.id) ? "rotate-180" : "rotate-0"}`}
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z" clipRule="evenodd" />
+                    </svg>
+                  </button>
+                ) : <span className="w-5" />}
+              </div>
+              {node.children?.edges?.length && expanded.has(node.id) ? (
+                <ul className="mt-2 ml-6 text-sm text-[var(--color-secondary-800)] space-y-2 md:space-y-1">
+                  {node.children.edges.map(({ node: child }) => (
+                    <li key={child.id} >
+                      <label className="flex flex-1 items-center gap-2 font-secondary w-full cursor-pointer">
+                        <input
+                          type="checkbox"
+                          className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+                          checked={isChecked(child.slug)}
+                          onChange={() => toggle(child.slug)}
+                        />
+                        <div className="flex justify-between w-full items-center cursor-pointer">
+                          <span className="truncate">{child.name}</span>
+                          {typeof child.products?.totalCount === "number" && (
+                            <span className="text-xs font-secondary bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] size-fit px-0.5 text-center leading-4">
+                              {child.products.totalCount}
+                            </span>
+                          )}
+                        </div>
+                      </label>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </FiltersCollapsible>
+  );
+}

package/src/app/components/shop/ItemsPerPageSelect.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useMemo } from "react";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+// import { ChevronDownIcon } from "@/app/utils/svgs/chevronDownIcon";
+
+const OPTIONS = [10, 20, 50, 100] as const;
+
+type Option = (typeof OPTIONS)[number];
+
+export default function ItemsPerPageSelect() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const value: Option = useMemo(() => {
+    const raw = searchParams?.get("first");
+    const n = raw ? parseInt(raw, 10) : NaN;
+    return (OPTIONS as readonly number[]).includes(n) ? (n as Option) : 20;
+  }, [searchParams]);
+
+  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const next = parseInt(e.target.value, 10) as Option;
+    const params = new URLSearchParams(searchParams?.toString() || "");
+    params.set("first", String(next));
+    // reset pagination cursor when page size changes
+    params.delete("after");
+    const href = `${pathname}?${params.toString()}`;
+    router.push(href, { scroll: false });
+  };
+
+  return (
+    <label className="flex items-center justify-end gap-2 text-sm font-secondary">
+      <span className="text-[var(--color-secondary-700)] flex-shrink-0">Items per page:</span>
+      <div className="relative inline-block">
+        <select
+          aria-label="Items per page"
+          value={value}
+          onChange={onChange}
+          className="h-9 pl-2 pr-8 rounded border bg-[var(--color-secondary-50)] text-[var(--color-secondary-900)] border-[var(--color-secondary-300)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-600)] cursor-pointer appearance-none"
+        >
+          {OPTIONS.map((opt) => (
+            <option key={opt} value={opt} className="bg-white text-[var(--color-secondary-900)]">
+              {opt}
+            </option>
+          ))}
+        </select>
+        <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M13 6L8 11L3 6"
+              stroke="var(--color-secondary-700)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </svg>
+        </span>
+      </div>
+    </label>
+  );
+}

package/src/app/components/shop/ItemsPerPageSelectClient.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+const OPTIONS = [10, 20, 50, 100] as const;
+
+type Option = (typeof OPTIONS)[number];
+
+interface ItemsPerPageSelectClientProps {
+  value: Option;
+  onChange: (value: Option) => void;
+}
+
+export default function ItemsPerPageSelectClient({
+  value,
+  onChange,
+}: ItemsPerPageSelectClientProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const next = parseInt(e.target.value, 10) as Option;
+    onChange(next);
+  };
+
+  return (
+    <label className="flex items-center justify-end gap-2 text-sm font-secondary ml-1">
+      {/* <span className="text-[var(--color-secondary-700)] flex-shrink-0">Items per page:</span> */}
+      <div className="relative inline-block">
+        <select
+          aria-label="Items per page"
+          value={value}
+          onChange={handleChange}
+          className="h-12 pl-3 pr-8 border bg-[var(--color-secondary-110)] text-[var(--color-secondary-900)] border-[var(--color-secondary-300)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-600)] cursor-pointer appearance-none"
+        >
+          {OPTIONS.map((opt) => (
+            <option key={opt} value={opt} className="bg-white text-[var(--color-secondary-900)]">
+              {opt}
+            </option>
+          ))}
+        </select>
+        <span className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            width="16"
+            height="16"
+            fill="none"
+            aria-hidden
+          >
+            <path
+              d="M13 6L8 11L3 6"
+              stroke="var(--color-secondary-700)"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </svg>
+        </span>
+      </div>
+    </label>
+  );
+}

package/src/app/components/shop/MobileFilters.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ModalLayout from "@/app/components/reuseableUI/modalLayout";
+import CategoryFilter from "@/app/components/shop/CategoryFilter";
+import type { CategoryNode } from "@/graphql/queries/getAllCategoriesTree";
+import { FilterIcon } from "@/app/utils/svgs/filterIcon";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export default function MobileFilters({
+  categories,
+  selectedSlugs,
+  basePath = "/products/all",
+}: {
+  categories: { edges: { node: CategoryNode }[] };
+  selectedSlugs: string[];
+  basePath?: string;
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [open, setOpen] = useState(false);
+  const activeCount = selectedSlugs.length;
+  const [tempSelected, setTempSelected] = useState<string[]>(selectedSlugs);
+
+  // Sync temp selection with current when opening
+  useEffect(() => {
+    if (open) setTempSelected(selectedSlugs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const applyFilters = () => {
+    const params = new URLSearchParams(searchParams?.toString() || "");
+    params.delete("category");
+    params.delete("after");
+    for (const s of tempSelected) params.append("category", s);
+    const href = `${basePath}?${params.toString()}`;
+    router.push(href, { scroll: false });
+    setOpen(false);
+  };
+
+  return (
+    <div className="lg:hidden w-full pt-6 z-50">
+      <div className="flex justify-between items-center w-full">
+        <p className="font-semibold text-sm px-4 py-3.5">FILTER BY</p>
+        <button
+          type="button"
+          aria-label={activeCount > 0 ? `Open filters, ${activeCount} active` : "Open filters"}
+          className="p-3.5 cursor-pointer relative"
+          onClick={() => setOpen(true)}
+        >
+          {FilterIcon}
+          {activeCount > 0 && (
+            <span
+              aria-hidden
+              className="absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-[var(--color-primary)] text-white text-[10px] leading-[18px] text-center font-semibold"
+            >
+              {activeCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      <ModalLayout
+        isModalOpen={open}
+        onClose={() => setOpen(false)}
+        heading="Filters"
+        className="lg:max-w-lg overflow-hidden"
+      >
+        <div className="flex h-full flex-col">
+          {/* Scrollable content */}
+          <div className="flex-1 overflow-y-auto mt-4 md:mt-6 pt-1 md:pt-2 space-y-4 px-1">
+            <CategoryFilter
+              categories={categories}
+              selectedSlugs={tempSelected}
+              onChangeSelected={setTempSelected}
+            />
+          </div>
+
+          {/* Fixed footer inside modal panel (non-scrolling) */}
+          <div className="shrink-0 border-t border-[var(--color-secondary-200)] bg-[var(--color-secondary-50)] px-4 py-3">
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={applyFilters}
+                className="w-full h-11 rounded bg-[var(--color-primary)] text-white font-secondary font-semibold"
+              >
+                Apply Filters
+              </button>
+              <button
+                type="button"
+                onClick={() => setTempSelected([])}
+                className="w-full h-11 rounded border border-[var(--color-secondary-300)] text-[var(--color-secondary-800)] bg-white font-secondary"
+              >
+                Clear
+              </button>
+            </div>
+            <div className="pt-[env(safe-area-inset-bottom)]" />
+          </div>
+        </div>
+      </ModalLayout>
+    </div>
+  );
+}

package/src/app/components/shop/ProductGridSkeleton.tsx

@@ -0,0 +1,16 @@
+export default function ProductGridSkeleton() {
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="bg-white rounded-lg border border-[var(--color-secondary-200)] overflow-hidden animate-pulse">
+          <div className="aspect-square bg-[var(--color-secondary-100)]"></div>
+          <div className="p-4 space-y-2">
+            <div className="h-4 bg-[var(--color-secondary-100)] rounded w-3/4"></div>
+            <div className="h-4 bg-[var(--color-secondary-100)] rounded w-1/2"></div>
+            <div className="h-4 bg-[var(--color-secondary-100)] rounded w-1/4"></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/app/components/shop/ProductsGrid.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { shopApi } from "@/lib/api/shop";
+import { ProductCard } from "@/app/components/reuseableUI/productCard";
+import EmptyState from "@/app/components/reuseableUI/emptyState";
+import { gtmViewItemList, gtmSearchWithResults, Product } from "@/app/utils/googleTagManager";
+import { useAppConfiguration } from "../providers/ServerAppConfigurationProvider";
+
+export interface ProductsGridProps {
+  initialEdges: Array<{ node: { id: string; name: string; slug: string; media?: Array<{ id: string; url: string; alt: string | null }>; category: { id: string; name: string } | null; pricing: { onSale: boolean | null; priceRange: { start: { gross: { amount: number; currency: string } } | null; stop: { gross: { amount: number; currency: string } } | null } | null } | null } }>;
+  initialPageInfo: { hasNextPage: boolean; hasPreviousPage: boolean; startCursor: string | null; endCursor: string | null };
+  channel: string;
+  first: number;
+  categoryIds?: string[];
+  brandIds?: string[];
+  search?: string;
+  fitment?: string;
+  layout?: 'shop' | 'category';
+}
+
+export default function ProductsGrid({
+  initialEdges,
+  initialPageInfo,
+  channel,
+  first,
+  categoryIds,
+  brandIds,
+  search,
+  fitment,
+  layout = 'shop',
+}: ProductsGridProps) {
+  const { getGoogleTagManagerConfig } = useAppConfiguration();
+  const gtmConfig = getGoogleTagManagerConfig();
+  const [edges, setEdges] = useState(initialEdges);
+  const [pageInfo, setPageInfo] = useState(initialPageInfo);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset grid when any upstream input changes (e.g., filters via URL)
+  const contextKey = useMemo(
+    () => JSON.stringify({ c: channel, f: first, cats: categoryIds ?? [], brands: brandIds ?? [], search: search ?? "" }),
+    [channel, first, categoryIds, brandIds, search]
+  );
+  const currentKeyRef = useRef(contextKey);
+  useEffect(() => {
+    setEdges(initialEdges);
+    setPageInfo(initialPageInfo);
+    setError(null);
+    setLoadingMore(false);
+    currentKeyRef.current = contextKey;
+  }, [initialEdges, initialPageInfo, contextKey]);
+
+  // Track product impressions
+  useEffect(() => {
+    if (edges.length > 0) {
+      const products: Product[] = edges.map(({ node }, index) => ({
+        item_id: node.id,
+        item_name: node.name,
+        item_category: node.category?.name || 'Products',
+        price: node.pricing?.priceRange?.start?.gross?.amount || 0,
+        currency: node.pricing?.priceRange?.start?.gross?.currency || 'USD',
+        index: index,
+        item_list_name: layout === 'category' ? 'Category Products' : search ? 'Search Results' : 'Shop Products',
+        item_list_id: layout === 'category' ? 'category_list' : search ? 'search_results' : 'shop_list',
+      }));
+
+      gtmViewItemList(
+        products,
+        layout === 'category' ? 'Category Products' : search ? 'Search Results' : 'Shop Products',
+        layout === 'category' ? 'category_list' : search ? 'search_results' : 'shop_list',
+        gtmConfig?.container_id
+      );
+
+      // Track search results if this is a search
+      if (search && search.trim()) {
+        gtmSearchWithResults(search.trim(), edges.length, 'Products', gtmConfig?.container_id);
+      }
+    }
+  }, [edges, layout, search]);
+
+  const loadMore = async () => {
+    if (!pageInfo?.hasNextPage || loadingMore) return;
+    setLoadingMore(true);
+    setError(null);
+    try {
+      const requestKey = currentKeyRef.current;
+      
+      // Use cursor-based pagination for GraphQL
+      const after = pageInfo?.endCursor;
+      
+      let response;
+      
+      if (categoryIds && categoryIds.length > 0) {
+        // Category-specific products
+        response = await shopApi.getProductsByCategory({
+          categoryIds,
+          channel,
+          first,
+          after: after || undefined,
+          search: search || undefined
+        });
+      } else if (brandIds && brandIds.length > 0) {
+        // Brand-specific products (product types)
+        response = await shopApi.getProductsByProductType({
+          productTypeIds: brandIds,
+          channel,
+          first,
+          after: after || undefined,
+          search: search || undefined
+        });
+      } else {
+        // General product search using existing function
+        response = await shopApi.getProductsByCategoriesAndProductTypes({
+          categoryIds: categoryIds || undefined,
+          productTypeIds: brandIds || undefined,
+          channel,
+          first,
+          sortField: "DATE",
+          sortDirection: "ASC"
+        });
+      }
+      
+      // Ignore stale responses if inputs changed during the request
+      if (requestKey !== currentKeyRef.current) return;
+      
+      // Products are already in the correct GraphQL format, but need to add onSale field
+      type GraphQLEdgeWithOnSale = {
+        cursor: string;
+        node: {
+          id: string;
+          name: string;
+          slug: string;
+          description: string;
+          category: { id: string; name: string } | null;
+          productType: { id: string; name: string } | null;
+          media: Array<{ id: string; url: string; alt: string | null }>;
+          pricing: {
+            onSale: boolean | null;
+            priceRange: {
+              start: { gross: { amount: number; currency: string } } | null;
+              stop: { gross: { amount: number; currency: string } } | null;
+            } | null;
+          } | null;
+        };
+      };
+      
+      const newEdges: GraphQLEdgeWithOnSale[] = response.products.edges.map((edge) => ({
+        ...edge,
+        node: {
+          ...edge.node,
+          pricing: edge.node.pricing ? {
+            ...edge.node.pricing,
+            onSale: null // GraphQL doesn't provide onSale info
+          } : null
+        }
+      }));
+      
+      // Dedupe by product ID
+      setEdges((prev) => {
+        const seen = new Set(prev.map((e) => e.node.id));
+        const fresh = newEdges.filter((e) => !seen.has(e.node.id));
+        return [...prev, ...fresh];
+      });
+      
+      // Update page info from GraphQL response
+      setPageInfo(response.products.pageInfo);
+      
+    } catch (e) {
+      console.error('Load more error:', e);
+      setError(e instanceof Error ? e.message : "Failed to load more products");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  return (
+    <>
+      {edges.length > 0 ? (
+        <div className={`grid gap-4 ${
+          layout === 'category' 
+            ? 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4' 
+            : 'grid-cols-2 lg:grid-cols-3'
+        }`}>
+          {edges.map(({ node }) => {
+            const img = node.media?.[0]?.url || "/no-image-avail-large.png";
+            const price = node.pricing?.priceRange?.start?.gross?.amount ?? 0;
+            // Use the original Saleor slug as-is for the URL
+            const href = `/product/${encodeURIComponent(node.slug)}`;
+            return (
+              <ProductCard
+                key={node.id}
+                id={node.id}
+                name={node.name}
+                image={img}
+                href={href}
+                price={price}
+                category_id={node.category?.id || ""}
+                category={node.category?.name || ""}
+                onSale={Boolean(node.pricing?.onSale)}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <EmptyState
+          text="No products found"
+          textParagraph="Try adjusting your search or filter to find what you're looking for."
+          className="col-span-full my-12"
+        />
+      )}
+
+      {error ? (
+        <div className="mt-4 text-sm text-red-600">{error}</div>
+      ) : null}
+
+      {pageInfo?.hasNextPage && (
+        <div className="mt-10 flex justify-center">
+          <button
+            onClick={loadMore}
+            disabled={loadingMore}
+            className="px-4 py-2 bg-[var(--color-secondary-200)] text-gray-800 hover:opacity-80 disabled:opacity-60"
+          >
+            {loadingMore ? "Loading..." : "Load More"}
+          </button>
+        </div>
+      )}
+    </>
+  );
+}