mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-21 17:41:18 +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:
43
apps/aelis-client/src/components/ui/button.showcase.tsx
Normal file
43
apps/aelis-client/src/components/ui/button.showcase.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import Feather from "@expo/vector-icons/Feather"
|
||||
import { View } from "react-native"
|
||||
import tw from "twrnc"
|
||||
|
||||
import { Button } from "./button"
|
||||
import { type Showcase, Section } from "../showcase"
|
||||
|
||||
function ButtonShowcase() {
|
||||
return (
|
||||
<View style={tw`gap-6`}>
|
||||
<Section title="Default">
|
||||
<Button style={tw`self-start`} label="Press me" />
|
||||
</Section>
|
||||
<Section title="Leading icon">
|
||||
<Button
|
||||
style={tw`self-start`}
|
||||
label="Add item"
|
||||
leadingIcon={<Feather name="plus" size={18} color="#e7e5e4" />}
|
||||
/>
|
||||
</Section>
|
||||
<Section title="Trailing icon">
|
||||
<Button
|
||||
style={tw`self-start`}
|
||||
label="Next"
|
||||
trailingIcon={<Feather name="arrow-right" size={18} color="#e7e5e4" />}
|
||||
/>
|
||||
</Section>
|
||||
<Section title="Both icons">
|
||||
<Button
|
||||
style={tw`self-start`}
|
||||
label="Download"
|
||||
leadingIcon={<Feather name="download" size={18} color="#e7e5e4" />}
|
||||
trailingIcon={<Feather name="chevron-down" size={18} color="#e7e5e4" />}
|
||||
/>
|
||||
</Section>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export const buttonShowcase: Showcase = {
|
||||
title: "Button",
|
||||
component: ButtonShowcase,
|
||||
}
|
||||
Reference in New Issue
Block a user