<Text value="Hello" />
<Image src={imageUrl} width={100} height={100} />

<Card padding="lg">
  <Title level={2} value="Card Title" />
  <Text value="Card content" />
</Card>

<Text value={userName} />
<Image src={profilePicture} />

<Title value={`Hello, ${userName}!`} />
<Text value={`You have ${count} notifications`} />

<Text value={user.firstName + " " + user.lastName} />
<Badge color={status === "active" ? "green" : "gray"} />

{isLoggedIn && <Text value="Welcome back!" />}
{hasNotifications && <Badge value={notificationCount} />}

{isLoading ? (
  <Text value="Loading..." />
) : (
  <Text value={data} />
)}

{items.map((item) => (
  <Text key={item.id} value={item.name} />
))}

{tasks.map((task) => (
  <Row key={task.id} gap="md" align="center">
    <Checkbox checked={task.completed} />
    <Text value={task.title} flex={1} />
    <Badge value={task.priority} />
  </Row>
))}

{items.map((item, index) => (
  <Text key={index} value={`${index + 1}. ${item.name}`} />
))}

<Text value="Static string" />
<Text value={dynamicString} />

<Box padding={16} />
<Text size={14} />

<Button disabled={true} />
<Checkbox checked={isCompleted} />

<Button onPress={{ type: "sendMessage", payload: { text: "Hi" } }} />

{items.map((item) => (
  <Text key={item.id} value={item.name} />
))}

// Good
<Text value={userName} />

// Avoid complex logic
<Text value={users.filter(u => u.active).map(u => u.name).join(", ")} />

// Good
<Image src={profilePicture} alt="User profile" />

// Avoid
<Image src={img1} alt={alt1} />

// Good
<Card>
  <Row>
    <Text value="Name" />
  </Row>
</Card>

// Avoid deep nesting when possible