Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {StyleSheet} from 'react-native'
2
3import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'
4import {Fill} from '#/components/Fill'
5import {IS_HIGH_DPI} from '#/env'
6
7/**
8 * Applies and thin border within a bounding box. Used to contrast media from
9 * bg of the container.
10 */
11export function MediaInsetBorder({
12 children,
13 style,
14 opaque,
15}: {
16 children?: React.ReactNode
17 /**
18 * Used where this border needs to match adjacent borders, such as in
19 * external link previews
20 */
21 opaque?: boolean
22} & ViewStyleProp) {
23 const t = useTheme()
24 const isLight = t.name === 'light'
25 return (
26 <Fill
27 style={[
28 a.rounded_md,
29 {
30 borderWidth: platform({
31 native: StyleSheet.hairlineWidth,
32 // while we generally use hairlineWidth (aka 1px),
33 // we make an exception here for high DPI screens
34 // as the 1px border is very noticeable -sfn
35 web: IS_HIGH_DPI ? 0.5 : StyleSheet.hairlineWidth,
36 }),
37 },
38 opaque
39 ? [t.atoms.border_contrast_low]
40 : [
41 isLight
42 ? t.atoms.border_contrast_low
43 : t.atoms.border_contrast_high,
44 {opacity: 0.6},
45 ],
46 a.pointer_events_none,
47 style,
48 ]}>
49 {children}
50 </Fill>
51 )
52}