95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import React from "react";
|
||
|
||
interface Breadcrumb {
|
||
label: string;
|
||
href?: string;
|
||
}
|
||
|
||
interface CatalogInfoHeaderProps {
|
||
title: string;
|
||
count?: number;
|
||
productName?: string;
|
||
breadcrumbs?: Breadcrumb[];
|
||
showCount?: boolean;
|
||
showProductHelp?: boolean;
|
||
}
|
||
|
||
const CatalogInfoHeader: React.FC<CatalogInfoHeaderProps> = ({
|
||
title,
|
||
count,
|
||
productName,
|
||
breadcrumbs,
|
||
showCount = false,
|
||
showProductHelp = false,
|
||
}) => (
|
||
<section className="section-info">
|
||
<div className="w-layout-blockcontainer container info w-container">
|
||
<div className="w-layout-vflex flex-block-9">
|
||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||
<div
|
||
className="w-layout-hflex flex-block-7"
|
||
itemScope
|
||
itemType="https://schema.org/BreadcrumbList"
|
||
>
|
||
{breadcrumbs.map((bc, idx) => (
|
||
<React.Fragment key={idx}>
|
||
{idx > 0 && <div className="text-block-3">→</div>}
|
||
{bc.href ? (
|
||
<a
|
||
href={bc.href}
|
||
className="link-block w-inline-block"
|
||
itemProp="itemListElement"
|
||
itemScope
|
||
itemType="https://schema.org/ListItem"
|
||
>
|
||
<div itemProp="name">{bc.label}</div>
|
||
<meta itemProp="position" content={String(idx + 1)} />
|
||
<meta itemProp="item" content={bc.href} />
|
||
</a>
|
||
) : (
|
||
<span
|
||
className="link-block-2 w-inline-block"
|
||
itemProp="itemListElement"
|
||
itemScope
|
||
itemType="https://schema.org/ListItem"
|
||
>
|
||
<div itemProp="name">{bc.label}</div>
|
||
<meta itemProp="position" content={String(idx + 1)} />
|
||
</span>
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
)}
|
||
<div className="w-layout-hflex flex-block-8">
|
||
<div className="w-layout-hflex flex-block-10">
|
||
<h1 className="heading">{title}</h1>
|
||
{showCount && (
|
||
<div className="text-block-4">
|
||
{typeof count === 'number' ? (
|
||
`Найдено ${count} товаров`
|
||
) : (
|
||
<span className="flex items-center gap-2">
|
||
Подсчитываем товары...
|
||
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
{showProductHelp && productName && (
|
||
<div className="w-layout-hflex flex-block-11">
|
||
<img src="/images/qwestions.svg" loading="lazy" alt="" className="image-4" />
|
||
<div className="text-block-5">Как правильно выбрать {productName}?</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
|
||
export default CatalogInfoHeader;
|