Skip to content

Commit 386e44d

Browse files
kien-ngokien-ngo
committed
update
1 parent 814a397 commit 386e44d

File tree

8 files changed

+855
-3
lines changed

8 files changed

+855
-3
lines changed

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {
3+
NftCardDemo,
4+
NftDescriptionBasic,
5+
NftMediaBasic,
6+
NftNameBasic,
7+
} from "@/components/headless-ui/nft-examples";
8+
import ThirdwebProvider from "@/components/thirdweb-provider";
9+
import { metadataBase } from "@/lib/constants";
10+
import type { Metadata } from "next";
11+
12+
export const metadata: Metadata = {
13+
metadataBase,
14+
title: "lorem ipsum",
15+
description: "lorem ipsum",
16+
};
17+
18+
export default function Page() {
19+
return (
20+
<ThirdwebProvider>
21+
<main className="container px-0 pb-20">
22+
<APIHeader
23+
title="Lorem ipsum"
24+
description={
25+
<>
26+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
27+
Accusantium reprehenderit corrupti sapiente nobis impedit, beatae
28+
sit unde nihil, facilis vitae sunt. Aperiam sed vero repudiandae
29+
nisi maiores repellat molestiae illum.
30+
</>
31+
}
32+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
33+
heroLink="/pay.png"
34+
/>
35+
<section className="space-y-8">
36+
<NftMediaBasic />
37+
</section>
38+
<section className="space-y-8">
39+
<NftNameBasic />
40+
</section>
41+
<section className="space-y-8">
42+
<NftDescriptionBasic />
43+
</section>
44+
<section className="space-y-8">
45+
<NftCardDemo />
46+
</section>
47+
</main>
48+
</ThirdwebProvider>
49+
);
50+
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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: "lorem ipsum",
22+
description: "lorem ipsum",
23+
};
24+
25+
export default function Page() {
26+
return (
27+
<ThirdwebProvider>
28+
<main className="container px-0 pb-20">
29+
<APIHeader
30+
title="Lorem ipsum"
31+
description={
32+
<>
33+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
34+
Accusantium reprehenderit corrupti sapiente nobis impedit, beatae
35+
sit unde nihil, facilis vitae sunt. Aperiam sed vero repudiandae
36+
nisi maiores repellat molestiae illum.
37+
</>
38+
}
39+
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
40+
heroLink="/pay.png"
41+
/>
42+
43+
<section className="space-y-8">
44+
<AccountAddressBasic />
45+
</section>
46+
<section className="space-y-8">
47+
<AccountAddressFormat />
48+
</section>
49+
<section className="space-y-8">
50+
<AccountNameBasic />
51+
</section>
52+
<section className="space-y-8">
53+
<AccountNameCustom />
54+
</section>
55+
<section className="space-y-8">
56+
<AccountBalanceBasic />
57+
</section>
58+
<section className="space-y-8">
59+
<AccountBalanceCustomToken />
60+
</section>
61+
<section className="space-y-8">
62+
<AccountBalanceFormat />
63+
</section>
64+
<section className="space-y-8">
65+
<AccountBalanceUSD />
66+
</section>
67+
<section className="space-y-8">
68+
<AccountAvatarBasic />
69+
</section>
70+
<section className="space-y-8">
71+
<AccountBlobbieBasic />
72+
</section>
73+
<section className="space-y-8">
74+
<ConnectDetailsButtonClone />
75+
</section>
76+
</main>
77+
</ThirdwebProvider>
78+
);
79+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,30 @@ export const navLinks: SidebarLink[] = [
8585
name: "Blockchain API",
8686
href: "/connect/blockchain-api",
8787
},
88+
{
89+
name: "Headless UI",
90+
expanded: true,
91+
links: [
92+
{
93+
name: "Account",
94+
href: "/connect/ui",
95+
},
96+
{
97+
name: "NFT",
98+
href: "/connect/ui/nft",
99+
},
100+
{
101+
name: "Token",
102+
href: "/connect/ui/Token",
103+
},
104+
{
105+
name: "Transaction",
106+
href: "/connect/ui/transaction",
107+
},
108+
{
109+
name: "Chain",
110+
href: "/connect/ui/chain",
111+
},
112+
],
113+
},
88114
];

‎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)