mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-31 07:01:17 +01:00
* feat(client): add component library and simplify routing Remove tab layout, explore page, modal, and unused template components. Replace with single-page layout and a dev component showcase with per-component detail pages. - Add Button with label prop, leading/trailing icon support - Add FeedCard, SerifText, SansSerifText, MonospaceText - Add colocated *.showcase.tsx files for each component - Use Stack navigator with themed headers Co-authored-by: Ona <no-reply@ona.com> * fix(client): render showcase as JSX component Co-authored-by: Ona <no-reply@ona.com> * chore(client): remove dead code chain Remove ThemedText, useThemeColor, useColorScheme hook, Colors, and Fonts — none referenced by current screens. Co-authored-by: Ona <no-reply@ona.com> --------- Co-authored-by: Ona <no-reply@ona.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { Link } from "expo-router"
|
|
import { FlatList, Pressable, View } from "react-native"
|
|
import tw from "twrnc"
|
|
|
|
import { SansSerifText } from "@/components/ui/sans-serif-text"
|
|
|
|
const components = [
|
|
{ name: "button", label: "Button" },
|
|
{ name: "feed-card", label: "FeedCard" },
|
|
{ name: "serif-text", label: "SerifText" },
|
|
{ name: "sans-serif-text", label: "SansSerifText" },
|
|
{ name: "monospace-text", label: "MonospaceText" },
|
|
] as const
|
|
|
|
export default function ComponentsScreen() {
|
|
return (
|
|
<View style={tw`flex-1`}>
|
|
<View style={tw`mx-4 mt-4 rounded-xl border border-stone-200 dark:border-stone-800 overflow-hidden`}>
|
|
<FlatList
|
|
data={components}
|
|
keyExtractor={(item) => item.name}
|
|
scrollEnabled={false}
|
|
ItemSeparatorComponent={() => (
|
|
<View style={tw`border-b border-stone-200 dark:border-stone-800`} />
|
|
)}
|
|
renderItem={({ item }) => (
|
|
<Link href={`/components/${item.name}`} asChild>
|
|
<Pressable style={tw`px-4 py-3`}>
|
|
<SansSerifText style={tw`text-base`}>{item.label}</SansSerifText>
|
|
</Pressable>
|
|
</Link>
|
|
)}
|
|
/>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|