List the members of the batch

[rohann06]

Description

• 🚀 New Builders Route: Added a dedicated route to the navbar for quick and seamless access to all builders.

• 📄 Fresh Builders Page: Launched page.tsx to display the page header and proudly show the total number of
  builders in the batch.

• 🔄 Dynamic Members List: Refined component structure with a new _components folder and crafted
  MembersList.tsx to dynamically list all builder addresses.

• 🔗 Smooth Navigation: Integrated next/link for effortless navigation to individual builder pages with a single click.

• 🚫 Smart Links Handling: Disabled links and reduced opacity for builders without profile pages to avoid 404 errors
  and maintain a smooth user experience.

• 🌟 Highlighted Active Profiles: Made addresses of builders with completed profiles stand out, allowing users to
  easily find and recognize active contributors.

Your ENS/address: 0x4a9A95B6fe3b9416f0c78A8735Aa075c75AF46a4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
batch8-buidlguidl-com-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 26, 2024 4:48am

[derrekcoleman]

Hey @rohan-ahire06! Slick looking design. I like how clean and minimal it is - not cluttered at all.

I see you're using an address component for each batch member. Users are very familiar with this design pattern at this point: they expect clicking them to copy the address to their clipboard, maybe to take them to a block explorer. They certainly don't expect clicking an address component to take them to an internal page on the website that they aren't aware of.

I suggest you solve this design challenge and make the UI easier to parse by formatting this data as a table, rather than a flex. One column should be the addresses, just like you have them. A separate column should take `isFileSystemAddress' and display one of two options:

• if there's a page, link to it
• if there isn't a page, show that to the user somehow

If you go this route, I'll leave it up to you whether you want to keep the opacity behavior you already have. IMO something being greyed out suggests that it's broken or that I can't click it yet, so maybe the new second column of the table already handles that state.

You might even sort to place all addresses with pages on top in one group followed by all addresses without pages.

What about displaying other metadata on top? You have builders - what about checked-in builders? Or personal pages created? That's a personal preference, I just wanted to mention it.

[rohann06]

• I'll start by working on the table view. We may also remove the address component's opacity because, as you mentioned, the Profile Link column would take care of it.

• Furthermore, you're saying that I should change the name at the top from builders to checked-in builders? Because the number at the top indicates how many builders have checked in as of right now

• I can also add details like Personal Pages Created count later, depending on how it fits with the UI."

@derrekcoleman

[rohann06]

• Transformed the builders' UI from a flex view to a sleek table layout
• Introduced two columns: Addresses and Profile Links
  • Addresses column: Maps all builder addresses who have checked in into the contract.
  • Profile Links: Guides users to builder pages. Shows View Profile for those with a page and No Profile Page for
    those without.
• Added a dynamic Builders pages created count beside the Builders count at the top.
• Also the branch is not behind the upstream.

Description:

Implemented all the changes suggested by @derrekcoleman in the comments. If there’s anything else to tweak or add, just let me know!

[derrekcoleman]

Looking really nice 👌

Requesting a few typo fixes for polish and encouraging you to make a small tweak in the order of builders on the table.

[derrekcoleman]

Great job, @rohann06! Merged 🔥🔥🔥