From f918c40ab74150d992b37b9f335aaee81db2f0c3 Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Sun, 28 Jul 2024 19:52:03 +1200 Subject: [PATCH] revamp --- src/app/Header.tsx | 6 +- src/app/connect/blockchain-api/page.mdx | 4 +- .../how-to/connect-users/page.mdx | 2 +- src/app/connect/page.mdx | 2 +- .../pay/buy-with-crypto/get-started/page.mdx | 2 +- src/app/connect/sidebar.tsx | 4 +- src/app/page.tsx | 8 +- src/app/react-native/v5/[...slug]/page.tsx | 17 + .../v5}/differences/page.mdx | 0 .../v5}/getting-started/page.mdx | 0 src/app/react-native/v5/layout.tsx | 39 ++ .../react-native => react-native/v5}/page.mdx | 6 +- src/app/react-native/v5/sidebar.tsx | 164 +++++++++ src/app/react/v5/[...slug]/page.tsx | 17 + .../v5}/components/AutoConnect/page.mdx | 4 +- .../images/connect-wallet-hero.webp | Bin .../v5}/components/ConnectButton/page.mdx | 0 .../_assets/ConnectEmbed-default.png | Bin .../_assets/ConnectEmbed-signin.png | Bin .../v5}/components/ConnectEmbed/page.mdx | 2 +- .../v5}/components/MediaRenderer/page.mdx | 0 .../v5}/components/TransactionButton/page.mdx | 0 .../TransactionButton/tx-button.png | Bin .../v5/react => react/v5}/components/page.mdx | 8 +- .../v5}/connecting-wallets/hooks/page.mdx | 0 .../v5}/connecting-wallets/page.mdx | 4 +- .../connecting-wallets/ui-components/page.mdx | 2 +- .../v5/react => react/v5}/extensions/page.mdx | 0 .../v5}/getting-started/page.mdx | 6 +- src/app/react/v5/layout.tsx | 39 ++ .../v5/react => react/v5}/page.mdx | 12 +- src/app/react/v5/reading-state/page.mdx | 23 ++ src/app/react/v5/sidebar.tsx | 200 ++++++++++ .../react => react/v5}/transactions/page.mdx | 25 -- .../references/components/TDoc/PageLayout.tsx | 2 +- src/app/typescript/v5/[...slug]/page.tsx | 17 + src/app/typescript/v5/auth/page.mdx | 2 +- src/app/typescript/v5/layout.tsx | 21 +- src/app/typescript/v5/migrate/page.mdx | 6 +- src/app/typescript/v5/page.mdx | 2 +- .../v5/react/ThirdwebProvider/page.mdx | 22 -- src/app/typescript/v5/sidebar.tsx | 344 +++++++++++------- .../v5/supported-wallets/[walletId]/page.tsx | 10 +- src/components/others/CustomAccordion.tsx | 2 +- src/components/others/Sidebar.tsx | 6 +- 45 files changed, 792 insertions(+), 238 deletions(-) create mode 100644 src/app/react-native/v5/[...slug]/page.tsx rename src/app/{typescript/v5/react-native => react-native/v5}/differences/page.mdx (100%) rename src/app/{typescript/v5/react-native => react-native/v5}/getting-started/page.mdx (100%) create mode 100644 src/app/react-native/v5/layout.tsx rename src/app/{typescript/v5/react-native => react-native/v5}/page.mdx (93%) create mode 100644 src/app/react-native/v5/sidebar.tsx create mode 100644 src/app/react/v5/[...slug]/page.tsx rename src/app/{typescript/v5/react => react/v5}/components/AutoConnect/page.mdx (85%) rename src/app/{typescript/v5/react => react/v5}/components/ConnectButton/images/connect-wallet-hero.webp (100%) rename src/app/{typescript/v5/react => react/v5}/components/ConnectButton/page.mdx (100%) rename src/app/{typescript/v5/react => react/v5}/components/ConnectEmbed/_assets/ConnectEmbed-default.png (100%) rename src/app/{typescript/v5/react => react/v5}/components/ConnectEmbed/_assets/ConnectEmbed-signin.png (100%) rename src/app/{typescript/v5/react => react/v5}/components/ConnectEmbed/page.mdx (94%) rename src/app/{typescript/v5/react => react/v5}/components/MediaRenderer/page.mdx (100%) rename src/app/{typescript/v5/react => react/v5}/components/TransactionButton/page.mdx (100%) rename src/app/{typescript/v5/react => react/v5}/components/TransactionButton/tx-button.png (100%) rename src/app/{typescript/v5/react => react/v5}/components/page.mdx (75%) rename src/app/{typescript/v5/react => react/v5}/connecting-wallets/hooks/page.mdx (100%) rename src/app/{typescript/v5/react => react/v5}/connecting-wallets/page.mdx (88%) rename src/app/{typescript/v5/react => react/v5}/connecting-wallets/ui-components/page.mdx (88%) rename src/app/{typescript/v5/react => react/v5}/extensions/page.mdx (100%) rename src/app/{typescript/v5/react => react/v5}/getting-started/page.mdx (94%) create mode 100644 src/app/react/v5/layout.tsx rename src/app/{typescript/v5/react => react/v5}/page.mdx (88%) create mode 100644 src/app/react/v5/reading-state/page.mdx create mode 100644 src/app/react/v5/sidebar.tsx rename src/app/{typescript/v5/react => react/v5}/transactions/page.mdx (60%) create mode 100644 src/app/typescript/v5/[...slug]/page.tsx delete mode 100644 src/app/typescript/v5/react/ThirdwebProvider/page.mdx diff --git a/src/app/Header.tsx b/src/app/Header.tsx index e2c81e75..17e35673 100644 --- a/src/app/Header.tsx +++ b/src/app/Header.tsx @@ -62,12 +62,12 @@ const sdkLinks = [ }, { name: "React", - href: "/typescript/v5/react", + href: "/react/v5", icon: "/icons/navbar/nav-icon-react.svg", }, { name: "React Native", - href: "/typescript/v5/react-native", + href: "/react-native/v5", icon: "/icons/navbar/nav-icon-react.svg", // icon: "/icons/navbar/nav-icon-react-native.svg", }, @@ -90,7 +90,7 @@ const sdkLinks = [ name: "Unreal", href: "/unreal", icon: "/icons/navbar/nav-icon-unreal.svg", - } + }, ]; const supportLinks = [ diff --git a/src/app/connect/blockchain-api/page.mdx b/src/app/connect/blockchain-api/page.mdx index 76923531..bf225b52 100644 --- a/src/app/connect/blockchain-api/page.mdx +++ b/src/app/connect/blockchain-api/page.mdx @@ -16,14 +16,14 @@ Perfomant, reliable and type safe API to read write to any contract on any EVM c diff --git a/src/app/connect/in-app-wallet/how-to/connect-users/page.mdx b/src/app/connect/in-app-wallet/how-to/connect-users/page.mdx index c40d6fe9..16dce71c 100644 --- a/src/app/connect/in-app-wallet/how-to/connect-users/page.mdx +++ b/src/app/connect/in-app-wallet/how-to/connect-users/page.mdx @@ -24,7 +24,7 @@ export const metadata = createMetadata({ ## Using the Connect UI components -If you're building a [React website](/typescript/v5/react/components/ConnectButton), [React Native app](/typescript/v5/react-native), or [Unity game](/unity/ConnectWallet) you can use the prebuilt connect UI components to authenticate users and connect their wallets. +If you're building a [React website](/typescript/react/v5/ConnectButton), [React Native app](/react-native/v5/), or [Unity game](/unity/ConnectWallet) you can use the prebuilt connect UI components to authenticate users and connect their wallets. diff --git a/src/app/connect/page.mdx b/src/app/connect/page.mdx index 64a4f16c..b6169ae0 100644 --- a/src/app/connect/page.mdx +++ b/src/app/connect/page.mdx @@ -36,7 +36,7 @@ Connect is the complete toolkit for connecting every user to your application. I /> {/* + - diff --git a/src/app/react-native/v5/[...slug]/page.tsx b/src/app/react-native/v5/[...slug]/page.tsx new file mode 100644 index 00000000..775d1833 --- /dev/null +++ b/src/app/react-native/v5/[...slug]/page.tsx @@ -0,0 +1,17 @@ +import { getTDocPage } from "@/app/references/components/TDoc/PageLayout"; +import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; + +const config = getTDocPage({ + sdkTitle: "TypeScript SDK", + getDoc: fetchTypeScriptDoc, + packageSlug: "typescript", + async getVersions() { + return ["v4", "v5"]; + }, + metadataIcon: "typescript", +}); + +export default config.default; +export const generateStaticParams = config.generateStaticParams; +export const generateMetadata = config.generateMetadata; +export const dynamic = config.dynamic; diff --git a/src/app/typescript/v5/react-native/differences/page.mdx b/src/app/react-native/v5/differences/page.mdx similarity index 100% rename from src/app/typescript/v5/react-native/differences/page.mdx rename to src/app/react-native/v5/differences/page.mdx diff --git a/src/app/typescript/v5/react-native/getting-started/page.mdx b/src/app/react-native/v5/getting-started/page.mdx similarity index 100% rename from src/app/typescript/v5/react-native/getting-started/page.mdx rename to src/app/react-native/v5/getting-started/page.mdx diff --git a/src/app/react-native/v5/layout.tsx b/src/app/react-native/v5/layout.tsx new file mode 100644 index 00000000..60925638 --- /dev/null +++ b/src/app/react-native/v5/layout.tsx @@ -0,0 +1,39 @@ +import { DocLayout } from "@/components/Layouts/DocLayout"; +import { createMetadata } from "@doc"; +import { sidebar } from "./sidebar"; +import { VersionSelector } from "../../../components/others/VersionSelector"; + +export default async function Layout(props: { children: React.ReactNode }) { + return ( + +

Connect SDK

+ + + } + > +
{props.children}
+ + ); +} + +export const metadata = createMetadata({ + title: "thirdweb React Native SDK", + description: + "A type-safe library to interact with any EVM-compatible blockchain in React Native applications", +}); diff --git a/src/app/typescript/v5/react-native/page.mdx b/src/app/react-native/v5/page.mdx similarity index 93% rename from src/app/typescript/v5/react-native/page.mdx rename to src/app/react-native/v5/page.mdx index b8fa5eb8..d0a61237 100644 --- a/src/app/typescript/v5/react-native/page.mdx +++ b/src/app/react-native/v5/page.mdx @@ -26,14 +26,14 @@ Many of the components and hooks in the React Native SDK use a [`client`](/types @@ -66,7 +66,7 @@ or clone the [expo-starter](https://github.com/thirdweb-dev/expo-starter) repo u diff --git a/src/app/react-native/v5/sidebar.tsx b/src/app/react-native/v5/sidebar.tsx new file mode 100644 index 00000000..0132e8fb --- /dev/null +++ b/src/app/react-native/v5/sidebar.tsx @@ -0,0 +1,164 @@ +import type { SideBar } from "../../../components/Layouts/DocLayout"; +import { ReactIcon } from "../../../icons"; +import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; +import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups"; + +const slug = "/react-native/v5"; +const docs = await fetchTypeScriptDoc("v5"); + +export const sidebar: SideBar = { + name: "Connect React Native SDK", + links: [ + { + icon: , + name: "React Native", + isCollapsible: false, + links: [ + { + separator: true, + }, + { + name: "Overview", + href: slug, + }, + { + name: "Getting Started", + href: `${slug}/getting-started`, + }, + { + name: "Differences from React", + href: `${slug}/differences`, + }, + { + name: "Core", + isCollapsible: false, + links: [ + { + name: "ThirdwebProvider", + href: `${slug}/ThirdwebProvider`, + }, + { + name: "Themes", + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@theme"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + ], + }, + { + name: "Wallets", + isCollapsible: false, + links: [ + { + name: "UI Components", + href: `${slug}/connecting-wallets/ui-components`, + links: + docs.components + ?.filter((hook) => { + // TODO should tag individual components + return hook.name.toLowerCase().includes("connect"); + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Connection Hooks", + href: `${slug}/connecting-wallets/hooks`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@walletConnection"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Wallet Hooks", + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@wallet"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + ], + }, + { + name: "Blockchain API", + isCollapsible: false, + links: [ + { + name: "UI Components", + links: + docs.components + ?.filter((hook) => { + // TODO should tag individual components + return !hook.name.toLowerCase().includes("connect"); + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Reading State", + href: `${slug}/reading-state`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@contract"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Transactions", + href: `${slug}/transactions`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@transaction"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Extensions", + href: `${slug}/extensions`, + }, + ], + }, + ], + }, + { + separator: true, + }, + { + name: "Full Reference", + href: "/references/typescript/v5/hooks", + isCollapsible: false, + }, + ], +}; diff --git a/src/app/react/v5/[...slug]/page.tsx b/src/app/react/v5/[...slug]/page.tsx new file mode 100644 index 00000000..775d1833 --- /dev/null +++ b/src/app/react/v5/[...slug]/page.tsx @@ -0,0 +1,17 @@ +import { getTDocPage } from "@/app/references/components/TDoc/PageLayout"; +import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; + +const config = getTDocPage({ + sdkTitle: "TypeScript SDK", + getDoc: fetchTypeScriptDoc, + packageSlug: "typescript", + async getVersions() { + return ["v4", "v5"]; + }, + metadataIcon: "typescript", +}); + +export default config.default; +export const generateStaticParams = config.generateStaticParams; +export const generateMetadata = config.generateMetadata; +export const dynamic = config.dynamic; diff --git a/src/app/typescript/v5/react/components/AutoConnect/page.mdx b/src/app/react/v5/components/AutoConnect/page.mdx similarity index 85% rename from src/app/typescript/v5/react/components/AutoConnect/page.mdx rename to src/app/react/v5/components/AutoConnect/page.mdx index fbed8028..ed92befe 100644 --- a/src/app/typescript/v5/react/components/AutoConnect/page.mdx +++ b/src/app/react/v5/components/AutoConnect/page.mdx @@ -27,8 +27,8 @@ Automatically connects the last connected wallet in the case a user reloads the This component has no UI, simply mount it anywher in your app to trigger the auto connection flow on page load. -If you are using [`ConnectButton`](/typescript/v5/react/components/ConnectButton) -or [`ConnectEmbed`](/typescript/v5/react/components/ConnectEmbed) components, You don't need to use this component because it is already included. +If you are using [`ConnectButton`](/react/v5/ConnectButton) +or [`ConnectEmbed`](/react/v5/ConnectEmbed) components, You don't need to use this component because it is already included. diff --git a/src/app/typescript/v5/react/components/ConnectButton/images/connect-wallet-hero.webp b/src/app/react/v5/components/ConnectButton/images/connect-wallet-hero.webp similarity index 100% rename from src/app/typescript/v5/react/components/ConnectButton/images/connect-wallet-hero.webp rename to src/app/react/v5/components/ConnectButton/images/connect-wallet-hero.webp diff --git a/src/app/typescript/v5/react/components/ConnectButton/page.mdx b/src/app/react/v5/components/ConnectButton/page.mdx similarity index 100% rename from src/app/typescript/v5/react/components/ConnectButton/page.mdx rename to src/app/react/v5/components/ConnectButton/page.mdx diff --git a/src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-default.png b/src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-default.png similarity index 100% rename from src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-default.png rename to src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-default.png diff --git a/src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-signin.png b/src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-signin.png similarity index 100% rename from src/app/typescript/v5/react/components/ConnectEmbed/_assets/ConnectEmbed-signin.png rename to src/app/react/v5/components/ConnectEmbed/_assets/ConnectEmbed-signin.png diff --git a/src/app/typescript/v5/react/components/ConnectEmbed/page.mdx b/src/app/react/v5/components/ConnectEmbed/page.mdx similarity index 94% rename from src/app/typescript/v5/react/components/ConnectEmbed/page.mdx rename to src/app/react/v5/components/ConnectEmbed/page.mdx index e6de8a89..567c4e9b 100644 --- a/src/app/typescript/v5/react/components/ConnectEmbed/page.mdx +++ b/src/app/react/v5/components/ConnectEmbed/page.mdx @@ -25,7 +25,7 @@ export const metadata = createMetadata({ # ConnectEmbed -ConnectEmbed component renders a UI to connect to various wallets. It renders the same UI as the [`ConnectButton`](/typescript/v5/react/components/ConnectButton) component's Modal UI. +ConnectEmbed component renders a UI to connect to various wallets. It renders the same UI as the [`ConnectButton`](/react/v5/ConnectButton) component's Modal UI. This is really useful for Implementing a "Sign in" page by embedding the UI for connecting wallets directly in the page instead of showing inside a modal. diff --git a/src/app/typescript/v5/react/components/MediaRenderer/page.mdx b/src/app/react/v5/components/MediaRenderer/page.mdx similarity index 100% rename from src/app/typescript/v5/react/components/MediaRenderer/page.mdx rename to src/app/react/v5/components/MediaRenderer/page.mdx diff --git a/src/app/typescript/v5/react/components/TransactionButton/page.mdx b/src/app/react/v5/components/TransactionButton/page.mdx similarity index 100% rename from src/app/typescript/v5/react/components/TransactionButton/page.mdx rename to src/app/react/v5/components/TransactionButton/page.mdx diff --git a/src/app/typescript/v5/react/components/TransactionButton/tx-button.png b/src/app/react/v5/components/TransactionButton/tx-button.png similarity index 100% rename from src/app/typescript/v5/react/components/TransactionButton/tx-button.png rename to src/app/react/v5/components/TransactionButton/tx-button.png diff --git a/src/app/typescript/v5/react/components/page.mdx b/src/app/react/v5/components/page.mdx similarity index 75% rename from src/app/typescript/v5/react/components/page.mdx rename to src/app/react/v5/components/page.mdx index 1cb35fd2..f94eabe5 100644 --- a/src/app/typescript/v5/react/components/page.mdx +++ b/src/app/react/v5/components/page.mdx @@ -8,28 +8,28 @@ import { ComponentIcon } from "lucide-react"; diff --git a/src/app/typescript/v5/react/connecting-wallets/hooks/page.mdx b/src/app/react/v5/connecting-wallets/hooks/page.mdx similarity index 100% rename from src/app/typescript/v5/react/connecting-wallets/hooks/page.mdx rename to src/app/react/v5/connecting-wallets/hooks/page.mdx diff --git a/src/app/typescript/v5/react/connecting-wallets/page.mdx b/src/app/react/v5/connecting-wallets/page.mdx similarity index 88% rename from src/app/typescript/v5/react/connecting-wallets/page.mdx rename to src/app/react/v5/connecting-wallets/page.mdx index cd2ea2ac..1617efc9 100644 --- a/src/app/typescript/v5/react/connecting-wallets/page.mdx +++ b/src/app/react/v5/connecting-wallets/page.mdx @@ -32,13 +32,13 @@ Use the prebuilt UI components or create your own UX with hooks to connect walle title="Using UI Components" icon={ComponentIcon} description="Prebuilt UI components for connecting wallets" - href="/typescript/v5/react/connecting-wallets/ui-components" + href="/react/v5/connecting-wallets/ui-components" /> diff --git a/src/app/typescript/v5/react/connecting-wallets/ui-components/page.mdx b/src/app/react/v5/connecting-wallets/ui-components/page.mdx similarity index 88% rename from src/app/typescript/v5/react/connecting-wallets/ui-components/page.mdx rename to src/app/react/v5/connecting-wallets/ui-components/page.mdx index 6127dea2..ad905c48 100644 --- a/src/app/typescript/v5/react/connecting-wallets/ui-components/page.mdx +++ b/src/app/react/v5/connecting-wallets/ui-components/page.mdx @@ -17,7 +17,7 @@ export const metadata = createMetadata({ ## Using Components -You can use [`ConnectButton`](/typescript/v5/react/components/ConnectButton) or [`ConnectEmbed`](/typescript/v5/react/components/ConnectEmbed) component for a quick, easy and customizable UI. +You can use [`ConnectButton`](/react/v5/ConnectButton) or [`ConnectEmbed`](/react/v5/ConnectEmbed) component for a quick, easy and customizable UI. These components provide a beautiful UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app. diff --git a/src/app/typescript/v5/react/extensions/page.mdx b/src/app/react/v5/extensions/page.mdx similarity index 100% rename from src/app/typescript/v5/react/extensions/page.mdx rename to src/app/react/v5/extensions/page.mdx diff --git a/src/app/typescript/v5/react/getting-started/page.mdx b/src/app/react/v5/getting-started/page.mdx similarity index 94% rename from src/app/typescript/v5/react/getting-started/page.mdx rename to src/app/react/v5/getting-started/page.mdx index 1321314b..e25c0f11 100644 --- a/src/app/typescript/v5/react/getting-started/page.mdx +++ b/src/app/react/v5/getting-started/page.mdx @@ -107,7 +107,7 @@ function App() { The `ConnectButton` and `ConnectEmbed` components come with built-in support for 350+ of wallets, 2000+ chains, fiat on-ramping, crypto swapping, transaction tracking, and more. -You can also build your own custom button using the [`useConnect`](/typescript/v5/react/) hook. +You can also build your own custom button using the [`useConnect`](/react/v5/useConnect) hook. @@ -160,7 +160,7 @@ export default function App() { } ``` -Using [Extensions](/typescript/v5/react/extensions) you can do powerful queries like getting all the owned NFTs of a specific address, and generate performant typesafe functions for your contract. +Using [Extensions](/react/v5/extensions) you can do powerful queries like getting all the owned NFTs of a specific address, and generate performant typesafe functions for your contract. ```tsx import { client } from "./client"; @@ -215,7 +215,7 @@ export default function App() { } ``` -Using [Extensions](/typescript/v5/react/extensions) you can do more complex transactions like a claim, batch mint, and more. These will handle all the preprocessing needed before calling the contract. +Using [Extensions](/react/v5/extensions) you can do more complex transactions like a claim, batch mint, and more. These will handle all the preprocessing needed before calling the contract. ```tsx import { client } from "./client"; diff --git a/src/app/react/v5/layout.tsx b/src/app/react/v5/layout.tsx new file mode 100644 index 00000000..c1f7c5b3 --- /dev/null +++ b/src/app/react/v5/layout.tsx @@ -0,0 +1,39 @@ +import { DocLayout } from "@/components/Layouts/DocLayout"; +import { createMetadata } from "@doc"; +import { sidebar } from "./sidebar"; +import { VersionSelector } from "../../../components/others/VersionSelector"; + +export default async function Layout(props: { children: React.ReactNode }) { + return ( + +

Connect SDK

+ + + } + > +
{props.children}
+ + ); +} + +export const metadata = createMetadata({ + title: "thirdweb TypeScript SDK", + description: + "A type-safe library to interact with any EVM-compatible blockchain in both Node.js and the browser.", +}); diff --git a/src/app/typescript/v5/react/page.mdx b/src/app/react/v5/page.mdx similarity index 88% rename from src/app/typescript/v5/react/page.mdx rename to src/app/react/v5/page.mdx index 3a1a625f..ed86446d 100644 --- a/src/app/typescript/v5/react/page.mdx +++ b/src/app/react/v5/page.mdx @@ -19,12 +19,12 @@ import { TypeScriptIcon } from "@/icons"; ## Quickstart -Follow this [guide](/typescript/v5/react/getting-started) to get started with the React SDK. +Follow this [guide](/react/v5/getting-started) to get started with the React SDK. @@ -69,14 +69,14 @@ Many of the components and hooks in the React SDK use a [`client`](/typescript/v @@ -90,14 +90,14 @@ Many of the components and hooks in the React SDK use a [`client`](/typescript/v diff --git a/src/app/react/v5/reading-state/page.mdx b/src/app/react/v5/reading-state/page.mdx new file mode 100644 index 00000000..d0f050bd --- /dev/null +++ b/src/app/react/v5/reading-state/page.mdx @@ -0,0 +1,23 @@ +# Read contract state + +Reading contract state in react is done via the `useReadContract` hook. The hook returns a React Query `data`, `isLoading`, and other useful state that you can use to render your component. + +```ts +import { getContract } from "thirdweb"; +import { useReadContract } from "thirdweb/react"; + +const contract = getContract({ + client, + chain, + address: "0x...", +}); + +const MyComponent = () => { + const { data, isLoading } = useReadContract({ + contract, + method: "function tokenURI(uint256 tokenId) returns (string)", + params: [1n], + }); +}; +``` + diff --git a/src/app/react/v5/sidebar.tsx b/src/app/react/v5/sidebar.tsx new file mode 100644 index 00000000..901aaeae --- /dev/null +++ b/src/app/react/v5/sidebar.tsx @@ -0,0 +1,200 @@ +import type { SideBar } from "../../../components/Layouts/DocLayout"; +import { ReactIcon } from "../../../icons"; +import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; +import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups"; + +const slug = "/react/v5"; +const docs = await fetchTypeScriptDoc("v5"); + +export const sidebar: SideBar = { + name: "Connect React SDK", + links: [ + { + icon: , + name: "React", + isCollapsible: false, + links: [ + { + separator: true, + }, + { + name: "Overview", + href: slug, + }, + { + name: "Getting Started", + href: `${slug}/getting-started`, + }, + { + name: "Core", + isCollapsible: false, + links: [ + { + name: "ThirdwebProvider", + href: `${slug}/ThirdwebProvider`, + }, + { + name: "Themes", + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@theme"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + ], + }, + { + name: "Wallets", + isCollapsible: false, + links: [ + { + name: "UI Components", + href: `${slug}/connecting-wallets/ui-components`, + links: + docs.components + ?.filter((hook) => { + // TODO should tag individual components + return hook.name.toLowerCase().includes("connect"); + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Connection Hooks", + href: `${slug}/connecting-wallets/hooks`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@walletConnection"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Wallet Hooks", + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@wallet"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + ], + }, + { + name: "Pay", + isCollapsible: false, + links: [ + { + name: "UI Components", + href: `${slug}/connecting-wallets/ui-components`, + links: ["PayEmbed"].map((name) => ({ + name, + href: `${slug}/${name}`, + })), + }, + { + name: "Buy with Fiat", + links: + docs.hooks + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@buyCrypto" && f.name.includes("Fiat"); + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + { + name: "Buy with Crypto", + links: + docs.hooks + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@buyCrypto" && f.name.includes("Crypto"); + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + ], + }, + { + name: "Blockchain API", + isCollapsible: false, + links: [ + { + name: "UI Components", + links: + docs.components + ?.filter((hook) => { + // TODO should tag individual components + return !hook.name.toLowerCase().includes("connect"); + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Reading State", + href: `${slug}/reading-state`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@contract"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Transactions", + href: `${slug}/transactions`, + links: + docs.hooks + ?.filter((hook) => { + const [tag] = getCustomTag(hook) || []; + return tag === "@transaction"; + }) + ?.map((hook) => ({ + name: hook.name, + href: `${slug}/${hook.name}`, + })) || [], + }, + { + name: "Extensions", + href: `${slug}/extensions`, + }, + ], + }, + ], + }, + { + separator: true, + }, + { + name: "Full Reference", + href: "/references/typescript/v5", + isCollapsible: false, + }, + ], +}; diff --git a/src/app/typescript/v5/react/transactions/page.mdx b/src/app/react/v5/transactions/page.mdx similarity index 60% rename from src/app/typescript/v5/react/transactions/page.mdx rename to src/app/react/v5/transactions/page.mdx index 15a8637e..a30a12e0 100644 --- a/src/app/typescript/v5/react/transactions/page.mdx +++ b/src/app/react/v5/transactions/page.mdx @@ -1,30 +1,5 @@ # Transactions -## Read contract state - -Reading contract state in react is done via the `useReadContract` hook. The hook returns a React Query `data`, `isLoading`, and other useful state that you can use to render your component. - -```ts -import { getContract } from "thirdweb"; -import { useReadContract } from "thirdweb/react"; - -const contract = getContract({ - client, - chain, - address: "0x...", -}); - -const MyComponent = () => { - const { data, isLoading } = useReadContract({ - contract, - method: "function tokenURI(uint256 tokenId) returns (string)", - params: [1n], - }); -}; -``` - -## Send transactions - Sending a transaction in react is done via the `useSendTransaction` hook. The hook returns a React Query `mutate` function that you can call with a transaction object created with `prepareContractCall` or `prepareTransaction`. Note that unlike in TypeScript core, `useSendTransaction` does not require passing the active `Account`, it will used the current active account from the React context. diff --git a/src/app/references/components/TDoc/PageLayout.tsx b/src/app/references/components/TDoc/PageLayout.tsx index 30777a62..0f21c0a8 100644 --- a/src/app/references/components/TDoc/PageLayout.tsx +++ b/src/app/references/components/TDoc/PageLayout.tsx @@ -34,7 +34,7 @@ export function getTDocPage(options: { const { getDoc, sdkTitle, packageSlug, getVersions, metadataIcon } = options; async function Page(props: PageProps) { - const version = props.params.version; + const version = props.params.version ?? "v5"; const doc = await getDoc(version); const slugToDoc = getSlugToDocMap(doc); const docSlug = props.params.slug?.join("/"); diff --git a/src/app/typescript/v5/[...slug]/page.tsx b/src/app/typescript/v5/[...slug]/page.tsx new file mode 100644 index 00000000..775d1833 --- /dev/null +++ b/src/app/typescript/v5/[...slug]/page.tsx @@ -0,0 +1,17 @@ +import { getTDocPage } from "@/app/references/components/TDoc/PageLayout"; +import { fetchTypeScriptDoc } from "@/app/references/components/TDoc/fetchDocs/fetchTypeScriptDoc"; + +const config = getTDocPage({ + sdkTitle: "TypeScript SDK", + getDoc: fetchTypeScriptDoc, + packageSlug: "typescript", + async getVersions() { + return ["v4", "v5"]; + }, + metadataIcon: "typescript", +}); + +export default config.default; +export const generateStaticParams = config.generateStaticParams; +export const generateMetadata = config.generateMetadata; +export const dynamic = config.dynamic; diff --git a/src/app/typescript/v5/auth/page.mdx b/src/app/typescript/v5/auth/page.mdx index 3ccd29bc..50f634c0 100644 --- a/src/app/typescript/v5/auth/page.mdx +++ b/src/app/typescript/v5/auth/page.mdx @@ -10,7 +10,7 @@ Using [`EIP-4361`](https://eips.ethereum.org/EIPS/eip-4361) (Sign in with Ethere If you're using React, Auth integrates directly with our built-in - [ConnectButton component](/typescript/v5/react/components/ConnectButton). This + [ConnectButton component](/react/v5/ConnectButton). This handles things like caching, error handling, and retries for you. diff --git a/src/app/typescript/v5/layout.tsx b/src/app/typescript/v5/layout.tsx index b646b4f9..642e3d89 100644 --- a/src/app/typescript/v5/layout.tsx +++ b/src/app/typescript/v5/layout.tsx @@ -1,14 +1,31 @@ import { DocLayout } from "@/components/Layouts/DocLayout"; import { createMetadata } from "@doc"; import { sidebar } from "./sidebar"; -import { TypeScriptVersionSelector } from "../../../components/others/VersionSelector"; +import { VersionSelector } from "../../../components/others/VersionSelector"; export default async function Layout(props: { children: React.ReactNode }) { return ( } + sidebarHeader={ +
+

Connect SDK

+ +
+ } >
{props.children}
 diff --git a/src/app/typescript/v5/migrate/page.mdx b/src/app/typescript/v5/migrate/page.mdx index 3c2873bf..9392140f 100644 --- a/src/app/typescript/v5/migrate/page.mdx +++ b/src/app/typescript/v5/migrate/page.mdx @@ -83,7 +83,7 @@ const onClick = async () => { | Task | `@thirdweb-dev/react` | `thirdweb` | | ---------------------| ----------------------------------------------------- | --------------------------------------------------- | -| Provider | `import { ThirdwebProvider} from @thirdweb-dev/react` | [`import { ThirdwebProvider } from "thirdweb/react"`](/typescript/v5/react/ThirdwebProvider) | +| Provider | `import { ThirdwebProvider} from @thirdweb-dev/react` | [`import { ThirdwebProvider } from "thirdweb/react"`](/react/v5/ThirdwebProvider) | | Contract | `useContract(...)` | [`getContract(...) // not a hook`](/references/typescript/v5/getContract) | | Address | `useAddress(...)` | [`useActiveAccount(...) // account?.address`](/references/typescript/v5/useActiveAccount) | | Read | `useContractRead(...)` | [`useReadContract(...)`](/references/typescript/v5/useReadContract) | @@ -91,8 +91,8 @@ const onClick = async () => { | Extensions | `useNFTs(...)` | [`useReadContract(getNFTs, { ... })`](/references/typescript/v5/useReadContract) | | Get Signer | `useSigner()` | [`useActiveAccount()`](/references/typescript/v5/useActiveAccount) | | Get Wallet | `useWallet()` | [`useActiveWallet()`](/references/typescript/v5/useActiveWallet) | -| Button | `Web3Button` | [`TransactionButton`](/typescript/v5/react/components/TransactionButton) | -| Connect | `ConnectWallet` | [`ConnectButton`](/typescript/v5/react/components/ConnectButton) | +| Button | `Web3Button` | [`TransactionButton`](/react/v5/TransactionButton) | +| Connect | `ConnectWallet` | [`ConnectButton`](/react/v5/ConnectButton) | | Connection Status | `useConnectionStatus()` | [`useActiveWalletConnectionStatus()`](/references/typescript/v5/useActiveWalletConnectionStatus) | | Switch Chain | `useSwitchChain()` | [`useSwitchActiveWalletChain()`](/references/typescript/v5/useSwitchActiveWalletChain) | | Get Connected Chain | `useChain()` | [`useSwitchActiveWalletChain()`](/references/typescript/v5/useSwitchActiveWalletChain) | diff --git a/src/app/typescript/v5/page.mdx b/src/app/typescript/v5/page.mdx index b7c7db14..aa95ebc8 100644 --- a/src/app/typescript/v5/page.mdx +++ b/src/app/typescript/v5/page.mdx @@ -137,7 +137,7 @@ Performant & lightweight SDK to interact with any EVM chain from Node, React and diff --git a/src/app/typescript/v5/react/ThirdwebProvider/page.mdx b/src/app/typescript/v5/react/ThirdwebProvider/page.mdx deleted file mode 100644 index 0b75679e..00000000 --- a/src/app/typescript/v5/react/ThirdwebProvider/page.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import { createMetadata } from "@doc"; - -export const metadata = createMetadata({ - title: "ThirdwebProvider | thirdweb React SDK", - description: "API Reference for the ThirdwebProvider component", -}); - -# ThirdwebProvider - -`ThirdwebProvider` is a light-weight component that sets up React Query context for thirdweb SDK hooks. It takes no props. All wallet and auth management is handled on the wallets themselves. - -```tsx -import { ThirdwebProvider } from "thirdweb/react"; - -function AppWithProvider() { - return ( - - - - ); -} -``` diff --git a/src/app/typescript/v5/sidebar.tsx b/src/app/typescript/v5/sidebar.tsx index 43411aef..eca4024e 100644 --- a/src/app/typescript/v5/sidebar.tsx +++ b/src/app/typescript/v5/sidebar.tsx @@ -4,29 +4,27 @@ import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/f import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups"; const slug = "/typescript/v5"; -const reactSlug = `${slug}/react`; -const reactNativeSlug = `${slug}/react-native`; const docs = await fetchTypeScriptDoc("v5"); export const sidebar: SideBar = { - name: "Connect", + name: "Connect Typescript SDK", links: [ - { - name: "Overview", - href: slug, - }, - { - name: "Why thirdweb?", - href: `${slug}/why-thirdweb`, - }, - { - separator: true, - }, { icon: , name: "TypeScript", isCollapsible: false, links: [ + { + separator: true, + }, + { + name: "Overview", + href: slug, + }, + { + name: "Why thirdweb?", + href: `${slug}/why-thirdweb`, + }, { name: "Core", isCollapsible: false, @@ -34,14 +32,34 @@ export const sidebar: SideBar = { { name: "Client", href: `${slug}/client`, + links: ["createThirdwebClient"].map((name) => ({ + name, + href: `${slug}/${name}`, + })), }, { name: "Storage", href: `${slug}/storage`, + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@storage"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], }, { name: "Adapters", href: `${slug}/adapters`, + links: ["viemAdapter", "ethers6Adapter", "ethers5Adapter"].map( + (name) => ({ + name, + href: `${slug}/${name}`, + }), + ), }, ], }, @@ -53,21 +71,110 @@ export const sidebar: SideBar = { name: "Accounts & Wallets", href: `${slug}/wallets`, }, - { - name: "Connecting wallets", - href: `${slug}/connecting-wallets`, - }, { name: "Supported Wallets", href: `${slug}/supported-wallets`, }, + { + name: "External Wallets", + links: [ + "createWallet", + "createWalletAdapter", + "privateKeyToAccount", + "generateAccount", + "injectedProvider", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), + }, + { + name: "In-App Wallets", + links: [ + "inAppWallet", + "preAuthenticate", + "getUserEmail", + "getUserPhoneNumber", + "hasStoredPasskey", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), + }, + { + name: "Ecosystem Wallets", + links: [ + "ecosystemWallet", + "preAuthenticate", + "getUserEmail", + "getUserPhoneNumber", + "hasStoredPasskey", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), + }, + { + name: "Account Abstraction", + links: [ + "smartWallet", + "createUnsignedUserOp", + "signUserOp", + "bundleUserOp", + "waitForUserOpReceipt", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), + }, { name: "Auth (SIWE)", href: `${slug}/auth`, + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@auth"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + ], + }, + { + name: "Pay", + isCollapsible: false, + links: [ + { + name: "Buy with Fiat", + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@buyCrypto" && f.name.includes("Fiat"); + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], + }, + { + name: "Buy with Crypto", + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@buyCrypto" && f.name.includes("Crypto"); + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], }, ], }, - { name: "Blockchain API", isCollapsible: false, @@ -75,22 +182,76 @@ export const sidebar: SideBar = { { name: "Chain", href: `${slug}/chain`, + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@chain"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], }, { name: "Contract", href: `${slug}/contract`, + links: [ + { + name: "getContract", + href: `${slug}/getContract`, + }, + ], }, { name: "Reading state", href: `${slug}/transactions/read`, + links: [ + { + name: "readContract", + href: `${slug}/readContract`, + }, + { + name: "prepareEvent", + href: `${slug}/prepareEvent`, + }, + { + name: "getContractEvents", + href: `${slug}/getContractEvents`, + }, + ], }, { name: "Preparing transactions", href: `${slug}/transactions/prepare`, + links: [ + "prepareContractCall", + "prepareTransaction", + "encode", + "signTransaction", + "simulateTransaction", + "estimateGas", + "estimateGasCost", + "toSerializableTransaction", + "serializeTransaction", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), }, { name: "Sending transactions", href: `${slug}/transactions/send`, + links: [ + "sendTransaction", + "sendAndConfirmTransaction", + "sendBatchTransaction", + "waitForReceipt", + "getTransactionStore", + ].map((name) => ({ + name, + href: `${slug}/${name}`, + })), }, { name: "Extensions", @@ -114,127 +275,40 @@ export const sidebar: SideBar = { }, ], }, - ], - }, - { - name: "Full Reference", - href: "/references/typescript/v5", - }, - { - separator: true, - }, - ], - }, - { - icon: , - name: "React", - isCollapsible: false, - links: [ - { - name: "Overview", - href: reactSlug, - }, - { - name: "Getting Started", - href: `${reactSlug}/getting-started`, - }, - { - name: "Core", - isCollapsible: false, - links: [ - { - name: "ThirdwebProvider", - href: `${reactSlug}/ThirdwebProvider`, - }, - ], - }, - { - name: "Wallets", - isCollapsible: false, - links: [ - { - name: "ConnectButton", - href: `${reactSlug}/components/ConnectButton`, - }, - { - name: "ConnectEmbed", - href: `${reactSlug}/components/ConnectEmbed`, - }, { - name: "AutoConnect", - href: `${reactSlug}/components/AutoConnect`, + name: "RPC", + links: + docs.functions + ?.filter((f) => { + const [tag] = getCustomTag(f) || []; + return tag === "@rpc"; + }) + ?.map((f) => ({ + name: f.name, + href: `${slug}/${f.name}`, + })) || [], }, { - name: "Components", - href: `${reactSlug}/components`, - links: docs.components?.map((hook) => ({ - name: hook.name, - href: hook.name, + name: "Utils", + links: [ + "toEther", + "toTokens", + "toWei", + "toUnits", + "shortenAddress", + "shortenHex", + "encodeAbiParameters", + "encodePacked", + "sha256", + "keccak256", + "keccakId", + ].map((name) => ({ + name, + href: `${slug}/${name}`, })), }, - { - name: "Hooks", - href: `${reactSlug}/connecting-wallets/hooks`, - links: docs.hooks - ?.filter((hook) => { - const [tag] = getCustomTag(hook) || []; - return tag === "@walletConnection"; - }) - .map((hook) => ({ - name: hook.name, - href: hook.name, - })), - }, ], }, - { - name: "Blockchain API", - isCollapsible: false, - links: [ - { - name: "Transactions Hooks", - href: `${reactSlug}/transactions`, - }, - { - name: "Extensions", - href: `${reactSlug}/extensions`, - }, - { - name: "TransactionButton", - href: `${reactSlug}/components/TransactionButton`, - }, - { - name: "MediaRenderer", - href: `${reactSlug}/components/MediaRenderer`, - }, - ], - }, - { - name: "Full Reference", - href: "/references/typescript/v5/hooks", - }, - ], - }, - { - separator: true, - }, - { - icon: , - name: "React Native", - isCollapsible: false, - links: [ - { - name: "Overview", - href: reactNativeSlug, - }, - { - name: "Getting started", - href: `${reactNativeSlug}/installation`, - }, - { - name: "Differences from React", - href: `${reactNativeSlug}/differences`, - }, ], }, { @@ -247,5 +321,9 @@ export const sidebar: SideBar = { { separator: true, }, + { + name: "Full Reference", + href: "/references/typescript/v5", + }, ], }; diff --git a/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx b/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx index 92145ee2..97b135c1 100644 --- a/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx +++ b/src/app/typescript/v5/supported-wallets/[walletId]/page.tsx @@ -156,18 +156,12 @@ export default async function Page(props: PageProps) { You can add this wallet in the{" "} - + {" "} ConnectButton{" "} {" "} or - + {" "} ConnectEmbed{" "} {" "} diff --git a/src/components/others/CustomAccordion.tsx b/src/components/others/CustomAccordion.tsx index 9c2959f1..a81ecca7 100644 --- a/src/components/others/CustomAccordion.tsx +++ b/src/components/others/CustomAccordion.tsx @@ -96,7 +96,7 @@ export function CustomAccordion(props: CustomAccordionProps) { setIsOpen((c) => !c); }} className={cn( - "flex flex-1 items-center gap-3 py-4 w-full cursor-pointer", + "flex flex-1 items-center gap-3 w-full cursor-pointer", props.triggerContainerClassName, props.chevronPosition === "right" ? "justify-between flex-row-reverse" diff --git a/src/components/others/Sidebar.tsx b/src/components/others/Sidebar.tsx index 91dd9888..517df014 100644 --- a/src/components/others/Sidebar.tsx +++ b/src/components/others/Sidebar.tsx @@ -109,7 +109,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) { href={link.href} onClick={props.onLinkClick} className={clsx( - "overflow-hidden text-ellipsis py-2 text-base font-medium transition-colors duration-300 hover:text-f-100", + "overflow-hidden text-ellipsis py-1 text-base font-medium transition-colors duration-300 hover:text-f-100", isActive ? "font-medium text-accent-500" : "text-f-300", "flex flex-row gap-1", )} @@ -201,7 +201,7 @@ function DocSidebarCategory(props: { "text-f-300 hover:text-f-100", )} > -
+
{icon && } {name}
@@ -220,7 +220,7 @@ function DocSidebarCategory(props: {