Lightbox Full width on mobile
This commit is contained in:
parent
3a381d51b5
commit
d3ec784549
|
@ -1,3 +1,4 @@
|
||||||
|
import { useMediaMobile } from "hooks/useMediaQuery";
|
||||||
import { Dispatch, SetStateAction } from "react";
|
import { Dispatch, SetStateAction } from "react";
|
||||||
import Lightbox from "react-image-lightbox";
|
import Lightbox from "react-image-lightbox";
|
||||||
|
|
||||||
|
@ -13,6 +14,8 @@ export type LightBoxProps = {
|
||||||
|
|
||||||
export default function LightBox(props: LightBoxProps): JSX.Element {
|
export default function LightBox(props: LightBoxProps): JSX.Element {
|
||||||
const { state, setState, images, index, setIndex } = props;
|
const { state, setState, images, index, setIndex } = props;
|
||||||
|
const mobile = useMediaMobile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{state && (
|
{state && (
|
||||||
|
@ -28,7 +31,7 @@ export default function LightBox(props: LightBoxProps): JSX.Element {
|
||||||
imageCaption=""
|
imageCaption=""
|
||||||
imageTitle=""
|
imageTitle=""
|
||||||
onCloseRequest={() => setState(false)}
|
onCloseRequest={() => setState(false)}
|
||||||
imagePadding={50}
|
imagePadding={mobile ? 0 : 70}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in New Issue