From 461448b9586f2ea6007f50ee31c89a8a2d8e13cf Mon Sep 17 00:00:00 2001 From: "Shankar D. Warang" Date: Wed, 1 Nov 2023 11:32:32 +0530 Subject: [PATCH] feat: GiftDrop page (#86) --- components/pages/home/homepage-teasers.tsx | 4 + pages/giftdrop.tsx | 106 ++++++++++++++++++ .../images/home/banners/banners-giftdrop.png | Bin 0 -> 86280 bytes 3 files changed, 110 insertions(+) create mode 100644 pages/giftdrop.tsx create mode 100644 public/images/home/banners/banners-giftdrop.png diff --git a/components/pages/home/homepage-teasers.tsx b/components/pages/home/homepage-teasers.tsx index 8fae2ca..88cbbc0 100644 --- a/components/pages/home/homepage-teasers.tsx +++ b/components/pages/home/homepage-teasers.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; const TEASERS = { + giftdrop: { + href: '/giftdrop', + alt: 'GiftDrop is a series of free commemorative mint drops for the EDGizens!', + }, csp: { href: '/csp', alt: 'Support the ongoing community contributions through the monthly editions of limited NFTs and get exclusive perks.', diff --git a/pages/giftdrop.tsx b/pages/giftdrop.tsx new file mode 100644 index 0000000..dc3762d --- /dev/null +++ b/pages/giftdrop.tsx @@ -0,0 +1,106 @@ +import { Listbox } from '@headlessui/react'; +import { useState } from 'react'; +import IconArrow from 'remixicon/icons/Arrows/arrow-down-s-line.svg'; + +const WidgetCampaign = [ + { + index: 1, + campaign: 'Halloween Edition', + src: 'https://embed.ipfscdn.io/ipfs/bafybeigdie2yyiazou7grjowoevmuip6akk33nqb55vrpezqdwfssrxyfy/erc1155.html?contract=0xcBD6701C3313aC76c529468957Fc2137484A4A51&chain=%7B%22name%22%3A%22Edgeware+EdgeEVM+Mainnet%22%2C%22chain%22%3A%22EDG%22%2C%22rpc%22%3A%5B%22https%3A%2F%2Fedgeware-edgeevm.rpc.thirdweb.com%2F%24%7BTHIRDWEB_API_KEY%7D%22%5D%2C%22nativeCurrency%22%3A%7B%22name%22%3A%22Edgeware%22%2C%22symbol%22%3A%22EDG%22%2C%22decimals%22%3A18%7D%2C%22shortName%22%3A%22edg%22%2C%22chainId%22%3A2021%2C%22testnet%22%3Afalse%2C%22slug%22%3A%22edgeware-edgeevm%22%2C%22icon%22%3A%7B%22url%22%3A%22ipfs%3A%2F%2FQmS3ERgAKYTmV7bSWcUPSvrrCC9wHQYxtZqEQYx9Rw4RGA%22%2C%22width%22%3A352%2C%22height%22%3A304%2C%22format%22%3A%22png%22%7D%7D&clientId=57b1f3ff173c0acef018fbca1356a7af&tokenId=0&theme=dark&primaryColor=red', + }, +]; + +const maxIndex = Math.max(...WidgetCampaign.map((m) => m.index)); + +export default function SocietyPage() { + const [activeIndex, setActiveIndex] = useState(maxIndex); + + const currentWidget = WidgetCampaign.find((m) => m.index === activeIndex); + const dropdownOptions = WidgetCampaign.map((m) => m.campaign).reverse(); + + return ( + <> +
+

GiftDrops

+

+ GiftDrop is a series of free commemorative mint drops for the EDGizens! Flex your + community presence through your GiftDrop NFTs collection{' '} + + 😎 + +

+

+ Mint your free GiftDrop NFT today: +

+
+ +
+
+ + + {currentWidget?.campaign} + + + + {dropdownOptions.map((campaign, index) => ( + + {({ active }) => (active ? {campaign} : {campaign})} + + ))} + + +
+
+