src/view/screens/Storybook/Links.tsx


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
46
47
48

import React from 'react'
import {View} from 'react-native'

import {atoms as a} from '#/alf'
import {ButtonText} from '#/components/Button'
import {Link} from '#/components/Link'
import {H1, H3} from '#/components/Typography'

export function Links() {
  return (
    <View style={[a.gap_md, a.align_start]}>
      <H1>Links</H1>

      <View style={[a.gap_md, a.align_start]}>
        <Link
          to="https://blueskyweb.xyz"
          warnOnMismatchingTextChild
          style={[a.text_md]}>
          External
        </Link>
        <Link to="https://blueskyweb.xyz" style={[a.text_md]}>
          <H3>External with custom children</H3>
        </Link>
        <Link
          to="https://blueskyweb.xyz"
          warnOnMismatchingTextChild
          style={[a.text_lg]}>
          https://blueskyweb.xyz
        </Link>
        <Link
          to="https://bsky.app/profile/bsky.app"
          warnOnMismatchingTextChild
          style={[a.text_md]}>
          Internal
        </Link>

        <Link
          variant="solid"
          color="primary"
          size="large"
          label="View @bsky.app's profile"
          to="https://bsky.app/profile/bsky.app">
          <ButtonText>Link as a button</ButtonText>
        </Link>
      </View>
    </View>
  )
}