feat(mobile): lightbox

Author: lawvs

apps/mobile/src/components/lightbox/ImageViewing/@types/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {TransformsStyle} from 'react-native'
+import {MeasuredDimensions} from 'react-native-reanimated'
+
+export type Dimensions = {
+  width: number
+  height: number
+}
+
+export type Position = {
+  x: number
+  y: number
+}
+
+export type ImageSource = {
+  uri: string
+  dimensions: Dimensions | null
+  thumbUri: string
+  thumbDimensions: Dimensions | null
+  thumbRect: MeasuredDimensions | null
+  alt?: string
+  type: 'image' | 'circle-avi' | 'rect-avi'
+}
+
+export type Transform = Exclude<
+  TransformsStyle['transform'],
+  string | undefined
+>

apps/mobile/src/components/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { ViewStyle } from "react-native"
+import { SafeAreaView, StyleSheet, TouchableOpacity } from "react-native"
+
+import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+
+type Props = {
+  onRequestClose: () => void
+}
+
+const ImageDefaultHeader = ({ onRequestClose }: Props) => {
+  return (
+    <SafeAreaView style={styles.root}>
+      <TouchableOpacity
+        style={[styles.closeButton, styles.blurredBackground]}
+        onPress={onRequestClose}
+        hitSlop={16}
+        accessibilityRole="button"
+        accessibilityLabel={`Close image`}
+        accessibilityHint={`Closes viewer for header image`}
+        onAccessibilityEscape={onRequestClose}
+      >
+        <CloseCuteReIcon />
+      </TouchableOpacity>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: "flex-end",
+    pointerEvents: "box-none",
+  },
+  closeButton: {
+    marginRight: 10,
+    marginTop: 10,
+    width: 44,
+    height: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 22,
+    backgroundColor: "#00000077",
+  },
+  blurredBackground: {
+    backdropFilter: "blur(10px)",
+    WebkitBackdropFilter: "blur(10px)",
+  } as ViewStyle,
+})
+
+export default ImageDefaultHeader