mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Fix marquee RTL rendering and add subtle shadow

Browse Source
This commit is contained in:
MOH
2026-03-10 20:18:37 +01:00
parent 814447ae5d
commit 2b7914fc9a
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/stacked-marquee-section.tsx
+17 -6
View File
@@ -85,7 +85,11 @@ const DEFAULT_ROWS: MarqueeRow[] = [
}, },
]; ];
function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) { function MarqueeRowTrack({
items,
direction,
duration = 24,
}: MarqueeRow) {
const shouldReduceMotion = useReducedMotion(); const shouldReduceMotion = useReducedMotion();
const viewportRef = useRef<HTMLDivElement>(null); const viewportRef = useRef<HTMLDivElement>(null);
const segmentRef = useRef<HTMLDivElement>(null); const segmentRef = useRef<HTMLDivElement>(null);
@@ -103,7 +107,7 @@ function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
} }
const measure = () => { const measure = () => {
const nextSegmentWidth = segment.scrollWidth; const nextSegmentWidth = segment.getBoundingClientRect().width;
const viewportWidth = viewport.clientWidth; const viewportWidth = viewport.clientWidth;
if (!nextSegmentWidth || !viewportWidth) { if (!nextSegmentWidth || !viewportWidth) {
@@ -149,7 +153,11 @@ function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
}); });
return ( return (
<div ref={viewportRef} className="overflow-hidden leading-[0.92]"> <div
ref={viewportRef}
dir="ltr"
className="w-full overflow-hidden font-latin leading-[0.92]"
>
<motion.div <motion.div
dir="ltr" dir="ltr"
className={cn("flex w-max flex-nowrap", !isReady && "opacity-0")} className={cn("flex w-max flex-nowrap", !isReady && "opacity-0")}
@@ -161,22 +169,24 @@ function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
ref={copyIndex === 0 ? segmentRef : undefined} ref={copyIndex === 0 ? segmentRef : undefined}
className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5" className="flex shrink-0 items-center gap-3 pr-3 sm:gap-4 sm:pr-4 lg:gap-5 lg:pr-5"
aria-hidden={copyIndex > 0} aria-hidden={copyIndex > 0}
dir="ltr"
> >
{items.map((item, itemIndex) => ( {items.map((item, itemIndex) => (
<div <div
key={`${copyIndex}-${item}`} key={`${copyIndex}-${item}`}
className="flex shrink-0 items-center gap-3 sm:gap-4 lg:gap-5" className="flex shrink-0 items-center gap-3 sm:gap-4 lg:gap-5"
dir="ltr"
> >
<span <span
className={cn( className={cn(
"shrink-0 whitespace-nowrap text-[clamp(2.05rem,6vw,4.8rem)] uppercase leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]", "shrink-0 whitespace-nowrap text-[clamp(2.05rem,6vw,4.8rem)] uppercase leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:0_1px_2px_hsl(222_24%_10%_/_0.06)]",
itemIndex % 2 === 0 ? "font-black" : "font-light", itemIndex % 2 === 0 ? "font-black" : "font-light",
)} )}
> >
{item} {item}
</span> </span>
<span <span
className="text-[clamp(1.85rem,5vw,4rem)] font-light leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:none]" className="text-[clamp(1.85rem,5vw,4rem)] font-light leading-[0.92] tracking-[-0.01em] text-[hsl(var(--surface-3))] dark:text-[hsl(var(--surface-3))] [text-shadow:0_1px_2px_hsl(222_24%_10%_/_0.05)]"
aria-hidden="true" aria-hidden="true"
> >
/ /
@@ -197,6 +207,7 @@ export function StackedMarqueeSection({
return ( return (
<section <section
aria-label="Technology marquee" aria-label="Technology marquee"
dir="ltr"
className={cn( className={cn(
"relative isolate overflow-hidden bg-transparent py-3 sm:py-4 lg:py-5", "relative isolate overflow-hidden bg-transparent py-3 sm:py-4 lg:py-5",
className, className,
@@ -204,7 +215,7 @@ export function StackedMarqueeSection({
> >
<div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0"> <div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
{rows.map((row, index) => ( {rows.map((row, index) => (
<div key={`${row.direction}-${index}`}> <div key={`${row.direction}-${index}`} dir="ltr" className="w-full">
<MarqueeRowTrack <MarqueeRowTrack
items={row.items} items={row.items}
direction={row.direction} direction={row.direction}