From 727b7ab5a9e0080f0c9334acf415b218e1bc3652 Mon Sep 17 00:00:00 2001 From: Iwueseiter Date: Sun, 4 May 2025 21:32:05 +0100 Subject: [PATCH 1/4] feat: implemented publish nft edition page --- public/fileupload.svg | 3 + "public/\342\200\253imageupload.svg" | 3 + .../manage-content/PublishingNft/Pricing.tsx | 120 +++++++++++ .../PublishingNft/bookContent.tsx | 199 ++++++++++++++++++ .../PublishingNft/bookDetail.tsx | 126 +++++++++++ .../manage-content/PublishingNft/genre.tsx | 24 +++ .../manage-content/PublishingNft/page.tsx | 118 +++++++++++ 7 files changed, 593 insertions(+) create mode 100644 public/fileupload.svg create mode 100644 "public/\342\200\253imageupload.svg" create mode 100644 src/app/dashboard/manage-content/PublishingNft/Pricing.tsx create mode 100644 src/app/dashboard/manage-content/PublishingNft/bookContent.tsx create mode 100644 src/app/dashboard/manage-content/PublishingNft/bookDetail.tsx create mode 100644 src/app/dashboard/manage-content/PublishingNft/genre.tsx create mode 100644 src/app/dashboard/manage-content/PublishingNft/page.tsx diff --git a/public/fileupload.svg b/public/fileupload.svg new file mode 100644 index 0000000..aa81463 --- /dev/null +++ b/public/fileupload.svg @@ -0,0 +1,3 @@ + + + diff --git "a/public/\342\200\253imageupload.svg" "b/public/\342\200\253imageupload.svg" new file mode 100644 index 0000000..fb0122f --- /dev/null +++ "b/public/\342\200\253imageupload.svg" @@ -0,0 +1,3 @@ + + + diff --git a/src/app/dashboard/manage-content/PublishingNft/Pricing.tsx b/src/app/dashboard/manage-content/PublishingNft/Pricing.tsx new file mode 100644 index 0000000..2ed1dd5 --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/Pricing.tsx @@ -0,0 +1,120 @@ +"use client"; + +import type React from "react"; +import Image from "next/image"; + + +type BookData = { + copiesCount: number; + priceUSDC: number; + priceSTRK: number; +}; + +type PricingProps = { + bookData: BookData; + updateBookData: (data: Partial) => void; + prevStep: () => void; + publishBook: () => void; +}; + +function Pricing({ bookData, updateBookData, prevStep, publishBook }: PricingProps): React.ReactElement { + return ( +
+

Exclusive NFT Book

+ +
+
+
+ image upload + +

+ Drag and drop or Click to
choose file from device +

+
+

Supported format: JPEG & PNG

+ + +
+ +
+
+

Pricing Options

+ +
+
+ + updateBookData({ copiesCount: parseInt(e.target.value, 10) })} + /> +
+ +
+
+ +
+
+ $ +
+ updateBookData({ priceUSDC: parseFloat(e.target.value) })} + /> +
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+ +
+ You'll receive 90% in royalties from each sale. We keep a small fee to maintain the platform and ensure smooth publishing for everyone. +
+
+ +
+ + +
+
+
+
+
+ ); +}export default Pricing; diff --git a/src/app/dashboard/manage-content/PublishingNft/bookContent.tsx b/src/app/dashboard/manage-content/PublishingNft/bookContent.tsx new file mode 100644 index 0000000..26519d8 --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/bookContent.tsx @@ -0,0 +1,199 @@ +"use client"; + +import React, { useState, ChangeEvent } from "react"; +import Image from "next/image"; + +type BookData = { + bookTitle: string; + subtitle: string; + language: string; + isbn?: string; +}; + +type BookContentProps = { + bookData: BookData; + updateBookData: (data: Partial) => void; + nextStep: () => void; +}; + +const FileIcon = () => ( + + + +); + +function BookContent({ bookData, updateBookData, nextStep }: BookContentProps) { + const [manuscriptFile, setManuscriptFile] = useState(null); + const [bonusContentFile, setBonusContentFile] = useState(null); + + const handleManuscriptUpload = (e: ChangeEvent) => { + if (e.target.files && e.target.files.length > 0) { + const file = e.target.files[0]; + setManuscriptFile(file); + } + }; + + const handleBonusContentUpload = (e: ChangeEvent) => { + if (e.target.files && e.target.files.length > 0) { + const file = e.target.files[0]; + setBonusContentFile(file); + } + }; + + return ( +
+

Exclusive NFT Book

+ +
+

Book Content

+ +
+
+
+ image upload +

+ Drag and drop or Click to
choose file from device +

+
+

Supported format: JPEG & PNG

+
+ +
+
+ + updateBookData({ bookTitle: e.target.value })} + /> +
+ +
+ + updateBookData({ subtitle: e.target.value })} + /> +
+ +
+ + +
+ +
+ + updateBookData({ isbn: e.target.value })} + /> +
+
+
+ +
+ +
document.getElementById('manuscript-upload')?.click()} + > + +

+ Drag and drop or Click to
choose file from device +

+ +
+ {manuscriptFile && ( +

{manuscriptFile.name} - {Math.round(manuscriptFile.size / 1024)} KB

+ )} +
+ +
+
+ + + +
+ +
document.getElementById('bonus-content-upload')?.click()} + > + image upload +

+ Drag and drop or Click to
choose file from device +

+
+ {bonusContentFile && ( +

{bonusContentFile.name} - {Math.round(bonusContentFile.size / 1024)} KB

+ )} +

e.g. bonus artwork, author message

+
+ +
+ + +
+
+
+ ); +} + +export default BookContent; + + diff --git a/src/app/dashboard/manage-content/PublishingNft/bookDetail.tsx b/src/app/dashboard/manage-content/PublishingNft/bookDetail.tsx new file mode 100644 index 0000000..79f01c4 --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/bookDetail.tsx @@ -0,0 +1,126 @@ +"use client"; + +import React, { useState } from "react"; +import GenreTag from "./genre"; +import Image from "next/image"; + +const AVAILABLE_GENRES = ["Fiction", "Drama", "Science Fiction", "Fantasy", "Mystery", "Romance"]; +const AVAILABLE_TAGS = ["Adventure", "Sci-Fi", "Bestseller", "New Release", "Fantasy"]; + +interface BookDetailsProps { + bookData: { + authorName: string; + genre: string[]; + tags: string[]; + description: string; + }; + updateBookData: (data: Partial) => void; + nextStep: () => void; + prevStep: () => void; +} + +export default function BookDetails({ bookData, updateBookData, nextStep, prevStep }: BookDetailsProps) { + const [selectedGenres, setSelectedGenres] = useState(bookData.genre || []); + const [selectedTags, setSelectedTags] = useState(bookData.tags || []); + + const toggleGenre = (genre: string) => { + const updated = selectedGenres.includes(genre) + ? selectedGenres.filter(g => g !== genre) + : [...selectedGenres, genre]; + setSelectedGenres(updated); + updateBookData({ genre: updated }); + }; + + const toggleTag = (tag: string) => { + const updated = selectedTags.includes(tag) + ? selectedTags.filter(t => t !== tag) + : [...selectedTags, tag]; + setSelectedTags(updated); + updateBookData({ tags: updated }); + }; + + const renderTags = (items: string[], selected: string[], onToggle: (item: string) => void) => + items.map(item => ( + onToggle(item)} /> + )); + + return ( +
+

Exclusive NFT Book

+ +
+
+
+ image upload +

+ Drag and drop or Click to
choose file from device +

+
+

Supported format: JPEG & PNG

+
+ +
+
+

Book Details

+ +
+
+ + updateBookData({ authorName: e.target.value })} + /> +
+ +
+ +
+ {renderTags(AVAILABLE_GENRES, selectedGenres, toggleGenre)} +
+
+ +
+ +
+ {renderTags(AVAILABLE_TAGS, selectedTags, toggleTag)} +
+
+ +
+ +