@pradip1995/segment-product-card 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,8 @@
   "exports": {
     ".": "./src/index.ts",
     "./manifest": "./src/manifest.ts",
-    "./product-scroll": "./src/product-scroll.tsx"
+    "./product-scroll": "./src/product-scroll.tsx",
+    "./product-rail-variants": "./src/product-rail-variants.tsx"
   },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
@@ -22,8 +23,8 @@
     "next": ">=15"
   },
   "dependencies": {
-    "@pradip1995/segment-primitives": "0.2.0",
-    "@pradip1995/segment-tokens": "0.2.0"
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.0"
   },
   "devDependencies": {
     "@pradip1995/plugin-sdk": "^0.2.0",

package/src/product-rail-variants.tsx

@@ -0,0 +1,101 @@
+import ProductCard from "./segment"
+import ProductScroll from "./product-scroll"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import type { ProductRailVariant } from "@pradip1995/segment-primitives/section-variants"
+import type { HttpTypes } from "@medusajs/types"
+
+function ProductRailHeader({
+  title,
+  viewAllLink,
+  href = "/store",
+}: {
+  title: string
+  viewAllLink: string
+  href?: string
+}) {
+  return (
+    <div className="home-section-header">
+      <h2 className="home-section-header__title">{title}</h2>
+      <LocalizedLink href={href} className="home-section-header__link">
+        {viewAllLink}
+      </LocalizedLink>
+    </div>
+  )
+}
+
+function ProductRailGrid({
+  products,
+  region,
+  countryCode,
+}: {
+  products: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+}) {
+  return (
+    <div className="product-rail__grid grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
+      {products.map((p) => (
+        <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
+      ))}
+    </div>
+  )
+}
+
+function ProductRailFeatured({
+  products,
+  region,
+  countryCode,
+}: {
+  products: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+}) {
+  const [featured, ...rest] = products
+  if (!featured) return null
+
+  return (
+    <div className="product-rail__featured">
+      <div className="product-rail__featured-main">
+        <ProductCard product={featured} region={region} countryCode={countryCode} />
+      </div>
+      <div className="product-rail__featured-side">
+        {rest.slice(0, 3).map((p) => (
+          <ProductCard key={p.id} product={p} region={region} countryCode={countryCode} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function ProductRailByVariant({
+  variant,
+  products,
+  region,
+  ratings,
+  countryCode,
+  title,
+  viewAllLink,
+  href,
+}: {
+  variant: ProductRailVariant
+  products: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion
+  ratings?: Array<{ product_id?: string; rating?: number }>
+  countryCode?: string
+  title: string
+  viewAllLink: string
+  href?: string
+}) {
+  return (
+    <>
+      <ProductRailHeader title={title} viewAllLink={viewAllLink} href={href} />
+      {variant === "carousel" ? (
+        <ProductScroll products={products} region={region} ratings={ratings} countryCode={countryCode} />
+      ) : variant === "featured" ? (
+        <ProductRailFeatured products={products} region={region} countryCode={countryCode} />
+      ) : (
+        <ProductRailGrid products={products} region={region} countryCode={countryCode} />
+      )}
+    </>
+  )
+}