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