diff --git a/public/basildocument.png b/public/basildocument.png new file mode 100644 index 0000000..56e5985 Binary files /dev/null and b/public/basildocument.png differ diff --git a/public/dollar.svg b/public/dollar.svg new file mode 100644 index 0000000..5a78f8c --- /dev/null +++ b/public/dollar.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/fluentdocument.png b/public/fluentdocument.png new file mode 100644 index 0000000..9169fd7 Binary files /dev/null and b/public/fluentdocument.png differ diff --git a/public/stark.svg b/public/stark.svg new file mode 100644 index 0000000..8a98037 --- /dev/null +++ b/public/stark.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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..e57ea4f --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/Pricing.tsx @@ -0,0 +1,139 @@ +"use client"; + +import type React from "react"; +import Image from "next/image"; +import basildocument from "../../../../../public/basildocument.png"; +import dollar from "../../../../../public/dollar.svg"; +import stark from "../../../../../public/stark.svg"; + + +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

+ +
+
+
+ document upload + +

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

+
+

Supported format: JPEG & PNG

+ + +
+ +
+
+

Pricing Options

+ +
+
+ + updateBookData({ copiesCount: parseInt(e.target.value, 10) })} + /> +
+ +
+
+ +
+
+ + document upload + +
+ updateBookData({ priceUSDC: parseFloat(e.target.value) })} + /> +
+
+ +
+ +
+
+ + document upload + +
+ +
+
+
+ +
+ 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..eef2ccd --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/bookContent.tsx @@ -0,0 +1,206 @@ +"use client"; + +import React, { useState, ChangeEvent } from "react"; +import Image from "next/image"; +import fluentdocument from "../../../../../public/fluentdocument.png"; +import basildocument from "../../../../../public/basildocument.png"; + +type BookData = { + bookTitle: string; + subtitle: string; + language: string; + isbn?: string; +}; + +type BookContentProps = { + bookData: BookData; + updateBookData: (data: Partial) => void; + nextStep: () => void; +}; + +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

+ +
+
+
+ document 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()} + > + document upload +

+ 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()} + > + document 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..60c9b16 --- /dev/null +++ b/src/app/dashboard/manage-content/PublishingNft/bookDetail.tsx @@ -0,0 +1,130 @@ +"use client"; + +import React, { useState } from "react"; +import GenreTag from "./genre"; +import Image from "next/image"; +import basildocument from "../../../../../public/basildocument.png"; + + +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

+ +
+
+
+ document 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)} +
+
+ +
+ +