frontend-shopify/nextjs-shopify-pdp
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update design

Browse Source
This commit is contained in:
Rami Bitar
2026-06-10 13:47:50 -04:00
parent b5a79b6475
commit b212250da0
96 changed files with 7486 additions and 6441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
components/ui/scroll-area.tsx
View File

@@ -1,240 +1,57 @@
"use client"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import { cn } from "@/lib/utils"
interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "vertical" | "horizontal" | "both"
}
function ScrollArea({
className,
children,
orientation = "vertical",
...props
}: ScrollAreaProps) {
const viewportRef = React.useRef<HTMLDivElement>(null)
const [showVerticalScrollbar, setShowVerticalScrollbar] = React.useState(false)
const [showHorizontalScrollbar, setShowHorizontalScrollbar] = React.useState(false)
const [scrollTop, setScrollTop] = React.useState(0)
const [scrollLeft, setScrollLeft] = React.useState(0)
const [viewportHeight, setViewportHeight] = React.useState(0)
const [viewportWidth, setViewportWidth] = React.useState(0)
const [contentHeight, setContentHeight] = React.useState(0)
const [contentWidth, setContentWidth] = React.useState(0)
React.useEffect(() => {
const viewport = viewportRef.current
if (!viewport) return
const updateScrollInfo = () => {
const hasVerticalScroll = viewport.scrollHeight > viewport.clientHeight
const hasHorizontalScroll = viewport.scrollWidth > viewport.clientWidth
setShowVerticalScrollbar(
hasVerticalScroll && (orientation === "vertical" || orientation === "both")
)
setShowHorizontalScrollbar(
hasHorizontalScroll && (orientation === "horizontal" || orientation === "both")
)
setViewportHeight(viewport.clientHeight)
setViewportWidth(viewport.clientWidth)
setContentHeight(viewport.scrollHeight)
setContentWidth(viewport.scrollWidth)
}
const handleScroll = () => {
setScrollTop(viewport.scrollTop)
setScrollLeft(viewport.scrollLeft)
}
updateScrollInfo()
viewport.addEventListener("scroll", handleScroll)
const resizeObserver = new ResizeObserver(updateScrollInfo)
resizeObserver.observe(viewport)
// Also observe children for content changes
const mutationObserver = new MutationObserver(updateScrollInfo)
mutationObserver.observe(viewport, { childList: true, subtree: true })
return () => {
viewport.removeEventListener("scroll", handleScroll)
resizeObserver.disconnect()
mutationObserver.disconnect()
}
}, [orientation])
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
return (
<div
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative overflow-hidden", className)}
className={cn("relative", className)}
{...props}
>
<div
ref={viewportRef}
<ScrollAreaPrimitive.Viewport
data-slot="scroll-area-viewport"
className={cn(
"size-full rounded-[inherit] outline-none",
"focus-visible:ring-ring/50 transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
orientation === "both" && "overflow-auto"
)}
tabIndex={0}
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
>
{children}
</div>
{showVerticalScrollbar && (
<ScrollBar
orientation="vertical"
viewportRef={viewportRef}
scrollPosition={scrollTop}
viewportSize={viewportHeight}
contentSize={contentHeight}
/>
)}
{showHorizontalScrollbar && (
<ScrollBar
orientation="horizontal"
viewportRef={viewportRef}
scrollPosition={scrollLeft}
viewportSize={viewportWidth}
contentSize={contentWidth}
/>
)}
</div>
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
)
}
interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
orientation?: "vertical" | "horizontal"
viewportRef?: React.RefObject<HTMLDivElement | null>
scrollPosition?: number
viewportSize?: number
contentSize?: number
}
function ScrollBar({
className,
orientation = "vertical",
viewportRef,
scrollPosition = 0,
viewportSize = 0,
contentSize = 0,
...props
}: ScrollBarProps) {
const [isDragging, setIsDragging] = React.useState(false)
const [isHovered, setIsHovered] = React.useState(false)
const scrollbarRef = React.useRef<HTMLDivElement>(null)
const startPosRef = React.useRef(0)
const startScrollRef = React.useRef(0)
const thumbSize =
contentSize > 0 ? Math.max((viewportSize / contentSize) * 100, 10) : 0
const thumbPosition =
contentSize > viewportSize
? (scrollPosition / (contentSize - viewportSize)) * (100 - thumbSize)
: 0
const handleThumbMouseDown = (e: React.MouseEvent) => {
e.preventDefault()
setIsDragging(true)
startPosRef.current = orientation === "vertical" ? e.clientY : e.clientX
startScrollRef.current = scrollPosition
}
React.useEffect(() => {
if (!isDragging) return
const handleMouseMove = (e: MouseEvent) => {
const viewport = viewportRef?.current
const scrollbar = scrollbarRef.current
if (!viewport || !scrollbar) return
const currentPos = orientation === "vertical" ? e.clientY : e.clientX
const delta = currentPos - startPosRef.current
const scrollbarSize =
orientation === "vertical"
? scrollbar.clientHeight
: scrollbar.clientWidth
const scrollRatio = (contentSize - viewportSize) / (scrollbarSize * (1 - thumbSize / 100))
const newScrollPos = startScrollRef.current + delta * scrollRatio
if (orientation === "vertical") {
viewport.scrollTop = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
} else {
viewport.scrollLeft = Math.max(0, Math.min(newScrollPos, contentSize - viewportSize))
}
}
const handleMouseUp = () => {
setIsDragging(false)
}
document.addEventListener("mousemove", handleMouseMove)
document.addEventListener("mouseup", handleMouseUp)
return () => {
document.removeEventListener("mousemove", handleMouseMove)
document.removeEventListener("mouseup", handleMouseUp)
}
}, [isDragging, orientation, viewportRef, contentSize, viewportSize, thumbSize])
const handleTrackClick = (e: React.MouseEvent) => {
const viewport = viewportRef?.current
const scrollbar = scrollbarRef.current
if (!viewport || !scrollbar || e.target !== scrollbar) return
const rect = scrollbar.getBoundingClientRect()
const clickPos =
orientation === "vertical" ? e.clientY - rect.top : e.clientX - rect.left
const scrollbarSize = orientation === "vertical" ? rect.height : rect.width
const clickRatio = clickPos / scrollbarSize
const targetScroll = clickRatio * contentSize - viewportSize / 2
if (orientation === "vertical") {
viewport.scrollTop = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
} else {
viewport.scrollLeft = Math.max(0, Math.min(targetScroll, contentSize - viewportSize))
}
}
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
return (
<div
ref={scrollbarRef}
<ScrollAreaPrimitive.ScrollAreaScrollbar
data-slot="scroll-area-scrollbar"
data-orientation={orientation}
orientation={orientation}
className={cn(
"absolute flex touch-none p-px transition-opacity select-none",
orientation === "vertical" && "right-0 top-0 h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col border-t border-t-transparent",
!isHovered && !isDragging && "opacity-0",
(isHovered || isDragging) && "opacity-100",
"flex touch-none p-px transition-colors select-none",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent",
className
)}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onClick={handleTrackClick}
{...props}
>
<div
<ScrollAreaPrimitive.ScrollAreaThumb
data-slot="scroll-area-thumb"
className={cn(
"bg-border relative rounded-full transition-colors",
orientation === "vertical" && "w-full",
orientation === "horizontal" && "h-full",
isDragging && "bg-foreground/50"
)}
style={{
[orientation === "vertical" ? "height" : "width"]: `${thumbSize}%`,
[orientation === "vertical" ? "top" : "left"]: `${thumbPosition}%`,
position: "absolute",
}}
onMouseDown={handleThumbMouseDown}
className="bg-border relative flex-1 rounded-full"
/>
</div>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
)
}