71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { FC } from "react"
|
|
import { TextStyle } from "react-native"
|
|
|
|
import { ListItem } from "@/components/ListItem"
|
|
import { Screen } from "@/components/Screen"
|
|
import { Text } from "@/components/Text"
|
|
import type { MainTabScreenProps } from "@/navigators/navigationTypes"
|
|
import { useAppTheme } from "@/theme/context"
|
|
import { $styles } from "@/theme/styles"
|
|
import type { ThemedStyle } from "@/theme/types"
|
|
import { openLinkInBrowser } from "@/utils/openLinkInBrowser"
|
|
|
|
const COMMUNITY_LINKS = [
|
|
{
|
|
icon: "slack" as const,
|
|
titleTx: "communityScreen:joinSlackLink" as const,
|
|
url: "https://community.infinite.red/",
|
|
},
|
|
{
|
|
icon: "github" as const,
|
|
titleTx: "communityScreen:contributeToIgniteLink" as const,
|
|
url: "https://github.com/infinitered/ignite",
|
|
},
|
|
{
|
|
icon: "globe" as const,
|
|
titleTx: "communityScreen:hireUsLink" as const,
|
|
url: "https://infinite.red/",
|
|
},
|
|
]
|
|
|
|
export const CommunityScreen: FC<MainTabScreenProps<"Community">> = () => {
|
|
const { themed } = useAppTheme()
|
|
|
|
return (
|
|
<Screen preset="scroll" contentContainerStyle={$styles.container}>
|
|
<Text preset="heading" tx="communityScreen:title" style={themed($title)} />
|
|
<Text tx="communityScreen:tagLine" style={themed($description)} />
|
|
|
|
<Text
|
|
preset="subheading"
|
|
tx="communityScreen:joinUsOnSlackTitle"
|
|
style={themed($sectionTitle)}
|
|
/>
|
|
<Text tx="communityScreen:joinUsOnSlack" style={themed($description)} />
|
|
|
|
{COMMUNITY_LINKS.map((link, index) => (
|
|
<ListItem
|
|
key={link.url}
|
|
tx={link.titleTx}
|
|
leftIcon={link.icon}
|
|
rightIcon="caretRight"
|
|
onPress={() => openLinkInBrowser(link.url)}
|
|
bottomSeparator={index < COMMUNITY_LINKS.length - 1}
|
|
/>
|
|
))}
|
|
</Screen>
|
|
)
|
|
}
|
|
|
|
const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
|
marginBottom: spacing.sm,
|
|
})
|
|
|
|
const $description: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
|
marginBottom: spacing.lg,
|
|
})
|
|
|
|
const $sectionTitle: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
|
marginTop: spacing.xxl,
|
|
})
|