Skip to content

Commit f25d1d8

Browse files
kien-ngokien-ngo
committed
[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 -->
1 parent d35eaa6 commit f25d1d8

File tree

9 files changed

+883
-3
lines changed

9 files changed

+883
-3
lines changed

‎apps/playground-web/public/headless-ui-header.png

204 KB
Loading

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {
3+
NftCardDemo,
4+
NftDescriptionBasic,
5+
NftMediaBasic,
6+
NftMediaOverride,
7+
NftNameBasic,
8+
} from "@/components/headless-ui/nft-examples";
9+
import ThirdwebProvider from "@/components/thirdweb-provider";
10+
import { metadataBase } from "@/lib/constants";
11+
import type { Metadata } from "next";
12+
13+
export const metadata: Metadata = {
14+
metadataBase,
15+
title: "NFT Components",
16+
description:
17+
"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.",
18+
};
19+
20+
export default function Page() {
21+
return (
22+
<ThirdwebProvider>
23+
<main className="container px-0 pb-20">
24+
<APIHeader
25+
title="NFT Components"
26+
description={
27+
<>
28+
Elevate your NFT applications with our React headless UI
29+
components, engineered for seamless digital asset transactions.
30+
These customizable, zero-styling components simplify NFT
31+
interactions while giving developers complete freedom to craft
32+
their perfect user interface.
33+
</>
34+
}
35+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
36+
heroLink="/headless-ui-header.png"
37+
/>
38+
<section className="space-y-8">
39+
<NftMediaBasic />
40+
</section>
41+
<section className="space-y-8">
42+
<NftMediaOverride />
43+
</section>
44+
<section className="space-y-8">
45+
<NftNameBasic />
46+
</section>
47+
<section className="space-y-8">
48+
<NftDescriptionBasic />
49+
</section>
50+
<section className="space-y-8">
51+
<NftCardDemo />
52+
</section>
53+
</main>
54+
</ThirdwebProvider>
55+
);
56+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {
3+
AccountAddressBasic,
4+
AccountAddressFormat,
5+
AccountAvatarBasic,
6+
AccountBalanceBasic,
7+
AccountBalanceCustomToken,
8+
AccountBalanceFormat,
9+
AccountBalanceUSD,
10+
AccountBlobbieBasic,
11+
AccountNameBasic,
12+
AccountNameCustom,
13+
ConnectDetailsButtonClone,
14+
} from "@/components/headless-ui/account-examples";
15+
import ThirdwebProvider from "@/components/thirdweb-provider";
16+
import { metadataBase } from "@/lib/constants";
17+
import type { Metadata } from "next";
18+
19+
export const metadata: Metadata = {
20+
metadataBase,
21+
title: "Account Components",
22+
description:
23+
"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.",
24+
};
25+
26+
export default function Page() {
27+
return (
28+
<ThirdwebProvider>
29+
<main className="container px-0 pb-20">
30+
<APIHeader
31+
title="Account Components"
32+
description={
33+
<>
34+
Streamline your Web3 development with our React headless UI
35+
components for wallet integration. These unstyled, customizable
36+
components handle complex wallet operations while giving you
37+
complete control over your dApp&apos;s design.
38+
</>
39+
}
40+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
41+
heroLink="/headless-ui-header.png"
42+
/>
43+
44+
<section className="space-y-8">
45+
<AccountAddressBasic />
46+
</section>
47+
<section className="space-y-8">
48+
<AccountAddressFormat />
49+
</section>
50+
<section className="space-y-8">
51+
<AccountNameBasic />
52+
</section>
53+
<section className="space-y-8">
54+
<AccountNameCustom />
55+
</section>
56+
<section className="space-y-8">
57+
<AccountBalanceBasic />
58+
</section>
59+
<section className="space-y-8">
60+
<AccountBalanceCustomToken />
61+
</section>
62+
<section className="space-y-8">
63+
<AccountBalanceFormat />
64+
</section>
65+
<section className="space-y-8">
66+
<AccountBalanceUSD />
67+
</section>
68+
<section className="space-y-8">
69+
<AccountAvatarBasic />
70+
</section>
71+
<section className="space-y-8">
72+
<AccountBlobbieBasic />
73+
</section>
74+
<section className="space-y-8">
75+
<ConnectDetailsButtonClone />
76+
</section>
77+
</main>
78+
</ThirdwebProvider>
79+
);
80+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,4 +111,18 @@ export const navLinks: SidebarLink[] = [
111111
name: "Blockchain API",
112112
href: "/connect/blockchain-api",
113113
},
114+
{
115+
name: "Headless UI",
116+
expanded: true,
117+
links: [
118+
{
119+
name: "Account",
120+
href: "/connect/ui",
121+
},
122+
{
123+
name: "NFT",
124+
href: "/connect/ui/nft",
125+
},
126+
],
127+
},
114128
];

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ function WalletsSection() {
6060
description="Performant, and reliable blockchain API"
6161
icon={CodeIcon}
6262
/>
63+
<ArticleCardIndex
64+
href="/connect/ui"
65+
title="Headless UI"
66+
description="Modular & composable set of UIs for your web3 applications"
67+
icon={CodeIcon}
68+
/>
6369
</div>
6470
</section>
6571
);

0 commit comments

Comments
 (0)