mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2
3import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
4import {Fill} from '#/components/Fill'
5
6/**
7 * Applies and thin border within a bounding box. Used to contrast media from
8 * bg of the container.
9 */
10export function MediaInsetBorder({
11 children,
12 style,
13 opaque,
14}: {
15 children?: React.ReactNode
16 /**
17 * Used where this border needs to match adjacent borders, such as in
18 * external link previews
19 */
20 opaque?: boolean
21} & ViewStyleProp) {
22 const t = useTheme()
23 const isLight = t.name === 'light'
24 return (
25 <Fill
26 style={[
27 a.rounded_md,
28 a.border,
29 opaque
30 ? [t.atoms.border_contrast_low]
31 : [
32 isLight
33 ? t.atoms.border_contrast_low
34 : t.atoms.border_contrast_high,
35 {opacity: 0.6},
36 ],
37 {
38 pointerEvents: 'none',
39 },
40 style,
41 ]}>
42 {children}
43 </Fill>
44 )
45}