diff --git a/ui/src/artist/DesktopArtistDetails.js b/ui/src/artist/DesktopArtistDetails.js
index b6291c9e0..537303a26 100644
--- a/ui/src/artist/DesktopArtistDetails.js
+++ b/ui/src/artist/DesktopArtistDetails.js
@@ -7,6 +7,7 @@ import CardMedia from '@material-ui/core/CardMedia'
import ArtistExternalLinks from './ArtistExternalLink'
import config from '../config'
import { LoveButton, RatingField } from '../common'
+import Lightbox from 'react-image-lightbox'
const useStyles = makeStyles(
(theme) => ({
@@ -32,6 +33,7 @@ const useStyles = makeStyles(
cover: {
width: 151,
borderRadius: '6em',
+ cursor: 'pointer',
},
artistImage: {
maxHeight: '9.5rem',
@@ -66,6 +68,13 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
const [expanded, setExpanded] = useState(false)
const classes = useStyles({ img, expanded })
const title = record.name
+ const [isLightboxOpen, setLightboxOpen] = React.useState(false)
+
+ const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
+ const handleCloseLightbox = React.useCallback(
+ () => setLightboxOpen(false),
+ []
+ )
return (
@@ -74,7 +83,8 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
{artistInfo && (
)}
@@ -126,6 +136,15 @@ const DesktopArtistDetails = ({ img, artistInfo, record, biography }) => {
+ {isLightboxOpen && (
+
+ )}
)
diff --git a/ui/src/artist/MobileArtistDetails.js b/ui/src/artist/MobileArtistDetails.js
index 5826cf2da..5fe6f4c59 100644
--- a/ui/src/artist/MobileArtistDetails.js
+++ b/ui/src/artist/MobileArtistDetails.js
@@ -5,6 +5,7 @@ import Card from '@material-ui/core/Card'
import CardMedia from '@material-ui/core/CardMedia'
import config from '../config'
import { LoveButton, RatingField } from '../common'
+import Lightbox from 'react-image-lightbox'
const useStyles = makeStyles(
(theme) => ({
@@ -77,6 +78,13 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
const [expanded, setExpanded] = useState(false)
const classes = useStyles({ img, expanded })
const title = record.name
+ const [isLightboxOpen, setLightboxOpen] = React.useState(false)
+
+ const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), [])
+ const handleCloseLightbox = React.useCallback(
+ () => setLightboxOpen(false),
+ []
+ )
return (
<>
@@ -86,7 +94,8 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
{artistInfo && (
)}
@@ -127,6 +136,15 @@ const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
+ {isLightboxOpen && (
+
+ )}
>
)
}