123 lines
4.2 KiB
TypeScript
123 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
interface Spec {
|
|
key: string;
|
|
val: string;
|
|
isOrange?: boolean;
|
|
}
|
|
|
|
interface StainingServiceSectionProps {
|
|
id: string;
|
|
serviceNum: string;
|
|
title: string;
|
|
tagline: string;
|
|
description: string;
|
|
specsTitle1: string;
|
|
specs1: Spec[];
|
|
specsTitle2: string;
|
|
specs2: Spec[];
|
|
bgColor: 'bg-white' | 'bg-gray' | 'bg-navy' | 'bg-cream';
|
|
reverse?: boolean;
|
|
photoLabel: string;
|
|
photoSub1: string;
|
|
photoSub2: string;
|
|
isDark?: boolean;
|
|
image?: string;
|
|
extraInfo?: {
|
|
title: string;
|
|
desc: string;
|
|
};
|
|
}
|
|
|
|
export default function StainingServiceSection({
|
|
id,
|
|
serviceNum,
|
|
title,
|
|
tagline,
|
|
description,
|
|
specsTitle1,
|
|
specs1,
|
|
specsTitle2,
|
|
specs2,
|
|
bgColor,
|
|
reverse = false,
|
|
photoLabel,
|
|
photoSub1,
|
|
photoSub2,
|
|
isDark = false,
|
|
image,
|
|
extraInfo
|
|
}: StainingServiceSectionProps) {
|
|
const PhotoIcon = ({ size = 48, color = "#B0ADA6" }) => (
|
|
<svg className="photo-icon" width={size} height={size} viewBox="0 0 48 48" fill="none">
|
|
<rect x="4" y="10" width="40" height="30" rx="4" stroke={color} strokeWidth="2" />
|
|
<circle cx="17" cy="22" r="5" stroke={color} strokeWidth="2" />
|
|
<path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke={color} strokeWidth="2" fill="none" />
|
|
</svg>
|
|
);
|
|
|
|
return (
|
|
<section className={`model-section ${bgColor}`} id={id}>
|
|
<div className={`model-layout reveal ${reverse ? 'reverse' : ''}`}>
|
|
<div>
|
|
<div className="model-accent-strip"></div>
|
|
<div className={`model-label ${isDark ? 'dim' : ''}`}>Service {serviceNum}</div>
|
|
<div className={`model-name ${isDark ? 'white' : ''}`} dangerouslySetInnerHTML={{ __html: title }}></div>
|
|
<div className="model-tagline">{tagline}</div>
|
|
<p className={`model-desc ${isDark ? 'white' : ''}`}>{description}</p>
|
|
|
|
<div className="specs-block">
|
|
<div className={`specs-title ${isDark ? 'white' : ''}`}>{specsTitle1}</div>
|
|
{specs1.map((spec, i) => (
|
|
<div key={i} className={`spec-row ${isDark ? 'white-row' : ''}`}>
|
|
<span className={`spec-key ${isDark ? 'white' : ''}`}>{spec.key}</span>
|
|
<span className={`spec-val ${isDark ? 'white' : ''} ${spec.isOrange ? 'orange' : ''}`}>{spec.val}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="specs-block">
|
|
<div className={`specs-title ${isDark ? 'white' : ''}`}>{specsTitle2}</div>
|
|
{specs2.map((spec, i) => (
|
|
<div key={i} className={`spec-row ${isDark ? 'white-row' : ''}`}>
|
|
<span className={`spec-key ${isDark ? 'white' : ''}`}>{spec.key}</span>
|
|
<span className={`spec-val ${isDark ? 'white' : ''} ${spec.isOrange ? 'orange' : ''}`}>{spec.val}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{extraInfo && (
|
|
<div className="model-extra-info">
|
|
<div className="model-extra-info-title">{extraInfo.title}</div>
|
|
<div className={`model-extra-info-desc ${isDark ? 'dark' : 'light'}`}>{extraInfo.desc}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className={`photo-area photo-area-large ${isDark ? 'dark-placeholder' : ''}`}>
|
|
{image ? (
|
|
<img src={image} alt={photoLabel} />
|
|
) : (
|
|
<>
|
|
<PhotoIcon color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
|
|
<div className="photo-label">{photoLabel}</div>
|
|
<div className="photo-sub">Upload project photo here</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="photo-row-grid">
|
|
<div className={`photo-area photo-area-small ${isDark ? 'dark-placeholder' : ''}`}>
|
|
<PhotoIcon size={32} color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
|
|
<div className="photo-sub photo-sub-small">{photoSub1}</div>
|
|
</div>
|
|
<div className={`photo-area photo-area-small ${isDark ? 'dark-placeholder' : ''}`}>
|
|
<PhotoIcon size={32} color={isDark ? "rgba(255,255,255,.35)" : "#B0ADA6"} />
|
|
<div className="photo-sub photo-sub-small">{photoSub2}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|