Kieran/snort
5
14
Fork 14
Code Issues 54 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

modal left & right btns

Browse Source
This commit is contained in:
Martti Malmi 2023-12-07 12:54:11 +02:00
parent e861f238f0
commit 6ec5911b7c
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/app/src/Element/Spotlight/SpotlightMedia.tsx
View File

@ -90,38 +90,36 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
};
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}
<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
className="p-2 bg-bg-color rounded-full cursor-pointer opacity-80 hover:opacity-70"
onClick={props.onClose}>
<Icon name="x-close" size={24} />
</span>
</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}`}
</div>
{props.images.length > 1 && (
<>
<Icon
className="absolute left-2 top-1/2 rotate-180 cursor-pointer"
name="arrowFront"
size={24}
<span
className="absolute left-0 p-2 top-1/2 rotate-180 cursor-pointer opacity-80 hover:opacity-60"
onClick={e => {
e.stopPropagation();
dec();
}}
/>
<Icon
className="absolute right-2 top-1/2 cursor-pointer"
name="arrowFront"
size={24}
}}>
<Icon name="arrowFront" size={24} />
</span>
<span
className="absolute right-0 p-2 top-1/2 cursor-pointer opacity-80 hover:opacity-60"
onClick={e => {
e.stopPropagation();
inc();
}}
/>
}}>
<Icon name="arrowFront" size={24} />
</span>
</>
)}
</div>