Skip to content

feat: implemented publish nft edition page #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Iwueseiter merged 2 commits into from
May 6, 2025
Merged

feat: implemented publish nft edition page #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
727b7ab
feat: implemented publish nft edition page
Iwueseiter May 4, 2025
08dc2d9
fix: styling and responsiveness
Iwueseiter May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/basildocument.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions public/dollar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/fluentdocument.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/stark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 139 additions & 0 deletions src/app/dashboard/manage-content/PublishingNft/Pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<BookData>) => void;
prevStep: () => void;
publishBook: () => void;
};

function Pricing({ bookData, updateBookData, prevStep, publishBook }: PricingProps): React.ReactElement {
return (
<div className="max-w-3xl mx-auto">
<h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
<Image
src={basildocument}
alt="document upload"
width={20}
height={10}
className="w-15 h-10"
/>

<p className="text-sm text-gray-500 text-center">
Drag and drop or Click to<br />choose file from device
</p>
</div>
<p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>

<button className="w-full flex items-center justify-center bg-gray-100 text-gray-700 rounded-md py-2 mt-4">
<span className="mr-2">▶</span> Preview Book
</button>
</div>

<div className="md:col-span-2">
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-lg font-medium mb-4">Pricing Options</h2>

<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Number of Copies (Limited edition)</label>
<input
type="number"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.copiesCount}
onChange={(e) => updateBookData({ copiesCount: parseInt(e.target.value, 10) })}
/>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Set Price (USDC)</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">

<Image
src={dollar}
alt="document upload"
width={20}
height={10}
className="w-5 h-5"
/>

</div>
<input
type="number"
step="0.01"
min="0"
className="w-full border border-gray-300 rounded-md pl-7 pr-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.priceUSDC}
onChange={(e) => updateBookData({ priceUSDC: parseFloat(e.target.value) })}
/>
</div>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Price in Stark (STRK)</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none">

<Image
src={stark}
alt="document upload"
width={20}
height={10}
className="w-5 h-5"
/>

</div>
<input
type="number"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.priceSTRK}
readOnly
/>
</div>
</div>
</div>

<div className="bg-blue-50 border border-blue-100 rounded-md p-4 text-sm text-blue-800">
You&apos;ll receive 90% in royalties from each sale. We keep a small fee to maintain the platform and ensure smooth publishing for everyone.
</div>
</div>

<div className="flex justify-between mt-8">
<button
className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
onClick={prevStep}
>
Previous Page
</button>
<button
className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
onClick={publishBook}
>
Publish Book
</button>
</div>
</div>
</div>
</div>
</div>
);
} export default Pricing;
206 changes: 206 additions & 0 deletions src/app/dashboard/manage-content/PublishingNft/bookContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<BookData>) => void;
nextStep: () => void;
};

function BookContent({ bookData, updateBookData, nextStep }: BookContentProps) {
const [manuscriptFile, setManuscriptFile] = useState<File | null>(null);
const [bonusContentFile, setBonusContentFile] = useState<File | null>(null);

const handleManuscriptUpload = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
setManuscriptFile(file);
}
};

const handleBonusContentUpload = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
setBonusContentFile(file);
}
};

return (
<div className="max-w-3xl mx-auto">
<h1 className="text-xl font-medium mb-6">Exclusive NFT Book</h1>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<div className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-64 bg-blue-50">
<Image
src={basildocument}
alt="document upload"
width={20}
height={10}
className="w-15 h-10"
/>

<p className="text-sm text-gray-500 text-center">
Drag and drop or Click to<br />choose file from device
</p>
</div>
<p className="text-xs text-gray-500 mt-2">Supported format: JPEG & PNG</p>
</div>




<div className="bg-white rounded-lg shadow md:col-span-2 p-6">
<div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Book Title</label>
<input
type="text"
placeholder="Your Book Title"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.bookTitle}
onChange={(e) => updateBookData({ bookTitle: e.target.value })}
/>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Sub-title</label>
<input
type="text"
placeholder="Sub-title"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.subtitle}
onChange={(e) => updateBookData({ subtitle: e.target.value })}
/>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Language</label>
<select
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.language}
onChange={(e) => updateBookData({ language: e.target.value })}
>
<option value="">Select Language</option>
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="zh">Chinese</option>
</select>
</div>

<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Book ISBN (Optional)</label>
<input
type="text"
placeholder="978-1-234-56789-0"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500"
value={bookData.isbn}
onChange={(e) => updateBookData({ isbn: e.target.value })}
/>
</div>
</div>
<label className="block text-sm font-medium text-gray-700 mb-2">Manuscript</label>
<div
className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 cursor-pointer"
onClick={() => document.getElementById('manuscript-upload')?.click()}
>
<Image
src={fluentdocument}
alt="document upload"
width={20}
height={10}
className=" w-15 h-10"
/>
<p className="text-sm text-gray-500 text-center">
Drag and drop or Click to<br />choose file from device
</p>
<input
id="manuscript-upload"
type="file"
className="hidden"
accept=".pdf,.doc,.docx"
onChange={handleManuscriptUpload}
/>
</div>
{manuscriptFile && (
<p className="text-xs text-gray-600 mt-2">{manuscriptFile.name} - {Math.round(manuscriptFile.size / 1024)} KB</p>
)}

<div className="mt-6">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium text-gray-700">Add Bonus Content</label>
<button
type="button"
className="flex items-center text-blue-500 text-sm font-medium"
onClick={() => document.getElementById('bonus-content-upload')?.click()}
>
<span className="mr-1">+</span> Add
</button>
<input
id="bonus-content-upload"
type="file"
className="hidden"
accept=".pdf,.doc,.docx,.jpg,.png"
onChange={handleBonusContentUpload}
/>
</div>

<div
className="border-2 border-dashed border-blue-200 rounded-md p-4 flex flex-col items-center justify-center h-32 bg-blue-50 mt-2 cursor-pointer"
onClick={() => document.getElementById('bonus-content-upload')?.click()}
>
<Image
src={fluentdocument}
width={20}
height={10}
alt="document upload"
className=" w-15 h-10"
/>
<p className="text-sm text-gray-500 text-center">
Drag and drop or Click to<br />choose file from device
</p>
</div>
{bonusContentFile && (
<p className="text-xs text-gray-600 mt-2">{bonusContentFile.name} - {Math.round(bonusContentFile.size / 1024)} KB</p>
)}
<p className="text-xs text-gray-500 mt-1">e.g. bonus artwork, author message</p>
</div>

<div className="flex justify-between mt-8">
<button
className="px-6 py-2 bg-blue-100 text-gray-800 rounded-md font-medium hover:bg-gray-200"
disabled
>
Back
</button>
<button
className="px-6 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600"
onClick={nextStep}
>
Continue
</button>
</div>
</div>


</div>
</div>
);
}

export default BookContent;


Loading
Loading