Create a component based on the UI image I’ve provided. Please review the code in example.tsx as a reference for best practices before implementing the new component.
- Use PageContainer as page wrapper.
- Use useQuery to request data, and utilize a mock API with mock data, use placehold.co as mock network image.
- Implement pull-down-to-refresh and pull-up-to-load-more features. Pls use YPTActivityIndicator, FBNoMoreData components.
- Separate each row item into a single, reusable component.
- use VStack, HStack, Spacer for layout, do not use View.
- Leverage existing meta components BaseText,BaseImage,BaseButton,BaseIconButton from components/Base.