Skip to content

Instantly share code, notes, and snippets.

@heemoe

heemoe/create-component-prompt.md

Last active March 13, 2025 16:08
Show Gist options
  • Save heemoe/b604f68377b185727f993abbb02e7bc2 to your computer and use it in GitHub Desktop.
Save heemoe/b604f68377b185727f993abbb02e7bc2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
create-component-prompt.md

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.

  1. Use PageContainer as page wrapper.
  2. Use useQuery to request data, and utilize a mock API with mock data, use placehold.co as mock network image.
  3. Implement pull-down-to-refresh and pull-up-to-load-more features. Pls use YPTActivityIndicator, FBNoMoreData components.
  4. Separate each row item into a single, reusable component.
  5. use VStack, HStack, Spacer for layout, do not use View.
  6. Leverage existing meta components BaseText,BaseImage,BaseButton,BaseIconButton from components/Base.
  7. Do not add custom style in BaseText, use type attribute only.
  8. Use the predefined constants (colors.ts, space.ts, size.ts).
  9. Set the page background color to colors.background.light and the row items’ background color to colors.background.grey.
  10. Keep all new code within the current file. Do not modify other files or change any existing code.
  11. Please ensure that all meta components used in the previous steps are sourced from the /component/ folder.
  12. Please ensure that all code is clean, well-structured, and maintainable.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment