Files
aris/apps/aelis-client/src/app/components/index.tsx
Kenneth c78ad25f0d feat(client): add component library and simplify routing (#66)
* 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>
2026-03-13 00:23:06 +00:00

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>
)
}