[Playground] Feature: Headless components (#5535)

CNCT-2588

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `playground-web` application by adding new components and improving existing ones related to NFT and account functionalities, showcasing headless UI components for better Web3 integration.

### Detailed summary
- Added `ArticleCardIndex` in `page.tsx`.
- Introduced new navigation link for "Headless UI".
- Expanded `Account` and `NFT` components with detailed examples.
- Improved `useQuery` parameters in `avatar.tsx` and `name.tsx`.
- Created several new components in `nft-examples.tsx` and `account-examples.tsx` for displaying NFT and account information.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

apps/playground-web/src/app/connect/ui/nft/page.tsx

@@ -0,0 +1,56 @@
+import { APIHeader } from "@/components/blocks/APIHeader";
+import {
+  NftCardDemo,
+  NftDescriptionBasic,
+  NftMediaBasic,
+  NftMediaOverride,
+  NftNameBasic,
+} from "@/components/headless-ui/nft-examples";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "NFT Components",
+  description:
+    "Elevate your NFT marketplace with our React headless UI components, engineered for seamless digital asset transactions. These customizable, zero-styling components simplify NFT interactions while giving developers complete freedom to craft their perfect user interface.",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="NFT Components"
+          description={
+            <>
+              Elevate your NFT applications with our React headless UI
+              components, engineered for seamless digital asset transactions.
+              These customizable, zero-styling components simplify NFT
+              interactions while giving developers complete freedom to craft
+              their perfect user interface.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          heroLink="/headless-ui-header.png"
+        />
+        <section className="space-y-8">
+          <NftMediaBasic />
+        </section>
+        <section className="space-y-8">
+          <NftMediaOverride />
+        </section>
+        <section className="space-y-8">
+          <NftNameBasic />
+        </section>
+        <section className="space-y-8">
+          <NftDescriptionBasic />
+        </section>
+        <section className="space-y-8">
+          <NftCardDemo />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}

apps/playground-web/src/app/connect/ui/page.tsx

@@ -0,0 +1,80 @@
+import { APIHeader } from "@/components/blocks/APIHeader";
+import {
+  AccountAddressBasic,
+  AccountAddressFormat,
+  AccountAvatarBasic,
+  AccountBalanceBasic,
+  AccountBalanceCustomToken,
+  AccountBalanceFormat,
+  AccountBalanceUSD,
+  AccountBlobbieBasic,
+  AccountNameBasic,
+  AccountNameCustom,
+  ConnectDetailsButtonClone,
+} from "@/components/headless-ui/account-examples";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Account Components",
+  description:
+    "Streamline your Web3 development with our React headless UI components for wallet integration. These unstyled, customizable components handle complex wallet operations while giving you complete control over your dApp's design.",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="Account Components"
+          description={
+            <>
+              Streamline your Web3 development with our React headless UI
+              components for wallet integration. These unstyled, customizable
+              components handle complex wallet operations while giving you
+              complete control over your dApp&apos;s design.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          heroLink="/headless-ui-header.png"
+        />
+
+        <section className="space-y-8">
+          <AccountAddressBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountAddressFormat />
+        </section>
+        <section className="space-y-8">
+          <AccountNameBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountNameCustom />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceCustomToken />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceFormat />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceUSD />
+        </section>
+        <section className="space-y-8">
+          <AccountAvatarBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountBlobbieBasic />
+        </section>
+        <section className="space-y-8">
+          <ConnectDetailsButtonClone />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}

apps/playground-web/src/app/navLinks.ts

@@ -111,4 +111,18 @@ export const navLinks: SidebarLink[] = [
     name: "Blockchain API",
     href: "/connect/blockchain-api",
   },
+  {
+    name: "Headless UI",
+    expanded: true,
+    links: [
+      {
+        name: "Account",
+        href: "/connect/ui",
+      },
+      {
+        name: "NFT",
+        href: "/connect/ui/nft",
+      },
+    ],
+  },
 ];

apps/playground-web/src/app/page.tsx

@@ -60,6 +60,12 @@ function WalletsSection() {
           description="Performant, and reliable blockchain API"
           icon={CodeIcon}
         />
+        <ArticleCardIndex
+          href="/connect/ui"
+          title="Headless UI"
+          description="Modular & composable set of UIs for your web3 applications"
+          icon={CodeIcon}
+        />
       </div>
     </section>
   );