@pradip1995/segment-product-card 0.3.12 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,6 @@
     "./product-scroll": "./src/product-scroll.tsx",
     "./product-rail-variants": "./src/product-rail-variants.tsx"
   },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@pradip1995/commerce-core": "^4.0.0",
     "@pradip1995/plugin-sdk": "^0.2.0",
@@ -37,5 +33,9 @@
     "@types/react": "^19",
     "react": "19.0.3",
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
   }
-}
+}

package/src/beauty-product-card.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import Image from "next/image"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import type { HttpTypes } from "@medusajs/types"
@@ -57,10 +58,13 @@ export default function BeautyProductCard({
       >
         <div className="beauty-product-card__media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
           {product.thumbnail?.trim() ? (
-            <img
+            <Image
               src={product.thumbnail.trim()}
               alt={product.title || ""}
-              className="beauty-product-card__image w-full h-full object-cover"
+              fill
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+              className="beauty-product-card__image object-cover"
+              loading="lazy"
             />
           ) : (
             <div className="beauty-product-card__placeholder w-full h-full" />

package/src/default-product-card.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import Image from "next/image"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import { formatPrice } from "@pradip1995/segment-primitives/format-price"
 import type { HttpTypes } from "@medusajs/types"
@@ -44,10 +45,13 @@ export default function DefaultProductCard({
       <LocalizedLink href={`/products/${product.handle}`} className="product-card__link flex flex-col h-full">
         <div className="product-card__media relative aspect-[3/4] bg-surface-muted overflow-hidden rounded-lg">
           {product.thumbnail?.trim() ? (
-            <img
+            <Image
               src={product.thumbnail.trim()}
               alt={product.title || ""}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+              fill
+              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
+              loading="lazy"
             />
           ) : (
             <div className="w-full h-full bg-surface-muted" />

package/src/index.ts

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

package/src/jewelry-product-card.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import Image from "next/image"
+import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
+import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import type { HttpTypes } from "@medusajs/types"
+import ProductCardActions from "./product-card-actions"
+import { resolveProductCardImages } from "./resolve-product-images"
+
+type Props = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  countryCode?: string
+  wishlistProductIds?: string[]
+}
+
+export default function JewelryProductCard({
+  product,
+  region,
+  countryCode: countryCodeProp,
+  wishlistProductIds,
+}: Props) {
+  const variant = product.variants?.[0]
+  const price = variant?.calculated_price?.calculated_amount
+  const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
+  const countryCode =
+    countryCodeProp?.toLowerCase() ||
+    region?.countries?.[0]?.iso_2?.toLowerCase() ||
+    "in"
+
+  const { primary, hover } = resolveProductCardImages(product)
+
+  return (
+    <article
+      data-product-card-id={product.id}
+      className="jewelry-product-card group flex flex-col w-full h-full relative"
+    >
+      <LocalizedLink
+        href={`/products/${product.handle}`}
+        className="jewelry-product-card__link flex flex-col h-full"
+      >
+        <div
+          className={`jewelry-product-card__media relative aspect-square overflow-hidden rounded-2xl bg-[var(--color-surface-muted)]${
+            hover ? " jewelry-product-card__media--has-hover" : ""
+          }`}
+        >
+          {primary ? (
+            <>
+              <Image
+                src={primary}
+                alt={product.title || ""}
+                fill
+                sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                className="jewelry-product-card__image jewelry-product-card__image--primary"
+                loading="lazy"
+              />
+              {hover ? (
+                <Image
+                  src={hover}
+                  alt=""
+                  aria-hidden
+                  fill
+                  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
+                  className="jewelry-product-card__image jewelry-product-card__image--hover"
+                  loading="lazy"
+                />
+              ) : null}
+            </>
+          ) : (
+            <div className="jewelry-product-card__placeholder w-full h-full" />
+          )}
+
+          {product.id ? (
+            <ProductCardActions
+              product={product}
+              countryCode={countryCode}
+              wishlistProductIds={wishlistProductIds}
+            />
+          ) : null}
+        </div>
+
+        <div className="jewelry-product-card__body">
+          <h3 className="jewelry-product-card__title">{product.title}</h3>
+          {price != null ? (
+            <p className="jewelry-product-card__price">{formatPrice(price, currency)}</p>
+          ) : null}
+        </div>
+      </LocalizedLink>
+    </article>
+  )
+}

package/src/product-rail-variants.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import ProductCard from "./segment"
+import ProductCard, { type ProductCardVariant } from "./segment"
 import ProductScroll from "./product-scroll"
 import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
 import type { ProductRailVariant } from "@pradip1995/segment-primitives/section-variants"
@@ -30,11 +30,13 @@ function ProductRailGrid({
   region,
   countryCode,
   wishlistProductIds,
+  productCardVariant,
 }: {
   products: HttpTypes.StoreProduct[]
   region?: HttpTypes.StoreRegion
   countryCode?: string
   wishlistProductIds?: string[]
+  productCardVariant?: ProductCardVariant
 }) {
   return (
     <div className="product-rail__grid grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
@@ -44,6 +46,7 @@ function ProductRailGrid({
           product={p}
           region={region}
           countryCode={countryCode}
+          variant={productCardVariant}
           wishlistProductIds={wishlistProductIds}
         />
       ))}
@@ -56,11 +59,13 @@ function ProductRailFeatured({
   region,
   countryCode,
   wishlistProductIds,
+  productCardVariant,
 }: {
   products: HttpTypes.StoreProduct[]
   region?: HttpTypes.StoreRegion
   countryCode?: string
   wishlistProductIds?: string[]
+  productCardVariant?: ProductCardVariant
 }) {
   const [featured, ...rest] = products
   if (!featured) return null
@@ -72,6 +77,7 @@ function ProductRailFeatured({
           product={featured}
           region={region}
           countryCode={countryCode}
+          variant={productCardVariant}
           wishlistProductIds={wishlistProductIds}
         />
       </div>
@@ -82,6 +88,7 @@ function ProductRailFeatured({
             product={p}
             region={region}
             countryCode={countryCode}
+            variant={productCardVariant}
             wishlistProductIds={wishlistProductIds}
           />
         ))}
@@ -100,6 +107,7 @@ export function ProductRailByVariant({
   viewAllLink,
   href,
   wishlistProductIds,
+  productCardVariant,
 }: {
   variant: ProductRailVariant
   products: HttpTypes.StoreProduct[]
@@ -110,6 +118,7 @@ export function ProductRailByVariant({
   viewAllLink: string
   href?: string
   wishlistProductIds?: string[]
+  productCardVariant?: ProductCardVariant
 }) {
   return (
     <>
@@ -121,6 +130,7 @@ export function ProductRailByVariant({
           ratings={ratings}
           countryCode={countryCode}
           wishlistProductIds={wishlistProductIds}
+          productCardVariant={productCardVariant}
         />
       ) : variant === "featured" ? (
         <ProductRailFeatured
@@ -128,6 +138,7 @@ export function ProductRailByVariant({
           region={region}
           countryCode={countryCode}
           wishlistProductIds={wishlistProductIds}
+          productCardVariant={productCardVariant}
         />
       ) : (
         <ProductRailGrid
@@ -135,6 +146,7 @@ export function ProductRailByVariant({
           region={region}
           countryCode={countryCode}
           wishlistProductIds={wishlistProductIds}
+          productCardVariant={productCardVariant}
         />
       )}
     </>

package/src/product-scroll.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useRef } from "react"
-import ProductCard from "./segment"
+import ProductCard, { type ProductCardVariant } from "./segment"
 import type { HttpTypes } from "@medusajs/types"
 
 type ProductScrollProps = {
@@ -10,6 +10,7 @@ type ProductScrollProps = {
   ratings?: Array<{ product_id?: string; rating?: number }>
   countryCode?: string
   wishlistProductIds?: string[]
+  productCardVariant?: ProductCardVariant
 }
 
 export default function ProductScroll({
@@ -18,6 +19,7 @@ export default function ProductScroll({
   ratings,
   countryCode,
   wishlistProductIds,
+  productCardVariant,
 }: ProductScrollProps) {
   const viewportRef = useRef<HTMLDivElement>(null)
 
@@ -57,6 +59,7 @@ export default function ProductScroll({
                 product={product}
                 region={region ?? undefined}
                 countryCode={countryCode}
+                variant={productCardVariant}
                 rating={ratings?.find((r) => r.product_id === product.id)}
                 wishlistProductIds={wishlistProductIds}
               />

package/src/resolve-product-images.ts

@@ -0,0 +1,15 @@
+import type { HttpTypes } from "@medusajs/types"
+import { resolveMediaUrl } from "@pradip1995/segment-primitives/resolve-media-url"
+
+export function resolveProductCardImages(product: HttpTypes.StoreProduct) {
+  const images =
+    product.images
+      ?.map((image) => resolveMediaUrl(image.url))
+      .filter((url): url is string => !!url) ?? []
+
+  const thumbnail = resolveMediaUrl(product.thumbnail) || ""
+  const primary = thumbnail || images[0] || ""
+  const hover = images.find((url) => url && url !== primary) || ""
+
+  return { primary, hover }
+}

package/src/segment.css

@@ -223,3 +223,151 @@
     pointer-events: auto;
   }
 }
+
+/* Jewelry product card — H.Ankit / premium catalogue */
+
+.jewelry-product-card {
+  background: transparent;
+}
+
+.jewelry-product-card__link {
+  min-width: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+.jewelry-product-card__media {
+  position: relative;
+}
+
+.jewelry-product-card__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.4s ease;
+}
+
+.jewelry-product-card__image--hover {
+  opacity: 0;
+}
+
+.jewelry-product-card:hover .jewelry-product-card__image--hover {
+  opacity: 1;
+}
+
+.jewelry-product-card__media--has-hover:hover .jewelry-product-card__image--primary {
+  opacity: 0;
+}
+
+.jewelry-product-card__placeholder {
+  background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-surface-alt) 100%);
+}
+
+.jewelry-product-card .product-card__actions {
+  display: none;
+}
+
+.jewelry-product-card .product-card__quick-add-wrap {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+  opacity: 0;
+  transform: translateY(100%);
+  pointer-events: none;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.jewelry-product-card:hover .product-card__quick-add-wrap {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.jewelry-product-card .product-card__quick-add {
+  width: 100%;
+  border-radius: 0;
+  background: rgba(26, 26, 26, 0.88);
+  color: var(--color-text-inverse);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  min-height: 2.75rem;
+  backdrop-filter: blur(4px);
+}
+
+.jewelry-product-card .product-card__quick-add:hover:not(:disabled) {
+  background: var(--color-brand-primary);
+}
+
+.jewelry-product-card .product-card__quick-add-label {
+  font-size: 0;
+}
+
+.jewelry-product-card .product-card__quick-add-label::after {
+  content: "Add to cart";
+  font-size: 0.6875rem;
+}
+
+.jewelry-product-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.25rem 0;
+  text-align: center;
+  min-width: 0;
+}
+
+.jewelry-product-card__title {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--color-text-body);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  min-height: 2.5rem;
+}
+
+.jewelry-product-card__price {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--color-text-heading);
+}
+
+.product-grid .jewelry-product-card,
+.product-rail__grid .jewelry-product-card,
+.beauty-shop-grid__grid .jewelry-product-card {
+  height: 100%;
+}
+
+.product-scroll__slide:has(.jewelry-product-card) {
+  flex: 0 0 clamp(210px, 38vw, 280px);
+}
+
+@media (min-width: 768px) {
+  .product-scroll__slide:has(.jewelry-product-card) {
+    flex: 0 0 clamp(240px, 22vw, 280px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .jewelry-product-card__image,
+  .jewelry-product-card .product-card__quick-add-wrap {
+    transition: none;
+  }
+
+  .jewelry-product-card .product-card__quick-add-wrap {
+    opacity: 1;
+    transform: none;
+    pointer-events: auto;
+  }
+}

package/src/segment.tsx

@@ -4,8 +4,9 @@ import "./segment.css"
 import type { HttpTypes } from "@medusajs/types"
 import BeautyProductCard from "./beauty-product-card"
 import DefaultProductCard from "./default-product-card"
+import JewelryProductCard from "./jewelry-product-card"
 
-export type ProductCardVariant = "default" | "beauty"
+export type ProductCardVariant = "default" | "beauty" | "jewelry"
 
 type Props = {
   product: HttpTypes.StoreProduct
@@ -18,12 +19,13 @@ type Props = {
 }
 
 function resolveProductCardVariant(variant?: ProductCardVariant): ProductCardVariant {
-  if (variant === "beauty" || variant === "default") return variant
+  if (variant === "beauty" || variant === "default" || variant === "jewelry") return variant
   return "default"
 }
 
 export default function ProductCard({ variant, ...props }: Props) {
   const layout = resolveProductCardVariant(variant)
   if (layout === "beauty") return <BeautyProductCard {...props} />
+  if (layout === "jewelry") return <JewelryProductCard {...props} />
   return <DefaultProductCard {...props} />
 }