From fa26eefc914b107fddd90bdd42f52080945e88bc Mon Sep 17 00:00:00 2001 From: jnsdls Date: Thu, 19 Dec 2024 19:20:24 +0000 Subject: [PATCH] CORE-659 - rewrite templates to framer (#5808) closes: CORE-659 --- apps/dashboard/framer-rewrites.js | 3 + apps/dashboard/redirects.js | 6 + .../homepage/sections/GetStartedSection.tsx | 59 -- .../product-pages/common/ProductButton.tsx | 48 -- .../homepage/HomepageSection.tsx | 97 --- .../src/components/shared/GeneralCta.tsx | 52 -- apps/dashboard/src/page-id.ts | 6 - apps/dashboard/src/pages/template/[id].tsx | 721 ------------------ apps/dashboard/src/pages/templates.tsx | 478 ------------ apps/dashboard/src/tw-components/button.tsx | 2 +- 10 files changed, 10 insertions(+), 1462 deletions(-) delete mode 100644 apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx delete mode 100644 apps/dashboard/src/components/product-pages/common/ProductButton.tsx delete mode 100644 apps/dashboard/src/components/product-pages/homepage/HomepageSection.tsx delete mode 100644 apps/dashboard/src/components/shared/GeneralCta.tsx delete mode 100644 apps/dashboard/src/pages/template/[id].tsx delete mode 100644 apps/dashboard/src/pages/templates.tsx diff --git a/apps/dashboard/framer-rewrites.js b/apps/dashboard/framer-rewrites.js index e0d6cc2546d..9cd44ca676d 100644 --- a/apps/dashboard/framer-rewrites.js +++ b/apps/dashboard/framer-rewrites.js @@ -38,4 +38,7 @@ module.exports = [ "/community/startup-program", // -- grants -- "/grant/superchain", + // -- templates -- + "/templates", + "/templates/:template_slug", ]; diff --git a/apps/dashboard/redirects.js b/apps/dashboard/redirects.js index aa20dc708f2..70a8f256ae6 100644 --- a/apps/dashboard/redirects.js +++ b/apps/dashboard/redirects.js @@ -325,6 +325,12 @@ async function redirects() { destination: "/bounties", permanent: false, }, + // redirect /template/ to /templates/ + { + source: "/template/:slug", + destination: "/templates/:slug", + permanent: false, + }, ...legacyDashboardToTeamRedirects, ]; } diff --git a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx b/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx deleted file mode 100644 index c86796ba0c4..00000000000 --- a/apps/dashboard/src/components/homepage/sections/GetStartedSection.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Box, Flex, LightMode } from "@chakra-ui/react"; -import { ChakraNextImage } from "components/Image"; -import { HomepageSection } from "components/product-pages/homepage/HomepageSection"; -import { GeneralCta } from "components/shared/GeneralCta"; -import { Heading } from "tw-components"; -import WhiteLogo from "../../../../public/assets/landingpage/white-logo.png"; - -/** - * Highlights Call To Action for Start Building with ThirdWeb - */ -export const GetStartedSection = () => { - return ( - - -
-
- - - -
-
- - Get started with thirdweb - - - Build web3 apps with ease. Get instant access. - - - - - - - ); -}; diff --git a/apps/dashboard/src/components/product-pages/common/ProductButton.tsx b/apps/dashboard/src/components/product-pages/common/ProductButton.tsx deleted file mode 100644 index ac296111d58..00000000000 --- a/apps/dashboard/src/components/product-pages/common/ProductButton.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useTrack } from "hooks/analytics/useTrack"; -import { ZapIcon } from "lucide-react"; -import { - type ButtonProps, - LinkButton, - type LinkButtonProps, -} from "tw-components"; - -interface GeneralCtaProps extends Omit { - title: string; - href: string; - size?: ButtonProps["size"]; -} - -export const ProductButton: React.FC = ({ - title, - href, - ...props -}) => { - const trackEvent = useTrack(); - - return ( - } - w="full" - py="24px" - onClick={() => - trackEvent({ - category: "cta-button", - action: "click", - label: "start", - title, - }) - } - fontSize="20px" - fontWeight="bold" - textAlign="center" - borderRadius="md" - href={href} - isExternal={href.startsWith("http")} - _hover={{ opacity: 0.8 }} - noIcon - {...props} - > - {title} - - ); -}; diff --git a/apps/dashboard/src/components/product-pages/homepage/HomepageSection.tsx b/apps/dashboard/src/components/product-pages/homepage/HomepageSection.tsx deleted file mode 100644 index 7773beef57a..00000000000 --- a/apps/dashboard/src/components/product-pages/homepage/HomepageSection.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { Box, type BoxProps, Container } from "@chakra-ui/react"; -import type { ComponentWithChildren } from "types/component-with-children"; - -interface IHomepageSection extends BoxProps { - id?: string; - bottomPattern?: true; - isOverflowXHidden?: boolean; -} - -export const HomepageSection: ComponentWithChildren = ({ - children, - id, - bottomPattern, - isOverflowXHidden, - ...restBoxProps -}) => { - return ( - - - {children} - - {bottomPattern && ( - - - - - - - - - - - - - - - - - - - - - - - )} - - - ); -}; diff --git a/apps/dashboard/src/components/shared/GeneralCta.tsx b/apps/dashboard/src/components/shared/GeneralCta.tsx deleted file mode 100644 index e1e41de9d81..00000000000 --- a/apps/dashboard/src/components/shared/GeneralCta.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useTrack } from "hooks/analytics/useTrack"; -import { ZapIcon } from "lucide-react"; -import { - type ButtonProps, - LinkButton, - type LinkButtonProps, -} from "tw-components"; - -interface GeneralCtaProps extends Omit { - size?: ButtonProps["size"]; - title?: string; - href?: string; -} - -export const GeneralCta: React.FC = ({ - size = "md", - title = "Start building", - href = "/team", - ...props -}) => { - const trackEvent = useTrack(); - - return ( - - } - color="black" - px={size === "lg" ? 20 : 8} - py={size === "lg" ? { base: 5, md: 7 } : { base: 4, md: 6 }} - onClick={() => - trackEvent({ - category: "cta-button", - action: "click", - label: "start", - title, - }) - } - textAlign="center" - variant="gradient" - fromcolor="#1D64EF" - tocolor="#E0507A" - size={size} - borderRadius="md" - href={href} - {...props} - > - {title} - - ); -}; diff --git a/apps/dashboard/src/page-id.ts b/apps/dashboard/src/page-id.ts index bca0b14229a..2e271b7cf0f 100644 --- a/apps/dashboard/src/page-id.ts +++ b/apps/dashboard/src/page-id.ts @@ -7,12 +7,6 @@ export enum PageId { // marketing / growth pages // --------------------------------------------------------------------------- - // thirdweb.com/templates - Templates = "templates-page", - - // thirdweb.com/template/[templateId] - Template = "template-page", - // thirdweb.com/account-abstraction SmartWalletLanding = "smart-wallet-landing", diff --git a/apps/dashboard/src/pages/template/[id].tsx b/apps/dashboard/src/pages/template/[id].tsx deleted file mode 100644 index 529df7d6d67..00000000000 --- a/apps/dashboard/src/pages/template/[id].tsx +++ /dev/null @@ -1,721 +0,0 @@ -import { useForceDarkTheme } from "@/components/theme-provider"; -import { CopyButton } from "@/components/ui/CopyButton"; -import { Box, Flex, Image } from "@chakra-ui/react"; -import { ProductButton } from "components/product-pages/common/ProductButton"; -import { HomepageTopNav } from "components/product-pages/common/Topnav"; -import type { GetStaticPaths, GetStaticProps } from "next"; -import { PageId } from "page-id"; -import { type TemplateCardProps, templates } from "pages/templates"; -import { Fragment, type JSX } from "react"; -import { - Heading, - Link, - LinkButton, - Text, - TrackedLink, - TrackedLinkButton, -} from "tw-components"; -import type { ThirdwebNextPage } from "utils/types"; - -type TemplateContentsProps = { - overview: React.ReactNode; - featurePoints: React.ReactNode[]; - runningLocally?: React.ReactNode; -}; - -const CodeBlock: React.FC<{ text: string }> = (props) => { - return ( - - - {props.text} - - - - ); -}; - -const TemplateContents: React.FC = (props) => { - return ( - <> - - Overview - - - {props.overview} - - {props.featurePoints.length > 0 && ( - - {props.featurePoints.map((feature, idx) => ( - - {feature} - - ))} - - )} - - - Running locally - - - - {props.runningLocally} - - - ); -}; - -// Use the "id" fields from the templates array of objects to create a mapping of contents for each template id -const templateContents: Record<(typeof templates)[number]["id"], JSX.Element> = - { - erc721: ( - - A web and mobile friendly page for users to claim NFTs from a smart - contract implementing{" "} - - ERC721Claimable - - , such as the{" "} - - NFT Drop - - . - - } - featurePoints={[ - - Built with our{" "} - - React SDK - - . - , - "Uses Vite, TypeScript, and Tailwind.", - - Render NFT metadata with the{" "} - - NFT Renderer - {" "} - UI Component. - , - - Configure wallet options with the{" "} - - Connect Wallet Button - {" "} - UI Component. - , - - View - - contract metadata - {" "} - such as the name, remaining & total supply, description, etc. - , - - Claim NFTs from the smart contract under the criteria of{" "} - - claim phases - - . - , - "Compatible with all EVM chains.", - ]} - runningLocally={ -
- Deploy a new{" "} - - NFT Drop - {" "} - or import your existing one using the{" "} - - dashboard - - . -
-
- Configure your smart contract address and chain name in the{" "} - - consts/parameters.ts - {" "} - file. -
-
- Run the application from the command line: - - This will make the application available to preview at{" "} - - http://localhost:3000 - - . -
- } - /> - ), - "marketplace-v3": ( - - Create your own NFT marketplace where users can buy and sell NFTs - from your NFT collection. This template provides the foundation for - building an NFT marketplace application. - - } - featurePoints={[ - - Built with our{" "} - - React SDK - - . - , - "Uses Next.js, TypeScript, and CSS Modules.", - - Display all NFTs from your collection using the{" "} - - NFT Media Renderer - {" "} - UI component. - , - "Allow users to buy, sell and make offers on NFTs in your collection.", - "Supports both direct listings and english auction sales.", - "You control the platform fees of each sale made on the smart contract.", - "Compatible with all EVM chains.", - ]} - runningLocally={ -
- Deploy a new{" "} - - Marketplace V3 - {" "} - smart contract using the{" "} - - dashboard - - . -
-
- Configure your smart contract address and chain name in the{" "} - - const/contractAddresses.ts - {" "} - file. -
-
- Run the application from the command line: - - This will make the application available to preview at - - http://localhost:3000 - - . -
- } - /> - ), - "nft-gallery": ( - - Showcase your NFT collection with a gallery application that allows - users to view the metadata of all NFTs in your collection. - - } - featurePoints={[ - - Built with our{" "} - - React SDK - - . - , - "Uses Vite, TypeScript, and Tailwind.", - "Compatible with both ERC721 and ERC1155 NFT collections.", - - Display all NFTs from your collection using the{" "} - - NFT Media Renderer - {" "} - UI component. - , - "Search for NFTs by token ID, or paginate through all NFTs.", - "Compatible with all EVM chains.", - ]} - runningLocally={ -
- Deploy a new{" "} - - NFT collection - {" "} - or import your existing one using the - - dashboard - - . -
-
- Set your smart contract address and chain name in the{" "} - - consts/parameters.ts - - file. -
-
- Run the application from the command line:{" "} - - This will make the application available to preview at{" "} - - http://localhost:3000 - - . -
- } - /> - ), - }; - -type TemplatePageProps = { - template: TemplateCardProps; -}; - -const TemplatePage: ThirdwebNextPage = (props: TemplatePageProps) => { - const contents = templateContents[props.template.id]; - useForceDarkTheme(); - - return ( - - - - - - {`Screenshot - - - {props.template.title} - - - {props.template.description} - - - {props.template.tags.map((tag) => ( - - - {tag} - - - ))} - - - - - Author - - - {`Icon - - {props.template.authorENS} - - - - - - - - View Repo - - - - - - {`Screenshot - - {props.template.contractLink && ( - - - - This template is using - - - - {props.template.contractName} Contract - - - - - Deploy your own - - - )} - - - Get started - - - Kick start your project by copying this command into your CLI. - - - {contents} - - - - ); -}; - -export default TemplatePage; -TemplatePage.pageId = PageId.Template; - -// server side --------------------------------------------------------------- -export const getStaticProps: GetStaticProps = async ( - ctx, -) => { - try { - // Using the id from the context, we can fetch the data for the template from GitHub. - const { id } = ctx.params as { id: string }; - - const template = templates.find((t) => t.id === id); - - if (!template) { - return { - notFound: true, - }; - } - - return { - props: { - template, - }, - }; - } catch { - return { - notFound: true, - }; - } -}; - -export const getStaticPaths: GetStaticPaths = () => { - return { - fallback: false, - paths: templates.map((template) => ({ - params: { - id: template.id, - }, - })), - }; -}; diff --git a/apps/dashboard/src/pages/templates.tsx b/apps/dashboard/src/pages/templates.tsx deleted file mode 100644 index 5b5ee9922a1..00000000000 --- a/apps/dashboard/src/pages/templates.tsx +++ /dev/null @@ -1,478 +0,0 @@ -import { useForceDarkTheme } from "@/components/theme-provider"; -import { - Box, - Flex, - Image, - LinkBox, - LinkOverlay, - SimpleGrid, -} from "@chakra-ui/react"; -import { HomepageFooter } from "components/footer/Footer"; -import { GetStartedSection } from "components/homepage/sections/GetStartedSection"; -import { NewsletterSection } from "components/homepage/sections/NewsletterSection"; -import { HomepageTopNav } from "components/product-pages/common/Topnav"; -import { HomepageSection } from "components/product-pages/homepage/HomepageSection"; -import { NextSeo } from "next-seo"; -import { PageId } from "page-id"; -import { Heading, Text, TrackedLink } from "tw-components"; -import type { ThirdwebNextPage } from "utils/types"; - -export interface TemplateCardProps { - id: string; - title: string; - // Homepage is usually just .thirdweb-example.com, but just to be safe. - homepage: string; - // Repo is usually just github.com/thirdweb-example/, but just to be safe. - repo: string; - description: React.ReactNode; - img: string; - hoverBorderColor: string; - tags: string[]; - authorIcon: string; - authorENS: string; - contractName?: string; - contractLink?: string; -} - -export const templates: TemplateCardProps[] = [ - { - id: "unity-pioneer", - title: "Pioneer", - homepage: "https://thirdweb-example.github.io/unity-pioneer/", - repo: "https://github.com/thirdweb-example/unity-pioneer", - description: - "Unity template featuring Account Abstraction, Session Keys, and Storage", - img: "/assets/templates/unity-pioneer.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Unity"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "unity-take-flight", - title: "Take Flight", - homepage: "https://thirdweb-example.github.io/unity-take-flight/", - repo: "https://github.com/thirdweb-example/unity-take-flight", - description: - "Unity template with Account Abstraction, Social Logins, and Onchain Scoring", - img: "/assets/templates/unity-take-flight.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Unity"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "unity-blockventure", - title: "Blockventure", - homepage: "https://github.com/thirdweb-example/unity-blockventure", - repo: "https://github.com/thirdweb-example/unity-blockventure", - description: "Lite RPG Gathering, Shopping and Trading Systems.", - img: "/assets/templates/unity-blockventure.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Unity"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "unity-iap-client", - title: "Unity IAP Client", - homepage: - "https://blog.thirdweb.com/guides/enhancing-unity-iap-with-blockchain-interactions/", - repo: "https://github.com/thirdweb-example/unity-iap-client/", - description: - "Blockchain integration with Unity IAP and server side validation.", - img: "/assets/templates/unity-iap.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Engine", "Unity"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "unity-iap-server", - title: "Unity IAP Server", - homepage: - "https://blog.thirdweb.com/guides/enhancing-unity-iap-with-blockchain-interactions/", - repo: "https://github.com/thirdweb-example/unity-iap-server/", - description: - "Server implementation compatible with Unity IAP Apple and Google receipts", - img: "/assets/templates/unity-iap.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Engine", "Unity"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "mintcaster", - title: "Mintcaster", - homepage: "https://mintcaster.thirdweb-example.com/", - repo: "https://github.com/thirdweb-example/mintcaster/", - description: - "Bootstrap your own client on Farcaster — with a feed, cast functionality, and Sign-in with Farcaster auth. Add NFT minting functionality with thirdweb Engine.", - img: "/assets/templates/mintcaster.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Engine", "Farcaster"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "web3warriors", - title: "Web3 Warriors", - homepage: "https://web3warriors.thirdweb.com/", - repo: "https://blog.thirdweb.com/how-we-built-web3-warriors/", - description: "Dungeon crawler demo game built with thirdweb Unity SDK.", - img: "/assets/templates/web3-warriors.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Unity", "Gaming"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "catattacknft", - title: "Cat Attack", - homepage: "https://catattack.thirdweb.com", - repo: "https://github.com/thirdweb-example/catattacknft", - description: "Strategy demo game built with thirdweb SDKs.", - img: "/assets/templates/cat-attack.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["TypeScript", "Gaming"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "unreal_engine_demo", - title: "TappyFowl", - homepage: "https://tappyfowl.thirdweb.com/", - repo: "https://github.com/thirdweb-example/TappyFowl", - description: - "Flappy Bird inspired demo game using Unreal Engine and thirdweb Engine.", - img: "/assets/templates/tappyfowl.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Unreal", "Engine", "Gaming"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "phygital-experience", - title: "Phygital Experience", - homepage: "https://engine-phygital.vercel.app/qrs", - repo: "https://github.com/thirdweb-example/engine-phygital", - description: - "Allow users to scan a QR code received with a physical product to mint an NFT using thirdweb engine.", - img: "/assets/templates/phygital-experience.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["Engine", "ERC721"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "erc721", - title: "NFT Drop", - homepage: "https://nft-drop.thirdweb-example.com/", - repo: "https://github.com/thirdweb-example/nft-drop", - description: - "Allow users to claim tokens under the criteria of claim conditions to receive ERC721 NFT(s).", - img: "/assets/templates/nft-drop.png", - hoverBorderColor: "hsl(248deg 89% 79% / 15%)", - tags: ["ERC721", "Custom Claim Conditions"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - contractName: "NFTDrop", - contractLink: "/thirdweb.eth/DropERC721", - }, - { - id: "marketplace-v3", - title: "Marketplace", - homepage: "https://marketplace-v3.thirdweb-example.com/", - repo: "https://github.com/thirdweb-example/marketplace-v3", - description: - "Allow holders of your NFTs to trade in a marketplace with a built-in escrow and auctioning system.", - img: "/assets/templates/marketplace.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["Multi-currency", "Buy & Sell"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - contractName: "Marketplace", - contractLink: "/thirdweb.eth/MarketplaceV3", - }, - { - id: "nft-gated-website", - title: "NFT Gated Website", - homepage: "https://nft-gated-website.thirdweb-example.com/", - repo: "https://github.com/thirdweb-example/nft-gated-website", - description: - "Allow users to access your website only if they own a specific NFT.", - img: "/assets/templates/nft-gated-site.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["NFT", "React", "Loyalty"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "nft-gallery", - title: "NFT Gallery", - homepage: "https://nft-gallery.thirdweb-example.com/", - repo: "https://github.com/thirdweb-example/nft-gallery", - description: - "View the metadata of all NFTs in your collection, where you can filter and sort by traits & properties.", - img: "/assets/templates/nft-gallery.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["ERC721", "ERC1155"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "node-starter", - title: "Node Starter", - homepage: "", - repo: "https://github.com/thirdweb-example/node-starter", - description: - "Starter kit to build with Node and thirdweb without additional initial configuration.", - img: "/assets/templates/node-starter.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["Node", "TypeScript", "Starter"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "expo-starter", - title: "Expo Starter", - homepage: "", - repo: "https://github.com/thirdweb-example/expo-starter", - description: - "Starter kit to build with Expo and thirdweb without additional initial configuration.", - img: "/assets/templates/expo-starter.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["Expo", "TypeScript", "React-Native", "Starter"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "vite-starter", - title: "Vite Starter", - homepage: "https://vite-starter.thirdweb-example.com", - repo: "https://github.com/thirdweb-example/vite-starter", - description: - "Starter kit to build with Vite and thirdweb without additional initial configuration.", - img: "/assets/templates/vite-starter.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["Vite", "Starter"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, - { - id: "next-starter", - title: "Next Starter", - homepage: "https://next-starter.thirdweb-example.com", - repo: "https://github.com/thirdweb-example/next-starter", - description: - "Starter kit to build with Next and thirdweb without additional initial configuration.", - img: "/assets/templates/next-starter.png", - hoverBorderColor: "hsl(309deg 54% 81% / 15%)", - tags: ["Next", "Starter"], - authorENS: "thirdweb.eth", - authorIcon: "/assets/templates/thirdweb-eth.png", - }, -]; - -const TemplateCard: React.FC = ({ - id, - title, - description, - img, - hoverBorderColor, - tags, - authorENS, - authorIcon, -}) => { - return ( - - - -
- - - {title} - - - - - {tags.map((tag) => ( - - - {tag} - - - ))} - - - - {description} - -
- - {`Icon - - {authorENS} - - - - - ); -}; -const title = "Web3 Templates for Websites & Apps"; -const description = - "Start building with a library of quick-start templates for web3 apps and websites — for NFTs, marketplaces, and more. Get started."; - -const Templates: ThirdwebNextPage = () => { - useForceDarkTheme(); - return ( - <> - - - - - - Explore{" "} - - templates - - . - - - Kickstart your development process with ready-to-ship repositories. - - - {templates.map((template) => ( - - ))} - - - - - - - - ); -}; - -Templates.pageId = PageId.Templates; - -export default Templates; diff --git a/apps/dashboard/src/tw-components/button.tsx b/apps/dashboard/src/tw-components/button.tsx index 30e3f261d5c..d32d3feaa86 100644 --- a/apps/dashboard/src/tw-components/button.tsx +++ b/apps/dashboard/src/tw-components/button.tsx @@ -79,7 +79,7 @@ export const Button = forwardRef( }, ); -export interface LinkButtonProps extends ButtonProps { +interface LinkButtonProps extends ButtonProps { href: string; isExternal?: boolean; noIcon?: true;