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 viewportRef = useRef<HTMLDivElement>(null);
const segmentRef = useRef<HTMLDivElement>(null);
@@ -103,7 +107,7 @@ function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
}
const measure = () => {
const nextSegmentWidth = segment.scrollWidth;
const nextSegmentWidth = segment.getBoundingClientRect().width;
const viewportWidth = viewport.clientWidth;
if (!nextSegmentWidth || !viewportWidth) {
@@ -149,7 +153,11 @@ function MarqueeRowTrack({ items, direction, duration = 24 }: MarqueeRow) {
});
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
dir="ltr"
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}
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}
dir="ltr"
>
{items.map((item, itemIndex) => (
<div
key={`${copyIndex}-${item}`}
className="flex shrink-0 items-center gap-3 sm:gap-4 lg:gap-5"
dir="ltr"
>
<span
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",
)}
>
{item}
</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"
>
/
@@ -197,6 +207,7 @@ export function StackedMarqueeSection({
return (
<section
aria-label="Technology marquee"
dir="ltr"
className={cn(
"relative isolate overflow-hidden bg-transparent py-3 sm:py-4 lg:py-5",
className,
@@ -204,7 +215,7 @@ export function StackedMarqueeSection({
>
<div className="relative flex flex-col gap-0 sm:gap-0 lg:gap-0">
{rows.map((row, index) => (
<div key={`${row.direction}-${index}`}>
<div key={`${row.direction}-${index}`} dir="ltr" className="w-full">
<MarqueeRowTrack
items={row.items}
direction={row.direction}