mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-20 17:11:17 +00:00
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>
This commit is contained in:
48
apps/aelis-client/src/app/components/[name].tsx
Normal file
48
apps/aelis-client/src/app/components/[name].tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { useLocalSearchParams, useNavigation } from "expo-router"
|
||||
import { useEffect } from "react"
|
||||
import { ScrollView, View } from "react-native"
|
||||
import tw from "twrnc"
|
||||
|
||||
import { buttonShowcase } from "@/components/ui/button.showcase"
|
||||
import { feedCardShowcase } from "@/components/ui/feed-card.showcase"
|
||||
import { monospaceTextShowcase } from "@/components/ui/monospace-text.showcase"
|
||||
import { sansSerifTextShowcase } from "@/components/ui/sans-serif-text.showcase"
|
||||
import { serifTextShowcase } from "@/components/ui/serif-text.showcase"
|
||||
import { type Showcase } from "@/components/showcase"
|
||||
import { SansSerifText } from "@/components/ui/sans-serif-text"
|
||||
|
||||
const showcases: Record<string, Showcase> = {
|
||||
button: buttonShowcase,
|
||||
"feed-card": feedCardShowcase,
|
||||
"serif-text": serifTextShowcase,
|
||||
"sans-serif-text": sansSerifTextShowcase,
|
||||
"monospace-text": monospaceTextShowcase,
|
||||
}
|
||||
|
||||
export default function ComponentDetailScreen() {
|
||||
const { name } = useLocalSearchParams<{ name: string }>()
|
||||
const navigation = useNavigation()
|
||||
const showcase = showcases[name]
|
||||
|
||||
useEffect(() => {
|
||||
if (showcase) {
|
||||
navigation.setOptions({ title: showcase.title })
|
||||
}
|
||||
}, [navigation, showcase])
|
||||
|
||||
if (!showcase) {
|
||||
return (
|
||||
<View style={tw`bg-stone-100 dark:bg-stone-900 flex-1 items-center justify-center`}>
|
||||
<SansSerifText>Component not found</SansSerifText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const ShowcaseComponent = showcase.component
|
||||
|
||||
return (
|
||||
<ScrollView style={tw`bg-stone-100 dark:bg-stone-900 flex-1`} contentContainerStyle={tw`px-5 pb-10 pt-4 gap-6`}>
|
||||
<ShowcaseComponent />
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user