init starter package

src/modules/collections/templates/index.tsx

@@ -0,0 +1,47 @@
+import { Suspense } from "react"
+
+import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
+import RefinementList from "@modules/store/components/refinement-list"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import PaginatedProducts from "@modules/store/templates/paginated-products"
+import { HttpTypes } from "@medusajs/types"
+
+export default function CollectionTemplate({
+  sortBy,
+  collection,
+  page,
+  countryCode,
+}: {
+  sortBy?: SortOptions
+  collection: HttpTypes.StoreCollection
+  page?: string
+  countryCode: string
+}) {
+  const pageNumber = page ? parseInt(page) : 1
+  const sort = sortBy || "created_at"
+
+  return (
+    <div className="flex flex-col small:flex-row small:items-start py-6 content-container">
+      <RefinementList sortBy={sort} />
+      <div className="w-full">
+        <div className="mb-8 text-2xl-semi">
+          <h1>{collection.title}</h1>
+        </div>
+        <Suspense
+          fallback={
+            <SkeletonProductGrid
+              numberOfProducts={collection.products?.length}
+            />
+          }
+        >
+          <PaginatedProducts
+            sortBy={sort}
+            page={pageNumber}
+            collectionId={collection.id}
+            countryCode={countryCode}
+          />
+        </Suspense>
+      </div>
+    </div>
+  )
+}