diff --git a/docs-content/react/web3/index.ts b/docs-content/react/web3/index.ts new file mode 100644 index 000000000..0acbba3fb --- /dev/null +++ b/docs-content/react/web3/index.ts @@ -0,0 +1,3 @@ +export * from "./nft-card"; +export * from "./nft-card-dialog"; +export * from "./nft-stats-card"; diff --git a/docs-content/react/web3/nft-card-dialog.tsx b/docs-content/react/web3/nft-card-dialog.tsx new file mode 100644 index 000000000..e58c2367c --- /dev/null +++ b/docs-content/react/web3/nft-card-dialog.tsx @@ -0,0 +1,137 @@ +import { + Card, + CardHeader, + CardBody, + Typography, + Button, + Dialog, + DialogBody, +} from "@material-tailwind/react"; +import React from "react"; + +export function NFTCardDialog() { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(!open); + + return ( + <> + + + profile-picture +
+ + + + + NFT Name + + + #5 + + + + + +
+ profile-picture +
+
+ + Meta-Bot #5 + +
+ + Attributes + + + Rarity Score: 100.000 + +
+
+ + + + bot_background + + bot_bg_vue + + + + + bot_body + bot_body_blue + + + + + bot_head + bot_head_rounded_yellow + + + + + + + bot_antena_top + + bot_antena_pin + + + + + + bot_antena_side + + bot_antena_points_blue + + + + + bot_eyes + bot_eyes_round_inside + + +
+
+ + + + ); +} diff --git a/docs-content/react/web3/nft-card.tsx b/docs-content/react/web3/nft-card.tsx new file mode 100644 index 000000000..0162ba527 --- /dev/null +++ b/docs-content/react/web3/nft-card.tsx @@ -0,0 +1,29 @@ +import { + Card, + CardHeader, + CardBody, + Typography, + Button, +} from "@material-tailwind/react"; +import React from "react"; + +export function NFTCard() { + return ( + + + profile-picture + + + + NFT Name + + + #5 + + + + ); +} diff --git a/docs-content/react/web3/nft-stats-card.tsx b/docs-content/react/web3/nft-stats-card.tsx new file mode 100644 index 000000000..329cda558 --- /dev/null +++ b/docs-content/react/web3/nft-stats-card.tsx @@ -0,0 +1,113 @@ +import { + Card, + CardHeader, + CardBody, + Typography, + Avatar, +} from "@material-tailwind/react"; +import React from "react"; + +export function NFTStatsCard() { + return ( + + + +
+ + NFTim Collection + +
+ + NFTs: 9,999 + + + Collection:{" "} + NFTIM-4586bc + +
+
+ + +
+
+ + + 4,258 EGLD + + Total volume + + + + + + 0.5 EGLD + + Floor price + + + + + + + 60 EGLD + + ATH + + + + + + 1,202 + + Holders + + + + + + 1.36 + + Avg. price + + + + + + 3,135 + + Total Trades + + + +
+ + + ); +} diff --git a/documentation/react/web3/nft-card.mdx b/documentation/react/web3/nft-card.mdx new file mode 100644 index 000000000..225fc1e2d --- /dev/null +++ b/documentation/react/web3/nft-card.mdx @@ -0,0 +1,229 @@ +--- +title: Tailwind CSS Nft Card for React - Material Tailwind +description: Customise your web projects with our easy-to-use nft card example for Tailwind CSS and React using Material Design guidelines. +navigation: + [ + "nft-card", + "nft-card-dialog" + ] +github: web3/nft-card +prev: plugins/text-editor +next: web3/nft-stats +--- + + +# Tailwind CSS Nft Card - React + + +Use our Tailwind CSS Nft Card in your web3 projects. + +See below our beautiful Nft card example that you can use in your Tailwind CSS and React project. + + +
+
+ +}> +```jsx +import { + Card, + CardHeader, + CardBody, + Typography, +} from "@material-tailwind/react"; +import React, { useState, useEffect } from "react"; + +export function NFTCard() { + const [loading, setLoading] = useState(true); + const [elrondData, setElrondData] = useState([]); + const [myNFTS, setMyNFTS] = useState([]); + const [address, setAddress] = useState(""); + + useEffect(() => { + fetch(`https://api.elrond.com/accounts/${address}/nfts?size=10000`, { + method: "GET", + }) + .then((response) => response.json()) + .then((data) => { + setElrondData(Object.entries(data)); + }) + .catch((err) => { + console.log(err); + }); + + setTimeout(() => { + setLoading(false); + }, 1000); + }, [address]); + + return ( + + + profile-picture + + + + {your_NFT_name} + + + #{your_NFT_identifier} + + + + ); +} +``` + + +--- + + +## Add Model to the NFT Card + + +In order to see the attributes of the NFT we will need to add a modal to the card. + +}> +```jsx +import { + Card, + CardHeader, + CardBody, + Typography, + Button, + Dialog, + DialogBody, +} from "@material-tailwind/react"; +import React from "react"; + +export function NFTCardDialog() { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(!open); + + return ( + <> + + + profile-picture +
+ + + + + NFT Name + + + #5 + + + + + +
+ profile-picture +
+
+ + Meta-Bot #5 + +
+ + Attributes + + + Rarity Score: 100.000 + +
+
+ + + + bot_background + + bot_bg_vue + + + + + bot_body + bot_body_blue + + + + + bot_head + bot_head_rounded_yellow + + + + + + + bot_antena_top + + bot_antena_pin + + + + + + bot_antena_side + + bot_antena_points_blue + + + + + bot_eyes + bot_eyes_round_inside + + +
+
+ + + + ); +} +``` + \ No newline at end of file diff --git a/documentation/react/web3/nft-stats-card.mdx b/documentation/react/web3/nft-stats-card.mdx new file mode 100644 index 000000000..6f24f45c7 --- /dev/null +++ b/documentation/react/web3/nft-stats-card.mdx @@ -0,0 +1,140 @@ +--- +title: Tailwind CSS Nft Stats for React - Material Tailwind +description: Customise your web projects with our easy-to-use algolia search example for Tailwind CSS and React using Material Design guidelines. +navigation: + [ + "nft-stats", + ] +github: web3/nft-stats +prev: web3/nft-card + +--- + + +# Tailwind CSS Nft Stats Card - React + + +Use our Tailwind CSS Nft stats in your web3 projects. + +See below our beautiful Nft stats card example that you can use in your Tailwind CSS and React project. + + +
+ +}> +```jsx +import { + Card, + CardHeader, + CardBody, + Typography, + Avatar, +} from "@material-tailwind/react"; +import React from "react"; + +export function NFTStatsCard() { + return ( + + + +
+ + NFTim Collection + +
+ + NFTs: 9,999 + + + Collection:{" "} + NFTIM-4586bc + +
+
+ + +
+
+ + + 4,258 EGLD + + Total volume + + + + + + 0.5 EGLD + + Floor price + + + + + + + 60 EGLD + + ATH + + + + + + 1,202 + + Holders + + + + + + 1.36 + + Avg. price + + + + + + 3,135 + + Total Trades + + + +
+ + + ); +} +``` + \ No newline at end of file diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx index 616fecdfd..df51c28f5 100644 --- a/pages/docs/[...slug].tsx +++ b/pages/docs/[...slug].tsx @@ -74,6 +74,8 @@ import * as SwitchExamples from "docs-content/react/switch"; import * as TabsExamples from "docs-content/react/tabs"; import * as TextareaExamples from "docs-content/react/textarea"; import * as Plugins from "docs-content/react/plugins"; +import * as Web3 from "docs-content/react/web3"; + import ReleaseNotes from "docs-content/react/release-notes"; import * as FrameworkIcons from "@widgets"; import * as SkeletonExamples from "docs-content/react/skeleton"; @@ -359,6 +361,7 @@ const components = { ReleaseNotes, ColorPalette, Plugins, + Web3, SkeletonExamples, GalleryExamples, MegaMenuExamples, diff --git a/routes/react.routes.ts b/routes/react.routes.ts index dfddacafe..00e8ce92d 100644 --- a/routes/react.routes.ts +++ b/routes/react.routes.ts @@ -299,4 +299,17 @@ export const routes = [ }, ], }, + { + name: "Web3", + pages: [ + { + name: "NFT Card", + route: "/web3/nft-card", + }, + { + name: "NFT Stats Card", + route: "/web3/nft-stats-card", + }, + ], + }, ];