Eric Bailey
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
|
|
import {useTheme, atoms as a} from '#/alf'
|
|
import {ButtonText} from '#/components/Button'
|
|
import {InlineLink, Link} from '#/components/Link'
|
|
import {H1, H3, Text} from '#/components/Typography'
|
|
|
|
export function Links() {
|
|
const t = useTheme()
|
|
return (
|
|
<View style={[a.gap_md, a.align_start]}>
|
|
<H1>Links</H1>
|
|
|
|
<View style={[a.gap_md, a.align_start]}>
|
|
<InlineLink
|
|
to="https://bsky.social"
|
|
warnOnMismatchingTextChild
|
|
style={[a.text_md]}>
|
|
External
|
|
</InlineLink>
|
|
<InlineLink to="https://bsky.social" style={[a.text_md, t.atoms.text]}>
|
|
<H3>External with custom children</H3>
|
|
</InlineLink>
|
|
<InlineLink
|
|
to="https://bsky.social"
|
|
style={[a.text_md, t.atoms.text_contrast_low]}>
|
|
External with custom children
|
|
</InlineLink>
|
|
<InlineLink
|
|
to="https://bsky.social"
|
|
warnOnMismatchingTextChild
|
|
style={[a.text_lg]}>
|
|
https://bsky.social
|
|
</InlineLink>
|
|
<InlineLink
|
|
to="https://bsky.app/profile/bsky.app"
|
|
warnOnMismatchingTextChild
|
|
style={[a.text_md]}>
|
|
Internal
|
|
</InlineLink>
|
|
|
|
<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>
|
|
|
|
<Link
|
|
label="View @bsky.app's profile"
|
|
to="https://bsky.app/profile/bsky.app">
|
|
<View
|
|
style={[
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.gap_md,
|
|
a.rounded_md,
|
|
a.p_md,
|
|
t.atoms.bg_contrast_25,
|
|
]}>
|
|
<View
|
|
style={[
|
|
{width: 32, height: 32},
|
|
a.rounded_full,
|
|
t.atoms.bg_contrast_200,
|
|
]}
|
|
/>
|
|
<Text>View @bsky.app's profile</Text>
|
|
</View>
|
|
</Link>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|