setIsOpen(false)}
+ />
+ )}
+
+
+ );
+}
diff --git a/src/app/author/[authorId]/_components/stat-card.tsx b/src/app/author/[authorId]/_components/stat-card.tsx
new file mode 100644
index 0000000..57ab0b8
--- /dev/null
+++ b/src/app/author/[authorId]/_components/stat-card.tsx
@@ -0,0 +1,41 @@
+import Image from "next/image";
+
+interface StatCardProps {
+ title: string;
+ value: string | number;
+ icon?: string; // Ensure `icon` is a string for compatibility with `next/image`
+ iconColor?: string;
+ iconBgColor?: string;
+ badgeValue?: string | number;
+ badgeColor?: string;
+}
+
+export function StatCard({
+ title,
+ value,
+ icon,
+ badgeValue,
+ badgeColor,
+}: StatCardProps) {
+ return (
+
+
+
{title}
+ {icon ? (
+
+
+ ) : badgeValue ? (
+
+
+ {badgeValue}
+
+
+ ) : null}
+
+
+ {value}
+
+
+ );
+}
diff --git a/src/app/author/[authorId]/analytics/page.tsx b/src/app/author/[authorId]/analytics/page.tsx
new file mode 100644
index 0000000..9c20ae7
--- /dev/null
+++ b/src/app/author/[authorId]/analytics/page.tsx
@@ -0,0 +1,67 @@
+import { BookOpen } from "lucide-react";
+import { Header } from "../_components/header";
+
+export default function Page() {
+ return (
+
+ {/*
Overview */}
+
+
+
+
Monthly Sales
+
+
+ Sales chart would be displayed here
+
+
+
+
+
+
+
Recent Activity
+
+ {[1, 2, 3, 4].map((item) => (
+
+
+
+
+
New book published
+
+ Native Invisibility - 2 hours ago
+
+
+
+ ))}
+
+
+
+
+
Top Performing Books
+
+ {[1, 2, 3, 4].map((item) => (
+
+
+
+
+
Native Invisibility
+
+ 124 sales this month
+
+
+
+
$1,240
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/app/author/[authorId]/books/[bookId]/page.tsx b/src/app/author/[authorId]/books/[bookId]/page.tsx
new file mode 100644
index 0000000..b840569
--- /dev/null
+++ b/src/app/author/[authorId]/books/[bookId]/page.tsx
@@ -0,0 +1,564 @@
+"use client"
+
+import strkImg from "@/assets/icons/strk.png";
+import { bookData } from "@/data";
+import { BadgeCheck, MoreVerticalIcon, Star } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { FaTelegramPlane } from "react-icons/fa";
+import { Header } from "../../_components/header";
+
+// interface BookPageProps {
+// params: {
+// bookId: string;
+// };
+// }
+
+
+export default function Page() {
+ // export default function Page({ params }: BookPageProps) {
+ // const { bookId } = params;
+
+ // const book = bookData.find((item) => item.id === bookId);
+
+ // if (!book) {
+ // return
; /* BookNotFound is not implemented yet **/
+ // }
+
+ // TODO
+ // Comment this out when the real data is available and use the one above
+ const book = bookData.at(0)
+
+ if (!book) return null
+
+ return (
+ <>
+
+
+
+ {/* Left Column - Book Cover */}
+
+
+
+ {/* Action Buttons */}
+
+ Start Reading for Free
+
+
+
+
+
+ {book.title}
+
+
+
+ By {book.author}
+
+ {book.isVerified && (
+
+
+ )}
+
+
+
+
+ {book.rating} of {book.reviews} Reviews
+
+
+
+
+
+
+
+
+ {/* Access Type */}
+
+
+ Access Type
+
+
+ One-time Purchase
+
+
+
+ {/* Price */}
+
+
+
+
+ 193
+
+ STRK
+
+
+
+
+ ${book.price}
+
+
+
+
+
+
+ {/* Description */}
+
+
+ Description
+
+
{book.description}
+
+ Read More
+
+
+
+
Genre(s)
+
+
+ {book.genre}
+
+
+ {book.category}
+
+
+
+
+
Page count
+
{book.pageCount}
+
+
+
Language
+
{book.language}
+
+
+
Date published
+
{book.publishDate}
+
+
+
+
+ {book?.blockchainData &&
+
+ {/* Header */}
+ Blockchain Details
+
+ {/* Details Grid */}
+
+ {/* Smart Contract Address */}
+
+
Smart Contract Address
+
{book.blockchainData.smartContractAddress}
+
+
+ {/* Token Standard */}
+
+
Token Standard
+
{book.blockchainData.tokenStandard}
+
+
+ {/* Network */}
+
+
Network
+
{book.blockchainData.network}
+
+
+ {/* Minted */}
+
+
Minted
+
{book.blockchainData.minted}
+
+
}
+
+
+ {/* Header */}
+ Book Performance Stats
+
+ {/* Time Period Tabs */}
+
+
+ This Week
+
+
+ This Month
+
+
+ This Year
+
+
+ All Time
+
+
+
+ {/* Stats Grid */}
+
+ {/* Read */}
+
+
Read
+
+ 192
+
+ 26%
+
+
+
+
+ {/* Read Completion Rate */}
+
+
Read Completion Rate
+
+ 75%
+
+ 10%
+
+
+
+
+ {/* Purchase */}
+
+
Purchase
+
+ 62
+
+ 18%
+
+
+
+
+ {/* Total Complete Read */}
+
+
Total Complete Read
+
+ 70%
+
+
+
+ {/* Total Earning */}
+
+
Total Earning
+
+ $
+ 370.00
+
+
+
+ {/* Average Rating */}
+
+
Average Rating
+
+ ⭐
+ 3.5
+
+
+
+
+ {/* Publisher and Author Info */}
+
+
+
+ From the Publisher
+
+
{book.publisherNote}
+
+
+ About the Author
+
+
+
+
+
+ {/* Author image would go here */}
+
+
+
+
+
+ {book.author}
+
+ {book.isVerified && (
+
+
+ )}
+
+
+
+
+ Follow
+
+
+
+
+
+
+
+
+ {/* Header */}
+ Reviews and Rating
+
+
+ {/* Left Side - Overall Rating */}
+
+
3.5
+
+ {/* Star Rating Display */}
+
+ ⭐
+ ⭐
+ ⭐
+ ⭐
+ ⭐
+
+
+
1202 Reviews
+
+
+ {/* Right Side - Rating Breakdown */}
+
+ {ratings.map((rating) => (
+
+ ))}
+
+
+
+
+ );
+};
+
+const ratings = [
+ { stars: 5, percentage: 15 },
+ { stars: 4, percentage: 25 },
+ { stars: 3, percentage: 45 },
+ { stars: 2, percentage: 30 },
+ { stars: 1, percentage: 20 }
+];
+
+const reviews = [
+ {
+ id: 1,
+ name: "Adeja Samad",
+ avatar: "/user.svg",
+ rating: 3.5,
+ time: "Yesterday",
+ comment: "This was a great read, and I was hooked. However, the death of my favorite character impacted my overall enjoyment, which is why I'm rating it 4 stars instead of 5.",
+ hasReply: true,
+ replyCount: 1
+ },
+ {
+ id: 2,
+ name: "Adeja Samad",
+ avatar: "/user.svg",
+ rating: 3.5,
+ time: "Yesterday",
+ comment: "This was a great read, and I was hooked. However, the death of my favorite character impacted my overall enjoyment, which is why I'm rating it 4 stars instead of 5.",
+ hasReply: false
+ }
+ , {
+ id: 3,
+ name: "Adeja Samad",
+ avatar: "/user.svg",
+ rating: 3.5,
+ time: "Yesterday",
+ comment: "This was a great read, and I was hooked. However, the death of my favorite character impacted my overall enjoyment, which is why I'm rating it 4 stars instead of 5.",
+ hasReply: true,
+ replyCount: 1
+ },
+ {
+ id: 4,
+ name: "Adeja Samad",
+ avatar: "/user.svg",
+ rating: 3.5,
+ time: "Yesterday",
+ comment: "This was a great read, and I was hooked. However, the death of my favorite character impacted my overall enjoyment, which is why I'm rating it 4 stars instead of 5.",
+ hasReply: false
+ }
+];
+
+
+function ReviewsComments() {
+ const [newComment, setNewComment] = useState('');
+ const [activeReplyId, setActiveReplyId] = useState
(2);
+
+ const renderStars = (rating: number, maxStars = 5) => {
+ const stars = [];
+ const fullStars = Math.floor(rating);
+ const hasHalfStar = rating % 1 >= 0.5;
+
+ for (let i = 0; i < fullStars; i++) {
+ stars.push(
+
+ ⭐
+
+ );
+ }
+
+ if (hasHalfStar) {
+ stars.push(
+
+ 🟊 {/* Half-star symbol or use a proper icon */}
+
+ );
+ }
+
+ for (let i = 0; i < maxStars - Math.ceil(rating); i++) {
+ stars.push(
+
+ ⭐
+
+ );
+ }
+
+ return {stars} ;
+ };
+
+ const handleReplyClick = (id: string | number | null) => {
+ setActiveReplyId(activeReplyId === id ? null : id); // Toggle reply input
+ };
+
+ interface HandleSubmitComment {
+ (reviewId: number): void;
+ }
+
+ const handleSubmitComment: HandleSubmitComment = (reviewId) => {
+ if (newComment.trim()) {
+ console.log(`Submitting comment for review ${reviewId}: ${newComment}`);
+ setNewComment(''); // Clear input
+ setActiveReplyId(null); // Close reply input
+ }
+ };
+
+ return (
+
+ {reviews.map((review) => (
+
+ {/* Review Header */}
+
+
+
+
+
{review.name}
+
+
{renderStars(review.rating)}
+
{review.time}
+
+
+
+
+ {/* Review Content */}
+
{review.comment}
+
+ {/* Reply Button */}
+
handleReplyClick(review.id)}
+ className="text-sm text-neutral-600 bg-neutral-100 px-3.5 rounded-full py-1.5 font-medium mb-4"
+ aria-label={`Reply to ${review.name}'s review`}
+ >
+ Reply
+
+
+ {/* Reply Indicator */}
+ {review.hasReply && (
+
+
+
+
You Replied
+
• {review.replyCount} Reply
+
+ )}
+
+ {/* Comment Input Section */}
+ {activeReplyId === review.id && (
+
+
+
+
You
+
+ handleSubmitComment(review.id)}
+ className="ml-2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+ aria-label="Submit reply"
+ >
+
+
+
+ )}
+
+ ))}
+
({
+ amount: 0.00,
+ wallet: "",
+ walletAddress: ""
+ })
+
+
+
+ // This function loads saved addresses
+ useEffect(() => {
+ const savedAddresses = localStorage.getItem(ADDRESS_KEY)
+ if (savedAddresses) {
+ try {
+ const parsedAddresses = JSON.parse(savedAddresses)
+ setWalletAddress(parsedAddresses)
+ }
+ catch (error) {
+ console.error("Failed to parse saved addresses:", error)
+ }
+ }
+ }, [])
+
+
+ // this function saves wallet address to local storage
+ useEffect(() => {
+ if (walletAddress.braavos || walletAddress.argent) {
+ localStorage.setItem(ADDRESS_KEY, JSON.stringify(walletAddress))
+ }
+ }, [walletAddress])
+
+ return (
+
+
+ )
+}
+
+export default EarningsPage
diff --git a/src/app/author/[authorId]/feedback/page.tsx b/src/app/author/[authorId]/feedback/page.tsx
new file mode 100644
index 0000000..12b48c0
--- /dev/null
+++ b/src/app/author/[authorId]/feedback/page.tsx
@@ -0,0 +1,14 @@
+import { Header } from "../_components/header";
+
+function Page() {
+ return (
+
+
+
+
+
We value your feedback! Please let us know your thoughts.
+ {/* Add your feedback form or component here */}
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/author/[authorId]/manage-content/page.tsx b/src/app/author/[authorId]/manage-content/page.tsx
new file mode 100644
index 0000000..cc0204e
--- /dev/null
+++ b/src/app/author/[authorId]/manage-content/page.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import CustomLink from "@/app/_components/CustomLink";
+import SearchBar from "@/app/_components/SearchBar";
+import { collections, filterOptions, nftBooks, recentDashBoardBooks, seriesBooks, statsCardsBottom, statsCardsTop } from "@/data";
+import { useOutsideClick } from "@/hooks/useOutsideClick";
+import { cn } from "@/lib/utils";
+import { pubType } from "@/types/types";
+import { ChevronRight, Filter, FilterX, MoveRight } from "lucide-react";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import React, { Ref, Suspense, useCallback, useState } from "react";
+import { BookCard } from "../_components/book-card";
+import { CollectionCard } from "../_components/collection-card";
+import { Header } from "../_components/header";
+import ProfileCompletionAlert from "../_components/ProfileCompletionAlert";
+import ProfileCompletionModal from "../_components/ProfileCompletionModal";
+import PublishTypeModal from "../_components/PublishTypeModal";
+import { StatCard } from "../_components/stat-card";
+
+interface Book {
+ id: string;
+ title: string;
+ price: string;
+ status: string;
+ statusColor: string;
+}
+
+interface ExtraProps {
+ isNft?: boolean;
+ isSeries?: boolean;
+}
+
+interface SectionProps {
+ title: string;
+ length: number;
+ linkHref?: string;
+ className?: string;
+ children: React.ReactNode;
+}
+
+const Page = ({ searchParams }: {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) => {
+ const router = useRouter();
+ const pathname = usePathname()
+ const searchParam = searchParams
+ const [showPublishModal, setShowPublishModal] = useState(false);
+ const [isLoading, setIsLoading] = useState(false)
+ const [filter, setFilter] = useState(false)
+ const [showProfileModal, setShowProfileModal] = useState(true);
+ const [showProfileAlert] = useState(true);
+
+ const handlePublishClick = () => setShowPublishModal(true);
+
+ const filterRef = useOutsideClick(() => setFilter(false)) as Ref
+
+ const updateSearchParams = useCallback((type: pubType, step: number) => {
+ // Ensure we are handling the right type here
+ const params = new URLSearchParams(
+ searchParam instanceof URLSearchParams ? searchParam.toString() : ''
+ );
+ params.set("type", type);
+ params.set("step", step.toString());
+
+ router.push(pathname.replace("manage-content", "publish") + '?' + params.toString());
+ }, [searchParam, pathname, router]);
+
+ const handleBookTypeSelect = (val: pubType) => {
+ updateSearchParams(val, 1)
+ setShowPublishModal(false);
+ };
+
+ const renderBookCards = (books: Book[], extraProps: ExtraProps = {}) =>
+ books.map((book) =>
+
+ {/* Search and Filters */}
+
+
+
+
+
+
+ {!filter ?
{ setFilter(() => true); console.log("yes") }} size={24} /> : { setFilter(() => false); console.log("no") }} size={24} />}
+
+
+ {filterOptions.map((label) => (
+
+ {label}
+
+
+
+ ))}
+
+
+ {filterOptions.map((label) => (
+
+ {label}
+
+
+
+ ))}
+
+ Publish a Book
+
+
+
+
+
+
+
+
+
+ Your Words
+ Deserve
+ the World
+
+
+
+
+
+
+
+
+ {/* Stats Cards */}
+ {
+ isLoading ?
:
+ {statsCardsTop.map((card) => (
+
+ }
+
+
+ {
+ isLoading ?
+ :
+ {statsCardsBottom.map((card) => (
+
+ }
+
+ {/* Recent Published Books */}
+
+ {renderBookCards(recentDashBoardBooks)}
+
+
+ {/* NFT Edition */}
+
+ {renderBookCards(nftBooks, { isNft: true })}
+
+
+ {/* Series */}
+
+ {renderBookCards(seriesBooks, { isSeries: true })}
+
+
+ {/* Collections */}
+
+ {collections.map((col) => (
+
+
+ {/* Publish Type Modal */}
+ {
+ showPublishModal && (
+
setShowPublishModal(false)} onSelect={handleBookTypeSelect} />
+ )
+ }
+
+ {/* Profile Completion Modal */}
+ setShowProfileModal(false)}
+ />
+ = ({ title, linkHref, children, className, length }) => (
+
+
+
{title}
+ {linkHref && (
+
+ View All
+
+ )}
+
+
} >
+
+ {children}
+
+
+
+ {linkHref && (
+ View All
+ )}
+
+ {Array.from({ length }).map((x, index: number) =>
)}
+
+ {Array.from({ length }).map((x, index) => )}
+
+ )
+}
+
+export default Page;
diff --git a/src/app/author/[authorId]/notifications/page.tsx b/src/app/author/[authorId]/notifications/page.tsx
new file mode 100644
index 0000000..acc15f5
--- /dev/null
+++ b/src/app/author/[authorId]/notifications/page.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import NotificationDetail from "@/app/dashboard/components/notification-detail";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import Avatar from "@mui/material/Avatar";
+import { Check, ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+export default function Component() {
+ const notifications = [
+ {
+ id: 1,
+ title: "New updates for Writers",
+ time: "12:16 PM",
+ isNew: true,
+ date: "Today",
+ },
+ {
+ id: 2,
+ title: "New updates for Writers",
+ time: "12:19 PM",
+ isNew: true,
+ date: "Today",
+ },
+ {
+ id: 3,
+ title: "New updates for Writers",
+ time: "12:16 PM",
+ isNew: true,
+ date: "Yesterday",
+ },
+ {
+ id: 4,
+ title: "New updates for Writers",
+ time: "12:19 PM",
+ isNew: true,
+ date: "Yesterday",
+ },
+ {
+ id: 5,
+ title: "New updates for Writers",
+ time: "12:25 PM",
+ isNew: true,
+ date: "Yesterday",
+ },
+ {
+ id: 6,
+ title: "New updates for Writers",
+ time: "12:19 PM",
+ isNew: true,
+ date: "12 April, 2025",
+ },
+ ];
+
+ const [selectedNotification, setSelectedNotification] = useState<
+ (typeof notifications)[0] | null
+ >(null);
+
+ const handleViewDetails = (notification: (typeof notifications)[0]) => {
+ setSelectedNotification(notification);
+ };
+
+ const handleBack = () => {
+ setSelectedNotification(null);
+ };
+
+ const handleDelete = (id: number) => {
+ console.log("Delete notification:", id);
+ setSelectedNotification(null);
+ };
+
+ const groupedNotifications = notifications.reduce((acc, notification) => {
+ if (!acc[notification.date]) {
+ acc[notification.date] = [];
+ }
+ acc[notification.date].push(notification);
+ return acc;
+ }, {} as Record);
+
+ return (
+
+
+
+
+
+ All Notifications (7)
+
+
+
+
+ Filter by
+
+
+
+
+
+
+
+ {Object.entries(groupedNotifications).map(([date, notifications]) => (
+
+
+
+ {date}
+
+
+
+ {notifications.map((notification) => (
+
+
+ W
+
+
+
+
+ {notification.title}
+
+ {notification.isNew && (
+
+ New
+
+ )}
+
+
+ {notification.time}
+
+
+
handleViewDetails(notification)}
+ >
+ View Details
+
+
+ ))}
+
+
+ ))}
+
+
+
+ )}
+
+ );
+}
diff --git a/src/app/author/[authorId]/page.tsx b/src/app/author/[authorId]/page.tsx
new file mode 100644
index 0000000..4e45117
--- /dev/null
+++ b/src/app/author/[authorId]/page.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import BookCard from '@/app/_components/BookCard';
+import CustomLink from '@/app/_components/CustomLink';
+import SearchBar from '@/app/_components/SearchBar';
+import { recentBooks, stats, topAuthors, trendingBooks } from '@/data';
+import { BadgeCheck, Bell } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Suspense, useState } from 'react';
+import { FiBook, FiDollarSign, FiEye, FiUsers } from 'react-icons/fi';
+import Bookloader from './_components/Bookloader';
+import ProfileCompletionAlert from './_components/ProfileCompletionAlert';
+import ProfileCompletionModal from './_components/ProfileCompletionModal';
+
+function Page() {
+ const [showProfileModal, setShowProfileModal] = useState(true);
+ const [showProfileAlert] = useState(true);
+ const [isLoading, setIsLoading] = useState(false)
+
+ return (
+
+
+
+
+
+ {/* Notification bell */}
+
+
+ 1
+
+
+
+ {/* Profile */}
+
+
+
+
+
Joseph Yanum
+
@joeyanum
+
+
+
+
+
+
+ {/* Header with Title */}
+
+ {/* Background Image */}
+
+
+
+
Your Words
+ Deserve the World
+
+
+
+ Publish Your First Book
+
+
+
+ {/* Stats Cards */}
+
+
+
+
+
Books Published
+ {isLoading ?
:
{stats.booksPublished}
}
+
+
+
+
+
+
+
+
+
+
Total Earning
+ {isLoading ?
:
${stats.totalEarning.toFixed(2)}
}
+
+
+
+
+
+
+
+
+
+
+
Total Reads
+ {isLoading ?
:
{stats.totalReads}
}
+
+
+
+
+
+
+
+
+
+
Followers
+ {isLoading ?
:
{stats.followers}
}
+
+
+
+
+
+
+
+
+ {/* Profile Completion Alert */}
+
+
+ {/* Recent Published Books */}
+
+
+
Recent Published Books
+
+ View All →
+
+
+ {
} >
+
+ {recentBooks.map(book => (
+
+ }
+
+
+ {/* Trending Books */}
+
+
+
Trending Books
+
+
}>
+
+ {trendingBooks.map(book => (
+
+
+
+
+ {/* Top Authors of the Week */}
+
+
+
Top Authors for the Week
+
+
} >
+
+ {topAuthors.map(author => (
+
+ ))}
+
+
+
+
+ {/* Profile Completion Modal */}
+
setShowProfileModal(false)}
+ />
+
+ {Array.from({ length }).map((x, index) =>
)}
+
({
+ firstName: "Joseph",
+ lastName: "Paul",
+ pseudonym: "Joe Paul",
+ email: "example@gmail.com",
+ bio: "",
+ profilePicture: null,
+ });
+
+ const fileInputRef = useRef(null);
+
+ const handleInputChange = (
+ e: ChangeEvent
+ ) => {
+ const { name, value } = e.target;
+ setFormData((prev) => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleImageUpload = (e: ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ setFormData((prev) => ({
+ ...prev,
+ profilePicture: reader.result as string,
+ }));
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const triggerFileInput = () => {
+ fileInputRef.current?.click();
+ };
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ console.log("Form submitted:", formData);
+
+ };
+
+ return (
+ <>
+
+
+ Edit Profile
+
+
+
+
+
+ )
+}
+
diff --git a/src/app/author/[authorId]/profile/_components/Social.tsx b/src/app/author/[authorId]/profile/_components/Social.tsx
new file mode 100644
index 0000000..fb400fa
--- /dev/null
+++ b/src/app/author/[authorId]/profile/_components/Social.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+
+export default function UpdateSocialLinks() {
+ const [socialLinks, setSocialLinks] = useState({
+ facebook: '',
+ instagram: '',
+ twitter: '',
+ linkedin: ''
+ });
+
+ const handleChange = (platform: keyof typeof socialLinks) => (e: React.ChangeEvent) => {
+ setSocialLinks({ ...socialLinks, [platform]: e.target.value });
+ };
+
+ const handleSubmit = () => {
+ console.log('Updated social links:', socialLinks);
+ };
+
+ const handleCancel = () => {
+ setSocialLinks({
+ facebook: '',
+ instagram: '',
+ twitter: '',
+ linkedin: ''
+ });
+ };
+
+ return (
+
+
+ Update Social Links
+
+ {/* Facebook */}
+
+
+ Facebook
+
+
+
+ {/* Instagram */}
+
+
+ Instagram
+
+
+
+ {/* X (Twitter) */}
+
+
+ X
+
+
+
+
+ {/* LinkedIn */}
+
+
+ Linked In
+
+
+
+
+
+ Cancel
+
+
+ Save Change
+
+
+
+
+ {label}
+
+
+
+
setter(e.target.value)}
+ className="w-full pl-12 pr-4 py-4 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+ />
+
+ {errors.oldPassword && (
+
{errors.oldPassword}
+ )}
+
+
+
+ Total
+ 17
+
+
+
+ Verified
+ 12
+
+
+
+ Unverified
+ 5
+
+
+
+
+
+ {followers.map((follower) => (
+
+
+
+
+ {/*
+
+
{follower.name}
+
+
+
+
+ View Profile
+
+
+
+
+ ))}
+
+
([])
+
+ const handleSelect = (genre: string) => {
+ if (!selectedGenres.includes(genre)) {
+ setSelectedGenres([...selectedGenres, genre])
+ }
+ }
+
+ const removeGenre = (genre: string) => {
+ setSelectedGenres(selectedGenres.filter((g) => g !== genre))
+ }
+
+ return (
+ <>
+
+
+
+
+ Genre specialization(s)
+
+
+
handleSelect(e.target.value)}
+ >
+ Genres
+ {allGenres.map((genre) => (
+
+ {genre}
+
+ ))}
+
+
+
+ {selectedGenres.map((genre) => (
+
+ {genre}
+ removeGenre(genre)} className="text-blue-500 hover:text-blue-800">
+ ×
+
+
+ ))}
+
+
+
+
+ Cancel
+
+
+ Save Change
+
+
+
+
+
+ {navItems.map((item) => (
+ handleClick(item.href)} key={item.label} className={cn(" w-full text-[#5D5D5D] text-body-large cursor-pointer p-4 md:p-0 md:py-3 font-normal text-start", searchParam.get("page") === item.href || (!searchParam.get("page") && item.href === "profile")
+ && "md:px-3 md:rounded-base bg-neutral-100"
+ )}>
+ {item.label}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/app/author/[authorId]/profile/_components/signOut.tsx b/src/app/author/[authorId]/profile/_components/signOut.tsx
new file mode 100644
index 0000000..0275f3f
--- /dev/null
+++ b/src/app/author/[authorId]/profile/_components/signOut.tsx
@@ -0,0 +1,7 @@
+
+
+export default function SignOut() {
+ return (
+ signOut
+ )
+}
diff --git a/src/app/author/[authorId]/profile/layout.tsx b/src/app/author/[authorId]/profile/layout.tsx
new file mode 100644
index 0000000..ae0e0d1
--- /dev/null
+++ b/src/app/author/[authorId]/profile/layout.tsx
@@ -0,0 +1,20 @@
+import "@/app/globals.css";
+import type React from "react";
+import { Header } from "../_components/header";
+import { ProfileSidebar } from "./_components/profilesidebar";
+
+export default function RootLayout({ children }: { children: React.ReactNode; }) {
+ return (
+ <>
+
+
+
+ );
+}
+
+
diff --git a/src/app/author/[authorId]/profile/page.tsx b/src/app/author/[authorId]/profile/page.tsx
new file mode 100644
index 0000000..8249281
--- /dev/null
+++ b/src/app/author/[authorId]/profile/page.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useSearchParams } from "next/navigation";
+import { ProfileForm } from "./_components/ProfileForm";
+import UpdateSocialLinks from "./_components/Social";
+import UpdatePasswordForm from "./_components/UpdatePasswordForm";
+import Followers from "./_components/followers";
+import GenreSelector from "./_components/genre";
+import { ProfileSidebar } from "./_components/profilesidebar";
+import SignOut from "./_components/signOut";
+
+function ProfilePage() {
+ const searchparams = useSearchParams()
+ const page = searchparams.get("page")
+
+ return (
+ <>
+ {page === "social" ?
+
+
+
+
+ This is the publication page. You can view your published books here.
+
+
+
= ({
+ formData,
+ setFormData, bookType,
+ onNext,
+}) => {
+ return (
+ // change to form later
+
+
+
+ Book Content
+
+
+
+ {bookType === "Series" && (
+
+
+ setFormData({ seriesType: e.target.value })
+ }
+ >
+ Select Series Type
+ Tragedy
+ Romance
+ Comedy
+
+
+
+
)
+ }
+
+
+ setFormData({ bookTitle: e.target.value })} />
+
+
+ setFormData({ subtitle: e.target.value })
+ }
+ />
+
+
+
+
+ setFormData({ language: e.target.value })
+ }
+ >
+ Select Language
+ English
+ Spanish
+ French
+
+
+
+
+
+
+ setFormData({ isbn: e.target.value })
+ }
+ />
+
+
+
+
+
+ {bookType === "Exclusive NFT Edition" &&
}
+
+
+
+ Back
+
+
+ Continue to Details
+
+
+
= ({
+ formData,
+ setFormData,
+ onNext,
+ onBack, otherAuthors = true,
+}) => {
+ const [showContributorTypeModal, setShowContributorTypeModal] =
+ useState(false);
+ const [showContributorDetailsModal, setShowContributorDetailsModal] =
+ useState(false);
+ const [selectedContributorType, setSelectedContributorType] = useState("");
+
+ const handleSelectContributorType: (x: string) => void = (type: string) => {
+ setSelectedContributorType(type);
+ setShowContributorTypeModal(false);
+ setShowContributorDetailsModal(true);
+ };
+
+ const handleAddContributor = (contributor: {
+ name: string;
+ email: string;
+ }) => {
+ setFormData({
+ ...formData,
+ contributors: [
+ ...formData.contributors,
+ { ...contributor, type: selectedContributorType },
+ ],
+ });
+ setShowContributorDetailsModal(false);
+ };
+
+ return (
+ // change to form later
+
+
+
+ Book Details
+
+
+
+
+
+ {otherAuthors &&
+
+ Contributing Authors
+
+
setShowContributorTypeModal(true)}
+ >
+
Add
+
setShowContributorTypeModal(true)}
+ className="p-2 border border-[#e7e7e7] cursor-pointer rounded-md text-neutral-600 hover:border-[#d6ecff] hover:bg-[#f8fbff] transition-colors"
+ >
+
+
+
+
+
+ {formData.contributors.map(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (contributor: any, index: number) => (
+
+
+ {contributor.name}
+
+ {
+ const newContributors = formData.contributors.filter(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (_: any, i: number) => i !== index
+ );
+ setFormData({
+ ...formData,
+ contributors: newContributors,
+ });
+ }}
+ className="text-neutral-600 hover:text-neutral-900"
+ >
+
+
+ )
+ )}
+
}
+
+
+
+
{
+ if (
+ e.target.value &&
+ !formData.genres.includes(e.target.value)
+ ) {
+ setFormData({
+ ...formData,
+ genres: [...formData.genres, e.target.value],
+ });
+ }
+ }}
+ >
+ Genres
+ {AVAILABLE_GENRES.map((genre, index) => {genre} )}
+
+
+
+
+ {formData.genres.map((genre: string, index: number) => (
+
+ {genre}
+ {
+ setFormData({
+ ...formData,
+ genres: formData.genres.filter(
+ (g: string) => g !== genre
+ ),
+ });
+ }}
+ className="text-neutral-600 hover:text-neutral-900"
+ >
+
+
+ ))}
+
+
+
+
+
+
+
{
+ if (
+ e.target.value &&
+ !formData.tags.includes(e.target.value)
+ ) {
+ setFormData({
+ ...formData,
+ tags: [...formData.tags, e.target.value],
+ });
+ }
+ }}
+ >
+ Select tag
+ {AVAILABLE_TAGS.map((tag, index) => {tag} )}
+
+
+
+
+ {formData.tags.map((tag: string, index: number) => (
+
+ {tag}
+ {
+ setFormData({
+ ...formData,
+ tags: formData.tags.filter(
+ (t: string) => t !== tag
+ ),
+ });
+ }}
+ className="text-neutral-600 hover:text-neutral-900"
+ >
+
+
+ ))}
+
+
+
+
+