|
|
|
|
@@ -123,20 +123,27 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="relative z-10">
|
|
|
|
|
<div className="container relative z-10">
|
|
|
|
|
<div className="absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-neutral-dark to-transparent z-20 md:hidden pointer-events-none" />
|
|
|
|
|
<div
|
|
|
|
|
ref={containerRef}
|
|
|
|
|
onMouseDown={onMouseDown}
|
|
|
|
|
onMouseLeave={onMouseLeave}
|
|
|
|
|
onMouseUp={onMouseUp}
|
|
|
|
|
onMouseMove={onMouseMove}
|
|
|
|
|
className={`select-none flex overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
|
|
|
|
|
>
|
|
|
|
|
{/* Robust Left Spacer for Pixel-Perfect Alignment */}
|
|
|
|
|
<div style={{ minWidth: paddingX }} className="flex-shrink-0 pointer-events-none" aria-hidden="true" />
|
|
|
|
|
|
|
|
|
|
{references.map((ref, i) => {
|
|
|
|
|
|
|
|
|
|
{/* Pure CSS Full-Bleed Alignment Container */}
|
|
|
|
|
<div style={{ '--offset': 'calc(50vw - 50%)' } as React.CSSProperties}>
|
|
|
|
|
<div
|
|
|
|
|
ref={containerRef}
|
|
|
|
|
onMouseDown={onMouseDown}
|
|
|
|
|
onMouseLeave={onMouseLeave}
|
|
|
|
|
onMouseUp={onMouseUp}
|
|
|
|
|
onMouseMove={onMouseMove}
|
|
|
|
|
style={{
|
|
|
|
|
marginLeft: 'calc(-1 * var(--offset))',
|
|
|
|
|
marginRight: 'calc(-1 * var(--offset))',
|
|
|
|
|
paddingLeft: 'var(--offset)',
|
|
|
|
|
paddingRight: 'var(--offset)',
|
|
|
|
|
scrollPaddingLeft: 'var(--offset)',
|
|
|
|
|
}}
|
|
|
|
|
className={`select-none flex overflow-x-auto pb-8 pt-4 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`}
|
|
|
|
|
>
|
|
|
|
|
{references.map((ref, i) => {
|
|
|
|
|
const imgSrc = ref.image
|
|
|
|
|
? (typeof ref.image === 'string' ? ref.image : ref.image.url)
|
|
|
|
|
: fallbacks[i % fallbacks.length];
|
|
|
|
|
|