Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
1.7 kB · 61 lines
TSX
at prod
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import {StyleSheet} from 'react-native'
import {getShapeRadius} from '#/lib/shapes'import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'import {Fill} from '#/components/Fill'import {IS_HIGH_DPI} from '#/env'
/** * Applies and thin border within a bounding box. Used to contrast media from * bg of the container. */export function MediaInsetBorder({ children, style, opaque,}: { children?: React.ReactNode /** * Used where this border needs to match adjacent borders, such as in * external link previews */ opaque?: boolean} & ViewStyleProp) { const t = useTheme() const shapePreference = useEnableSquareButtons() const isLight = t.name === 'light' return ( <Fill style={[ { borderRadius: getShapeRadius( shapePreference, a.rounded_md.borderRadius, a.rounded_md.borderRadius, ), }, { borderWidth: platform({ native: StyleSheet.hairlineWidth, // while we generally use hairlineWidth (aka 1px), // we make an exception here for high DPI screens // as the 1px border is very noticeable -sfn web: IS_HIGH_DPI ? 0.5 : StyleSheet.hairlineWidth, }), }, opaque ? [t.atoms.border_contrast_low] : [ isLight ? t.atoms.border_contrast_low : t.atoms.border_contrast_high, {opacity: 0.6}, ], a.pointer_events_none, style, ]}> {children} </Fill> )}