File size: 3,102 Bytes
4fdaf19 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import React, { useEffect, useRef } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
export interface SubView<T extends string = string> {
id: T;
label: string;
description: string;
}
interface SubViewSliderProps<T extends string = string> {
views: SubView<T>[];
activeView: T;
onViewChange: (view: T) => void;
}
const SubViewSlider = <T extends string>({ views, activeView, onViewChange }: SubViewSliderProps<T>) => {
const activeIndex = Math.max(0, views.findIndex((view) => view.id === activeView));
const activeRef = useRef<HTMLButtonElement | null>(null);
const move = (direction: -1 | 1) => {
const nextIndex = (activeIndex + direction + views.length) % views.length;
onViewChange(views[nextIndex].id);
};
// Keep the active card in view as the user pages through subviews.
useEffect(() => {
activeRef.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
}, [activeView]);
return (
<div className="sticky top-[53px] z-40 border-b border-gray-800 bg-black/85 backdrop-blur-xl">
<div className="mx-auto flex max-w-[1600px] items-center gap-3 px-4 py-3">
<button
aria-label="Previous view"
onClick={() => move(-1)}
className="rounded-full border border-gray-800 bg-gray-950 p-2 text-gray-300 transition hover:border-teal-500/50 hover:text-white"
>
<ChevronLeft size={16} />
</button>
<div className="flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1 scrollbar-thin">
{views.map((view, index) => {
const active = view.id === activeView;
return (
<button
key={view.id}
ref={active ? activeRef : undefined}
onClick={() => onViewChange(view.id)}
className={`min-w-[190px] rounded-2xl border px-4 py-3 text-left transition duration-fast ${
active
? 'border-teal-400 bg-teal-500/10 shadow-lg shadow-teal-950/40'
: 'border-gray-800 bg-gray-950/70 hover:border-gray-700 hover:bg-gray-900'
}`}
>
<div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.24em] text-gray-500">
<span>{String(index + 1).padStart(2, '0')}</span>
{active && <span className="rounded-full bg-teal-400/20 px-2 py-0.5 text-teal-300">Active</span>}
</div>
<div className="mt-1 text-sm font-bold text-white">{view.label}</div>
<div className="mt-1 line-clamp-2 text-xs text-gray-500">{view.description}</div>
</button>
);
})}
</div>
<button
aria-label="Next view"
onClick={() => move(1)}
className="rounded-full border border-gray-800 bg-gray-950 p-2 text-gray-300 transition hover:border-teal-500/50 hover:text-white"
>
<ChevronRight size={16} />
</button>
</div>
</div>
);
};
export default SubViewSlider;
|