-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from hollow-leaf/feat/create_add_NFT_UI_page
feat:create add NFT page UI
- Loading branch information
Showing
14 changed files
with
324 additions
and
110 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React from 'react'; | ||
| import { GlobeAltIcon, CurrencyDollarIcon, ShieldCheckIcon, UserGroupIcon } from '@heroicons/react/24/solid'; | ||
|
|
||
| const About: React.FC = () => { | ||
| return ( | ||
| <div className="py-12 px-4"> | ||
| <div className="max-w-6xl mx-auto text-center"> | ||
| <h1 className="text-4xl font-semibold text-blue-600 mb-4">About Psyduck</h1> | ||
| <p className="text-lg text-gray-600 mb-8"> | ||
| Welcome to Psyduck, a pioneering decentralized livestreaming donation platform designed to transform how viewers support creators worldwide. Our innovative platform is not just a tool for transactions but a bridge connecting artists and audiences in a dynamic, interactive community. | ||
| </p> | ||
|
|
||
| <div className="space-y-8"> | ||
| {/* Global Access for All */} | ||
| <div> | ||
| <div className="flex justify-center"> | ||
| <GlobeAltIcon className="h-10 w-10 text-blue-600 inline-block mb-2" /> | ||
| <h2 className="text-2xl font-semibold ml-2 mt-2">Global Access for All</h2> | ||
| </div> | ||
| <p className="text-lg text-gray-600"> | ||
| We envision a world where geographical boundaries do not limit creativity and support. Our platform ensures that no matter where you are, you can access and support incredible creators across the globe, fostering a diverse cultural exchange and broadening the horizons of the creative landscape. | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* Instant, Direct Support */} | ||
| <div> | ||
| <div className="flex justify-center"> | ||
| <CurrencyDollarIcon className="h-10 w-10 text-blue-600 inline-block mb-2" /> | ||
| <h2 className="text-2xl font-semibold ml-2 mt-2">Instant, Direct Support</h2> | ||
| </div> | ||
| <p className="text-lg text-gray-600"> | ||
| In the fast-paced world of livestreaming, we understand the importance of immediacy. Our transaction process ensures that your donations reach creators instantly, empowering them to continue their creative journey without financial hindrance. | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* Security and Transparency */} | ||
| <div> | ||
| <div className="flex justify-center"> | ||
| <ShieldCheckIcon className="h-10 w-10 text-blue-600 inline-block mb-2" /> | ||
| <h2 className="text-2xl font-semibold ml-2 mt-2">Security and Transparency</h2> | ||
| </div> | ||
| <p className="text-lg text-gray-600"> | ||
| Leveraging the power of blockchain technology, Psyduck guarantees secure and transparent transactions, ensuring a safe and trustworthy environment. Every donation is recorded on a decentralized ledger, offering unmatched security and transparency. | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* Fostering Community Engagement */} | ||
| <div> | ||
| <div className="flex justify-center"> | ||
| <UserGroupIcon className="h-10 w-10 text-blue-600 inline-block mb-2" /> | ||
| <h2 className="text-2xl font-semibold ml-2 mt-2">Fostering Community Engagement</h2> | ||
| </div> | ||
| <p className="text-lg text-gray-600"> | ||
| Engage with creators and other supporters through direct interactions and feedback, and be part of a community that celebrates and uplifts each other. Our platform is more than just a donation site; it is a hub for collaboration, inspiration, and mutual growth. | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <h2 className="text-2xl font-semibold ml-2 mt-2">Join Us</h2> | ||
| <p className="text-lg text-gray-600 "> | ||
| Join us on this exciting journey at Psyduck. Together, we are not just watching the future of digital interaction and creativity unfold; we are actively shaping it. Be a part of this revolutionary movement where every stream becomes a pathway to closer connections and shared success. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default About; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| "use client"; | ||
| import React, { useState } from "react"; | ||
| import { Typography } from "@material-tailwind/react"; | ||
| type NFT = { | ||
| mintPrice: number, | ||
| maxSupply: number, | ||
| metadataURI: string | null, | ||
| name: string | ||
| }; | ||
|
|
||
| const nftTemplate: NFT = { | ||
| mintPrice: 0, | ||
| maxSupply: 0, | ||
| metadataURI: 'hahaha', | ||
| name: '' | ||
| }; | ||
|
|
||
| export default function Donations() { | ||
| const [nft, setNft] = useState<NFT>(nftTemplate); | ||
| const [name, setName] = useState<string>(''); | ||
| const handleSubmitName = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| let data = { name }; | ||
| console.log(data); | ||
| }; | ||
|
|
||
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| let data = { ...nft }; | ||
| for (let key in nft) { | ||
| if (nft[key as keyof NFT] === undefined || nft[key as keyof NFT] === null || nft[key as keyof NFT] === '' || Number.isNaN(nft[key as keyof NFT])) { | ||
| alert("Please fill all the fields"); | ||
| return; | ||
| } | ||
| // Additional logic for handling file upload and other functionalities | ||
| } | ||
| console.log(data); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="py-12 px-4"> | ||
| <div className="max-w-6xl mx-auto"> | ||
| <div className="container mx-auto mb-20 text-center"> | ||
| <Typography color="blue-gray" className="mb-2 font-bold uppercase"> | ||
| Stream & Reward | ||
| </Typography> | ||
| <Typography variant="h1" color="blue-gray" className="mb-4"> | ||
| Empower Live Streaming | ||
| </Typography> | ||
| <Typography | ||
| variant="lead" | ||
| className="mx-auto w-full px-4 !text-gray-500 lg:w-11/12 lg:px-8 " | ||
| > | ||
| Unlock the potential of livestreaming with our decentralized donation platform. | ||
| Empower creators and participate in a new era of digital interaction, ensuring a secure, transparent | ||
| , and inclusive experience. | ||
| </Typography> | ||
| </div> | ||
| <div className="flex flex-wrap mx-4 "> | ||
| {/* Left Column: Create Contract */} | ||
| <div className="w-[80%] md:w-1/2 px-4 py-4 border border-blue-500 rounded-xl"> | ||
| <h2 className="text-2xl font-bold mb-4 text-center">Create Contract</h2> | ||
| <form onSubmit={handleSubmitName} className="text-left"> | ||
| {/* Form elements for creating contract */} | ||
| <label>Get Started : </label><br /> | ||
| <input | ||
| type="text" | ||
| placeholder="Donantion Name" | ||
| onChange={(e) => setName(e.target.value)} | ||
| className="my-4 text-center" | ||
| /> | ||
| <br /> | ||
|
|
||
| <button | ||
| type="submit" | ||
| className="mt-4 bg-blue-500 text-white border border-blue-700 hover:bg-blue-600 px-4 py-2 rounded" | ||
| > | ||
| Create Contract | ||
| </button> | ||
| </form> | ||
| </div> | ||
|
|
||
| {/* Right Column: Add NFT */} | ||
| <div className="w-[80%] md:w-1/2 px-4 py-4 border border-blue-500 rounded-xl"> | ||
| <h2 className="text-2xl font-bold mb-4 text-center">Add New NFT</h2> | ||
| <form onSubmit={handleSubmit} className="text-left"> | ||
| <label>MintPrice : </label> | ||
| <input | ||
| type="number" | ||
| placeholder="MintPrice" | ||
| onChange={(e) => setNft({ ...nft, mintPrice: parseInt(e.target.value) })} | ||
| /> | ||
| <br /> | ||
|
|
||
| <label>MaxSupply : </label> | ||
| <input | ||
| type="number" | ||
| placeholder="MaxSupply" | ||
| onChange={(e) => setNft({ ...nft, maxSupply: parseInt(e.target.value) })} | ||
| className="my-4" | ||
| /> | ||
| <br /> | ||
|
|
||
| <input | ||
| type="file" | ||
| onChange={(e) => setNft({ ...nft, metadataURI: 'haha' })} | ||
| className="my-4" | ||
| /> | ||
| <br /> | ||
|
|
||
| <label>NFT Name : </label> | ||
| <input | ||
| type="text" | ||
| placeholder="NFT Name" | ||
| onChange={(e) => setNft({ ...nft, name: e.target.value })} | ||
| className="my-4" | ||
| /> | ||
| <br /> | ||
|
|
||
| <button | ||
| type="submit" | ||
| className="mt-4 bg-blue-500 text-white border border-blue-700 hover:bg-blue-600 px-4 py-2 rounded" | ||
| > | ||
| Add New NFT | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.