modal left & right btns
This commit is contained in:
parent
e861f238f0
commit
6ec5911b7c
@ -90,38 +90,36 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}>
|
<div className="select-none relative h-screen flex items-center flex-1 justify-center" onClick={onClickBg}>
|
||||||
{mediaEl}
|
{mediaEl}
|
||||||
<div className="select-none absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
|
<div className="absolute flex flex-row items-center gap-4 left-0 top-0 p-4">
|
||||||
<span
|
<span
|
||||||
className="p-2 bg-bg-color rounded-full cursor-pointer opacity-80 hover:opacity-70"
|
className="p-2 bg-bg-color rounded-full cursor-pointer opacity-80 hover:opacity-70"
|
||||||
onClick={props.onClose}>
|
onClick={props.onClose}>
|
||||||
<Icon name="x-close" size={24} />
|
<Icon name="x-close" size={24} />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="select-none absolute flex flex-row items-center gap-4 right-0 top-0 p-4">
|
<div className="absolute flex flex-row items-center gap-4 right-0 top-0 p-4">
|
||||||
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
{props.images.length > 1 && `${idx + 1}/${props.images.length}`}
|
||||||
</div>
|
</div>
|
||||||
{props.images.length > 1 && (
|
{props.images.length > 1 && (
|
||||||
<>
|
<>
|
||||||
<Icon
|
<span
|
||||||
className="absolute left-2 top-1/2 rotate-180 cursor-pointer"
|
className="absolute left-0 p-2 top-1/2 rotate-180 cursor-pointer opacity-80 hover:opacity-60"
|
||||||
name="arrowFront"
|
|
||||||
size={24}
|
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
dec();
|
dec();
|
||||||
}}
|
}}>
|
||||||
/>
|
<Icon name="arrowFront" size={24} />
|
||||||
<Icon
|
</span>
|
||||||
className="absolute right-2 top-1/2 cursor-pointer"
|
<span
|
||||||
name="arrowFront"
|
className="absolute right-0 p-2 top-1/2 cursor-pointer opacity-80 hover:opacity-60"
|
||||||
size={24}
|
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
inc();
|
inc();
|
||||||
}}
|
}}>
|
||||||
/>
|
<Icon name="arrowFront" size={24} />
|
||||||
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user