mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-20 09:01:19 +00:00
Kenneth
ec083c3c77
Introduce Button.Icon to enforce consistent icon styling (size, theme-aware color) instead of hardcoding Feather props at each call site. Update showcase and json-render registry to use it. Co-authored-by: Ona <no-reply@ona.com>
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import Feather from "@expo/vector-icons/Feather"
|
|
import { type PressableProps, Pressable, View } from "react-native"
|
|
import tw from "twrnc"
|
|
|
|
import { SansSerifText } from "./sans-serif-text"
|
|
|
|
type FeatherIconName = React.ComponentProps<typeof Feather>["name"]
|
|
|
|
type ButtonIconProps = {
|
|
name: FeatherIconName
|
|
}
|
|
|
|
function ButtonIcon({ name }: ButtonIconProps) {
|
|
return <Feather name={name} size={18} color={tw.color("text-stone-100 dark:text-stone-200")} />
|
|
}
|
|
|
|
type ButtonProps = Omit<PressableProps, "children"> & {
|
|
label: string
|
|
leadingIcon?: React.ReactNode
|
|
trailingIcon?: React.ReactNode
|
|
}
|
|
|
|
export function Button({ style, label, leadingIcon, trailingIcon, ...props }: ButtonProps) {
|
|
const hasIcons = leadingIcon != null || trailingIcon != null
|
|
|
|
const textElement = <SansSerifText style={tw`text-stone-100 dark:text-stone-200 font-medium`}>{label}</SansSerifText>
|
|
|
|
return (
|
|
<Pressable style={[tw`rounded-full bg-teal-600 px-4 py-3 w-fit`, style]} {...props}>
|
|
{hasIcons ? (
|
|
<View style={tw`flex-row items-center gap-1.5`}>
|
|
{leadingIcon}
|
|
{textElement}
|
|
{trailingIcon}
|
|
</View>
|
|
) : (
|
|
textElement
|
|
)}
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
Button.Icon = ButtonIcon
|