about summary refs log tree commit diff
path: root/src/components/SearchError.tsx
blob: 443bbab8f8f066d1510d8aff20a52651eb16fdda (plain) (blame)
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
import {View} from 'react-native'

import {usePalette} from '#/lib/hooks/usePalette'
import {atoms as a, useBreakpoints} from '#/alf'
import * as Layout from '#/components/Layout'
import {Text} from '#/components/Typography'
import {TimesLarge_Stroke2_Corner0_Rounded} from './icons/Times'

export function SearchError({
  title,
  children,
}: {
  title?: string
  children?: React.ReactNode
}) {
  const {gtMobile} = useBreakpoints()
  const pal = usePalette('default')

  return (
    <Layout.Content>
      <View
        style={[
          a.align_center,
          a.gap_4xl,
          a.px_xl,
          {
            paddingVertical: 150,
          },
        ]}>
        <TimesLarge_Stroke2_Corner0_Rounded width={32} fill={pal.colors.icon} />
        <View
          style={[
            a.align_center,
            {maxWidth: gtMobile ? 394 : 294},
            gtMobile ? a.gap_md : a.gap_sm,
          ]}>
          <Text style={[a.font_bold, a.text_lg, a.text_center, a.leading_snug]}>
            {title}
          </Text>
          {children}
        </View>
      </View>
    </Layout.Content>
  )
}