Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 3x 3x 3x 2x 3x | import React from "react";
import { TouchableOpacity, View } from "react-native";
import { CachedImage } from "@repo/ui/components/CachedImage";
import { CloseIcon } from "@repo/ui/icons/Close";
import { useTheme } from "@repo/ui/themes";
import { makeStyles } from "@repo/ui/themes/makeStyles";
interface ImagePreviewProps {
uri: string | null;
onRemove: () => void;
}
export const ImagePreview: React.FC<ImagePreviewProps> = ({ uri, onRemove }) => {
const styles = useStyles();
const { theme } = useTheme();
if (!uri) return null;
return (
<View style={styles.previewContainer}>
<View style={styles.previewWrapper}>
<CachedImage
source={{ uri, cache: "web", priority: "high" }}
style={styles.imagePreview}
resizeMode="cover"
/>
<TouchableOpacity
style={styles.removeImageBtn}
onPress={onRemove}
accessibilityRole="button"
accessibilityLabel="Remove attached image"
>
<CloseIcon width={16} height={16} color={theme.colors.white} />
</TouchableOpacity>
</View>
</View>
);
};
const useStyles = makeStyles((theme) => ({
previewContainer: {
paddingHorizontal: 16,
paddingVertical: 10,
backgroundColor: theme.colors.white,
borderTopWidth: 1,
borderTopColor: theme.isNewTheme ? theme.colors.border.subtle : theme.colors.gray15,
},
previewWrapper: {
width: 60,
height: 60,
position: "relative",
},
imagePreview: {
width: "100%",
height: "100%",
borderRadius: 8,
},
removeImageBtn: {
position: "absolute",
top: -8,
right: -8,
backgroundColor: "rgba(0,0,0,0.6)",
borderRadius: 12,
padding: 4,
},
}));
|