forked from 77media/video-flow
57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
import FloatingGlassPanel from './FloatingGlassPanel';
|
|
import { ImageWave } from '@/components/ui/ImageWave';
|
|
|
|
const imageUrls = [
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
|
|
'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
|
|
];
|
|
|
|
export function CharacterLibrarySelector({
|
|
isReplaceLibraryOpen,
|
|
setIsReplaceLibraryOpen,
|
|
onSelect,
|
|
}: {
|
|
isReplaceLibraryOpen: boolean;
|
|
setIsReplaceLibraryOpen: (open: boolean) => void;
|
|
onSelect: (index: number) => void;
|
|
}) {
|
|
return (
|
|
<FloatingGlassPanel
|
|
open={isReplaceLibraryOpen}
|
|
width='90vw'
|
|
panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
|
|
onClose={() => setIsReplaceLibraryOpen(false)}
|
|
>
|
|
{/* 内容 */}
|
|
<ImageWave
|
|
images={imageUrls}
|
|
containerWidth="90vw"
|
|
containerHeight="calc(var(--index) * 15)"
|
|
itemWidth="calc(var(--index) * 2)"
|
|
itemHeight="calc(var(--index) * 12)"
|
|
gap="0.1rem"
|
|
autoAnimate={true}
|
|
autoAnimateInterval={100}
|
|
onClick={(index) => {
|
|
onSelect(index);
|
|
}}
|
|
/>
|
|
</FloatingGlassPanel>
|
|
);
|
|
} |