2 files changed, 88 insertions, 0 deletions
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
new file mode 100644
index 000000000..9432f0151
--- /dev/null
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useStores} from '../../../state'
+
+import * as models from '../../../state/models/shell-ui'
+
+import * as ProfileImageLightbox from './ProfileImage'
+
+export const Lightbox = observer(function Lightbox() {
+  const store = useStores()
+
+  const onClose = () => {
+    store.shell.closeLightbox()
+  }
+
+  if (!store.shell.isLightboxActive) {
+    return <View />
+  }
+
+  let element
+  if (store.shell.activeLightbox?.name === 'profile-image') {
+    element = (
+      <ProfileImageLightbox.Component
+        {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
+      />
+    )
+  } else {
+    return <View />
+  }
+
+  return (
+    <>
+      <TouchableOpacity style={styles.bg} onPress={onClose} />
+      <TouchableOpacity style={styles.xIcon} onPress={onClose}>
+        <FontAwesomeIcon icon="x" size={24} style={{color: '#fff'}} />
+      </TouchableOpacity>
+      {element}
+    </>
+  )
+})
+
+const styles = StyleSheet.create({
+  bg: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: '#000',
+    opacity: 0.9,
+  },
+  xIcon: {
+    position: 'absolute',
+    top: 30,
+    right: 30,
+  },
+  container: {
+    position: 'absolute',
+  },
+})
diff --git a/src/view/com/lightbox/ProfileImage.tsx b/src/view/com/lightbox/ProfileImage.tsx
new file mode 100644
index 000000000..f9c4ae73e
--- /dev/null
+++ b/src/view/com/lightbox/ProfileImage.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import {StyleSheet, useWindowDimensions, View} from 'react-native'
+import {UserAvatar} from '../util/UserAvatar'
+import {ProfileViewModel} from '../../../state/models/profile-view'
+
+export function Component({profileView}: {profileView: ProfileViewModel}) {
+  const winDim = useWindowDimensions()
+  const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
+  return (
+    <View style={[styles.container, {top}]}>
+      <UserAvatar
+        handle={profileView.handle}
+        displayName={profileView.displayName}
+        avatar={profileView.avatar}
+        size={winDim.width - 40}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 20,
+  },
+})