Skip to content

Commit a8f76dc

Browse files
kien-ngokien-ngo
committed
update
1 parent 54a9eca commit a8f76dc

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)