Create home page component - Vue

[blackgirlbytes]

Create home page component - Vue

🚀 Goal

Create a home page component in Vue that serves as the landing page for our Decentralized Web App (DWA) starter, providing different views based on the user's connection status.

🤔 Background

We need to implement the home page for our Vue.js DWA starter, mirroring the functionality of the existing React implementation. This page should display a welcome message and a connect button when the user is not connected, and show a TodoList component (or placeholder) when connected.

This is part of our larger project to create a Vue.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vue, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Create a HomePage.vue component
• Implement conditional rendering based on the user's connection status:
  • When not connected, display:
    • A title "DWA Starter"
    • An image (use the same workplace.svg or an equivalent)
    • A button labeled "Connect to your DWA" that initiates the Web5 connection process
    • A message below the button saying "Connect your DWA to get started"
  • When connected, display:
    • If a TodoList component exists, use it here
    • If no TodoList component exists yet, create a simple placeholder component that says "Todo List Coming Soon!"
• Ensure the component uses the Web5 connection status correctly
• Implement the connection functionality when the button is clicked
• Style the component using Tailwind CSS to match the existing design
• Ensure the layout is responsive and looks good on various screen sizes

🌟 Resources

• Web5 Documentation
• Vue.js Documentation
• Tailwind CSS Documentation
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[AryanK37]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[Johnnyevans32]

HI @blackgirlbytes this too has been sorted in one of my previous pr

[Johnnyevans32]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[Johnnyevans32]

and this too @blackgirlbytes