71 lines
2.6 KiB
TypeScript
71 lines
2.6 KiB
TypeScript
import type { SceneTheme } from '@/entities/scene';
|
|
import { getSceneCardBackgroundStyle, type SceneAssetMap } from '@/entities/media';
|
|
import { copy } from '@/shared/i18n';
|
|
import { cn } from '@/shared/lib/cn';
|
|
import { useDragScroll } from '@/shared/lib/useDragScroll';
|
|
|
|
interface SceneSelectCarouselProps {
|
|
scenes: SceneTheme[];
|
|
selectedSceneId: string;
|
|
sceneAssetMap?: SceneAssetMap;
|
|
onSelect: (sceneId: string) => void;
|
|
}
|
|
|
|
export const SceneSelectCarousel = ({
|
|
scenes,
|
|
selectedSceneId,
|
|
sceneAssetMap,
|
|
onSelect,
|
|
}: SceneSelectCarouselProps) => {
|
|
const { containerRef, events, isDragging, shouldSuppressClick } = useDragScroll();
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
{...events}
|
|
className={cn(
|
|
"-mx-1 overflow-x-auto px-1 pb-1 scrollbar-none",
|
|
isDragging ? "cursor-grabbing" : "cursor-grab"
|
|
)}
|
|
>
|
|
<div className="flex min-w-full gap-2.5">
|
|
{scenes.map((scene) => {
|
|
const selected = scene.id === selectedSceneId;
|
|
|
|
return (
|
|
<button
|
|
key={scene.id}
|
|
type="button"
|
|
onClick={() => {
|
|
if (!shouldSuppressClick) {
|
|
onSelect(scene.id);
|
|
}
|
|
}}
|
|
className={cn(
|
|
'group relative h-24 min-w-[138px] overflow-hidden rounded-xl border text-left sm:min-w-[148px]',
|
|
selected
|
|
? 'border-sky-200/38 shadow-[0_0_0_1px_rgba(186,230,253,0.2),0_0_10px_rgba(56,189,248,0.12)]'
|
|
: 'border-white/16 hover:border-white/24',
|
|
isDragging && 'pointer-events-none'
|
|
)}
|
|
style={getSceneCardBackgroundStyle(scene, sceneAssetMap?.[scene.id])}
|
|
aria-label={`${scene.name} ${copy.common.select}`}
|
|
>
|
|
<span className="absolute inset-x-0 bottom-0 h-[56%] bg-[linear-gradient(180deg,rgba(2,6,23,0)_0%,rgba(2,6,23,0.2)_52%,rgba(2,6,23,0.24)_100%)]" />
|
|
{selected ? (
|
|
<span className="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded-full border border-sky-200/64 bg-sky-200/24 text-[10px] font-semibold text-sky-50">
|
|
✓
|
|
</span>
|
|
) : null}
|
|
<div className="absolute inset-x-2 bottom-2">
|
|
<p className="truncate text-sm font-semibold text-white/96">{scene.name}</p>
|
|
<p className="truncate text-[11px] text-white/66">{scene.vibeLabel}</p>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|