template_0205

RN_TEMPLATE/app/screens/CommunityScreen.tsx

@@ -0,0 +1,70 @@
+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,
+})