CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix featured grid

Browse Source
This commit is contained in:
adilallo
2026-05-22 13:50:55 -06:00
parent 3dbb6b61d2
commit 5863a256f6
23 changed files with 243 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/cards/Mini/Mini.view.tsx
+36 -15
View File
@@ -2,6 +2,7 @@
import { memo } from "react";
import Image from "next/image";
import { SVG_GRAIN_MULTIPLY_FILTER } from "../../../../lib/svgGrainFilter";
import type { MiniViewProps } from "./Mini.types";
function MiniView({
@@ -15,39 +16,59 @@ function MiniView({
computedAriaLabel,
wrapperElement,
wrapperProps,
featureGridShell = false,
panelWidth,
panelHeight,
panelImageClassName,
}: MiniViewProps) {
const defaultPanelSize = featureGridShell ? 48 : 58;
const imageWidth = panelWidth ?? defaultPanelSize;
const imageHeight = panelHeight ?? defaultPanelSize;
const outerClass = featureGridShell
? `flex min-h-[159px] flex-col gap-[7px] ${className}`
: `h-[186px] flex flex-col gap-[7px] ${className}`;
const panelClass = featureGridShell
? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
: `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`;
const imageClass = featureGridShell
? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`
: "max-w-[58px] max-h-[58px] w-auto h-auto object-contain";
const cardContentElement = (
<div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
{/* Top part - Inner panel */}
<div
className={`flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`}
>
{/* Content for the inner panel */}
<div className={outerClass}>
<div className={panelClass}>
{panelContent && (
<div className="flex items-center justify-center w-full h-full">
<div className="flex h-full w-full items-center justify-center">
<Image
src={panelContent}
alt={computedAriaLabel}
className="max-w-[58px] max-h-[58px] w-auto h-auto object-contain"
width={58}
height={58}
className={imageClass}
width={imageWidth}
height={imageHeight}
sizes="(max-width: 768px) 50vw, 25vw"
loading="lazy"
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
style={
featureGridShell
? {
filter: SVG_GRAIN_MULTIPLY_FILTER,
WebkitFilter: SVG_GRAIN_MULTIPLY_FILTER,
}
: undefined
}
/>
</div>
)}
{children}
</div>
{/* Bottom part - Text container */}
<div className="font-inter font-medium text-[12px] leading-[14px] text-center text-[var(--color-content-default-primary)]">
<div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]">
{labelLine1 && labelLine2 ? (
<>
<div>{labelLine1}</div>
<div>{labelLine2}</div>
<div>&nbsp;</div>
</>
) : (
label