@pradip1995/segment-you-may-also-like 0.2.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pradip1995/segment-you-may-also-like",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2",
+    "@pradip1995/segment-product-card": "0.3.2"
+  },
+  "devDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "you-may-also-like",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "cartPage",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,66 @@
+.you-may-also-like {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.you-may-also-like__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+
+.you-may-also-like__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text-heading);
+}
+
+.you-may-also-like__nav {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.you-may-also-like__nav-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.you-may-also-like__nav-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.you-may-also-like__nav-btn--next {
+  background: var(--color-brand-accent);
+  color: var(--color-text-inverse);
+  border-color: var(--color-brand-accent);
+}
+
+.you-may-also-like__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .you-may-also-like__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .you-may-also-like__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}

package/src/segment.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import "./segment.css"
+import { useMemo, useState } from "react"
+import ProductCard from "@pradip1995/segment-product-card"
+import type { HttpTypes } from "@medusajs/types"
+
+const PAGE_SIZE = 4
+
+export default function YouMayAlsoLike({
+  products = [],
+  region,
+  title = "You may also like",
+}: {
+  products?: HttpTypes.StoreProduct[]
+  region?: HttpTypes.StoreRegion
+  title?: string
+}) {
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const list = useMemo(() => products.filter(Boolean), [products])
+  const maxIndex = Math.max(0, list.length - PAGE_SIZE)
+  const currentProducts = list.slice(currentIndex, currentIndex + PAGE_SIZE)
+
+  if (list.length === 0) return null
+
+  const canGoPrevious = currentIndex > 0
+  const canGoNext = currentIndex < maxIndex
+
+  return (
+    <section className="you-may-also-like" aria-label={title}>
+      <div className="you-may-also-like__header">
+        <h2 className="you-may-also-like__title">{title}</h2>
+        {list.length > PAGE_SIZE ? (
+          <div className="you-may-also-like__nav">
+            <button
+              type="button"
+              onClick={() => setCurrentIndex((prev) => Math.max(0, prev - PAGE_SIZE))}
+              disabled={!canGoPrevious}
+              className="you-may-also-like__nav-btn"
+              aria-label="Previous products"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <polyline points="15 18 9 12 15 6" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              onClick={() => setCurrentIndex((prev) => Math.min(maxIndex, prev + PAGE_SIZE))}
+              disabled={!canGoNext}
+              className="you-may-also-like__nav-btn you-may-also-like__nav-btn--next"
+              aria-label="Next products"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+            </button>
+          </div>
+        ) : null}
+      </div>
+
+      <ul className="you-may-also-like__grid">
+        {currentProducts.map((product) => (
+          <li key={product.id} className="you-may-also-like__item">
+            <ProductCard product={product} region={region} />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}