Alireza HassaniandCursor
458475abe6
Keep backdrop-filter inline, portal outside overflow-clipped app chrome, and avoid transform centering. Co-authored-by: Cursor <cursoragent@cursor.com>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { createPortal } from 'react-dom'
|
|
import { Link } from 'react-router-dom'
|
|
import './CategoriesDock.css'
|
|
|
|
/**
|
|
* Fixed glossy dock — images and labels are hardcoded.
|
|
* Slugs match production API categories on shirinibalout.com.
|
|
* Portaled to document.body so backdrop-filter is not killed by
|
|
* overflow-x: hidden / transform on .app ancestors.
|
|
*/
|
|
const DOCK_CATEGORIES = [
|
|
{
|
|
nameFa: 'کیک',
|
|
nameEn: 'Cake',
|
|
image: '/categories/Cake.png',
|
|
slug: 'cake',
|
|
},
|
|
{
|
|
nameFa: 'شیرینی',
|
|
nameEn: 'Pastry',
|
|
image: '/categories/pastry.png',
|
|
slug: 'pastry',
|
|
},
|
|
{
|
|
nameFa: 'سوهان',
|
|
nameEn: 'Sohan',
|
|
image: '/categories/sohan.png',
|
|
slug: 'sohan',
|
|
},
|
|
{
|
|
nameFa: 'دسر',
|
|
nameEn: 'Dessert',
|
|
image: '/categories/desert.png',
|
|
slug: 'dessert',
|
|
},
|
|
{
|
|
nameFa: 'شکلات',
|
|
nameEn: 'Chocolate',
|
|
image: '/categories/Choclate.png',
|
|
slug: 'choclate',
|
|
},
|
|
{
|
|
nameFa: 'باقلوا',
|
|
nameEn: 'Baklava',
|
|
image: '/categories/baghlava.png',
|
|
slug: 'baklava-and-halva',
|
|
},
|
|
] as const
|
|
|
|
export default function CategoriesDock() {
|
|
return createPortal(
|
|
<nav className="categories-dock" aria-label="دستهبندی محصولات">
|
|
<div
|
|
className="categories-dock__glass"
|
|
aria-hidden="true"
|
|
style={{
|
|
// Inline so Vite/LightningCSS cannot drop the unprefixed property.
|
|
backdropFilter: 'blur(20px) saturate(170%)',
|
|
WebkitBackdropFilter: 'blur(20px) saturate(170%)',
|
|
}}
|
|
/>
|
|
<ul className="categories-dock__list">
|
|
{DOCK_CATEGORIES.map((category) => (
|
|
<li key={category.slug} className="categories-dock__item">
|
|
<Link
|
|
to={`/products/${category.slug}`}
|
|
className="categories-dock__link"
|
|
>
|
|
<span className="categories-dock__image-wrap">
|
|
<img src={category.image} alt="" className="categories-dock__image" />
|
|
</span>
|
|
<span className="categories-dock__names">
|
|
<span className="categories-dock__name-fa">{category.nameFa}</span>
|
|
<span className="categories-dock__name-en">{category.nameEn}</span>
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>,
|
|
document.body,
|
|
)
|
|
}
|