Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show product category as an eyebrow label on product cards

Browse Source 
Same treatment as the blog cards' category line (Blog.tsx) — small
uppercase text-muted line above the product name, applied
consistently across all three card grids (shop, Merkliste, cart's
related products). Omitted entirely for an uncategorized product
rather than showing an empty line.
This commit is contained in:
Marco
2026-08-01 08:36:53 +00:00
parent 83de7df089
commit cc17311d03
3 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/cart/components/RelatedProducts.tsx
+13 -6
View File
@@ -177,12 +177,19 @@ export function RelatedProducts({ defaultTaxRate, kleinunternehmer }: { defaultT
)}
</div>
<div className="flex flex-col gap-4 items-start px-5 pb-5 pt-2 w-full flex-1">
<p
className="font-semibold text-h4 text-text-primary w-full"
style={{ fontFamily: "var(--font-lora)" }}
>
{product.name}
</p>
<div className="flex flex-col gap-1 items-start w-full">
{/* Same eyebrow treatment as ProductGrid.tsx/Blog.tsx's
category line — omitted for an uncategorized product. */}
{product.categories.length > 0 && (
<p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
)}
<p
className="font-semibold text-h4 text-text-primary w-full"
style={{ fontFamily: "var(--font-lora)" }}
>
{product.name}
</p>
</div>
<p className="flex items-baseline gap-1.5">
{discount !== null && (
<span className="text-label text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</span>
app/konto/merkliste/components/MerklisteGrid.tsx
+10 -3
View File
@@ -76,9 +76,16 @@ export function MerklisteGrid({
<WishlistButton productId={product.numericId} className="absolute top-3 right-3" />
</div>
<div className="flex flex-col gap-4 items-start px-5 pb-5 pt-4 w-full flex-1">
<p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
{product.name}
</p>
<div className="flex flex-col gap-1 items-start w-full">
{/* Same eyebrow treatment as ProductGrid.tsx/Blog.tsx's
category line — omitted for an uncategorized product. */}
{product.categories.length > 0 && (
<p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
)}
<p className="font-semibold text-h4 text-text-primary w-full" style={{ fontFamily: "var(--font-lora)" }}>
{product.name}
</p>
</div>
<div className="flex flex-col gap-1 items-start">
<p className="flex items-baseline gap-1.5">
{discount !== null && (
app/shop/components/ProductGrid.tsx
+14 -6
View File
@@ -166,12 +166,20 @@ export async function ProductGrid({
)}
</div>
<div className="flex flex-col gap-4 items-start px-5 pb-5 pt-4 w-full flex-1">
<p
className="font-semibold text-h4 text-text-primary w-full"
style={{ fontFamily: "var(--font-lora)" }}
>
{product.name}
</p>
<div className="flex flex-col gap-1 items-start w-full">
{/* Same eyebrow treatment as the blog cards' category line
(Blog.tsx) — omitted entirely for an uncategorized
product rather than showing an empty line. */}
{product.categories.length > 0 && (
<p className="text-label font-semibold text-text-muted uppercase tracking-wide">{product.categories.join(", ")}</p>
)}
<p
className="font-semibold text-h4 text-text-primary w-full"
style={{ fontFamily: "var(--font-lora)" }}
>
{product.name}
</p>
</div>
<div className="flex flex-col gap-1 items-start">
<p className="flex items-baseline gap-1.5">
{discount !== null && (