52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
import { ReactNode } from "react"
|
||
|
|
import { TextStyle, View, ViewStyle } from "react-native"
|
||
|
|
|
||
|
|
import { Text } from "@/components/Text"
|
||
|
|
import type { TxKeyPath } from "@/i18n"
|
||
|
|
import { translate } from "@/i18n/translate"
|
||
|
|
import { useAppTheme } from "@/theme/context"
|
||
|
|
import { $styles } from "@/theme/styles"
|
||
|
|
import type { ThemedStyle } from "@/theme/types"
|
||
|
|
import { s } from "@/utils/responsive"
|
||
|
|
|
||
|
|
interface DemoUseCaseProps {
|
||
|
|
name: TxKeyPath
|
||
|
|
description?: TxKeyPath
|
||
|
|
layout?: "column" | "row"
|
||
|
|
itemStyle?: ViewStyle
|
||
|
|
children: ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {DemoUseCaseProps} props - The props for the `DemoUseCase` component.
|
||
|
|
* @returns {JSX.Element} The rendered `DemoUseCase` component.
|
||
|
|
*/
|
||
|
|
export function DemoUseCase(props: DemoUseCaseProps) {
|
||
|
|
const { name, description, children, layout = "column", itemStyle = {} } = props
|
||
|
|
const { themed } = useAppTheme()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View>
|
||
|
|
<Text style={themed($name)}>{translate(name)}</Text>
|
||
|
|
{description && <Text style={themed($description)}>{translate(description)}</Text>}
|
||
|
|
|
||
|
|
<View style={[itemStyle, layout === "row" && $styles.row, themed($item)]}>{children}</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const $description: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
||
|
|
marginTop: spacing.md,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $item: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
||
|
|
backgroundColor: colors.palette.neutral100,
|
||
|
|
borderRadius: s(8),
|
||
|
|
padding: spacing.lg,
|
||
|
|
marginVertical: spacing.md,
|
||
|
|
})
|
||
|
|
|
||
|
|
const $name: ThemedStyle<TextStyle> = ({ typography }) => ({
|
||
|
|
fontFamily: typography.primary.bold,
|
||
|
|
})
|