Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 9x 9x 3x | import React from "react";
import { StyleSheet, Text, View } from "react-native";
import type { ComponentProps } from "react";
import { Ionicons } from "@expo/vector-icons";
import { useTheme } from "../../hooks/useTheme";
import { SettingsCard } from "./SettingsCard";
import { SettingsIconCircle } from "./SettingsIconCircle";
export type SettingsStepCardProps = {
stepLabel: string;
title: string;
icon: ComponentProps<typeof Ionicons>["name"];
children: React.ReactNode;
};
/**
* Tutorial-style step: icon + step label + title, then body (composite of Card + header + content).
*/
export function SettingsStepCard({
stepLabel,
title,
icon,
children,
}: Readonly<SettingsStepCardProps>) {
const { colors } = useTheme();
return (
<SettingsCard marginBottom={14}>
<View style={styles.headerRow}>
<SettingsIconCircle name={icon} />
<View style={styles.headerText}>
<Text style={[styles.stepLabel, { color: colors.textMuted }]}>
{stepLabel}
</Text>
<Text style={[styles.stepTitle, { color: colors.text }]}>
{title}
</Text>
</View>
</View>
{children}
</SettingsCard>
);
}
const styles = StyleSheet.create({
headerRow: {
flexDirection: "row",
alignItems: "center",
marginBottom: 8,
},
headerText: {
flex: 1,
},
stepLabel: {
fontSize: 12,
marginBottom: 2,
},
stepTitle: {
fontSize: 15,
fontWeight: "600",
},
});
|