From 08be74a00bcafa9df8970b0fd14565d3e337a7d7 Mon Sep 17 00:00:00 2001 From: Iwueseiter Date: Fri, 18 Jul 2025 13:28:51 +0100 Subject: [PATCH] refac: refactored all components to align with figma design --- next.config.ts | 27 -- src/app/dashboard/discussions/page.tsx | 171 --------- src/app/dashboard/transactions/page.tsx | 340 ----------------- src/app/dashboard/wishlist/page.tsx | 201 ----------- src/app/layout.tsx | 2 - .../components/reader-side-navbar.tsx | 2 +- .../discussions-and-clubs}/ClubCard.tsx | 0 .../discussions-and-clubs}/[id]/page.tsx | 0 .../components/AddGuest.tsx | 0 .../components/ClubDetails.tsx | 0 .../components/ClubDiscussion.tsx | 0 .../components/ClubToolBar.tsx | 0 .../components/CreateEvent.tsx | 0 .../components/Modal.tsx | 0 .../components/ScheduleEvent.tsx | 0 .../components/StartEvent.tsx | 0 .../components/SuccessModal.tsx | 0 .../discussions-and-clubs/page.tsx | 172 ++++++++- .../notifications/notification-detail.tsx | 0 .../reader-dashboard/notifications/page.tsx | 194 +++++++++- .../profile}/following/page.tsx | 0 .../profile}/layout.tsx | 0 src/app/reader-dashboard/profile/page.tsx | 263 +++++++++++++- .../profile}/preferences/page.tsx | 0 .../profile}/privacy/page.tsx | 0 .../profile}/sign-out/page.tsx | 0 .../reader-dashboard/reading-stats/page.tsx | 3 - .../stats-and-achievements/page.tsx | 0 .../reader-dashboard/transactions/page.tsx | 341 +++++++++++++++++- .../transactions/transaction-details.tsx | 0 src/app/reader-dashboard/wishlist/page.tsx | 202 ++++++++++- src/app/reader-profile/page.tsx | 260 ------------- src/app/waiting-room/page.tsx | 2 +- .../analytics/page.tsx | 0 .../components/notification-detail.tsx | 0 .../earnings/page.tsx | 0 .../feedback/page.tsx | 0 .../layout.tsx | 0 .../manage-content/BookContentStep.tsx | 0 .../manage-content/BookCreationFlow.tsx | 0 .../manage-content/BookDetailsStep.tsx | 0 .../ContributorDetailsModal.tsx | 0 .../manage-content/ContributorTypeModal.tsx | 0 .../manage-content/Manage-content.tsx | 0 .../manage-content/PreviewModal.tsx | 0 .../manage-content/PricingStep.tsx | 0 .../manage-content/ProgressStepper.tsx | 0 .../manage-content/PublishTypeModal.tsx | 0 .../manage-content/PublishingNft/Pricing.tsx | 0 .../PublishingNft/bookContent.tsx | 0 .../PublishingNft/bookDetail.tsx | 0 .../manage-content/PublishingNft/genre.tsx | 0 .../manage-content/PublishingNft/page.tsx | 0 .../manage-content/StepIndicator.tsx | 0 .../manage-content/SuccessModal.tsx | 0 .../manage-content/book-preview-modal.tsx | 0 .../manage-content/example.tsx | 0 .../manage-content/loading.tsx | 0 .../manage-content/page.tsx | 0 .../notifications/notification-detail.tsx | 66 ++++ .../notifications/page.tsx | 0 .../{dashboard => writer-dashboard}/page.tsx | 0 .../profile/component/ProfileForm.tsx | 0 .../profile/component/Social.tsx | 0 .../profile/component/UpdatePasswordForm.tsx | 0 .../profile/component/genre.tsx | 0 .../profile/component/profileHeader.tsx | 0 .../profile/component/profilesidebar.tsx | 0 .../profile/genre/page.tsx | 0 .../profile/layout.tsx | 0 .../profile/page.tsx | 0 .../profile/password/page.tsx | 0 .../profile/social/page.tsx | 0 src/components/dashboard/sidebar.tsx | 36 +- .../stats-achievements/goals-section.tsx | 2 +- 75 files changed, 1236 insertions(+), 1048 deletions(-) delete mode 100644 next.config.ts delete mode 100644 src/app/dashboard/discussions/page.tsx delete mode 100644 src/app/dashboard/transactions/page.tsx delete mode 100644 src/app/dashboard/wishlist/page.tsx rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/ClubCard.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/[id]/page.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/AddGuest.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/ClubDetails.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/ClubDiscussion.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/ClubToolBar.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/CreateEvent.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/Modal.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/ScheduleEvent.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/StartEvent.tsx (100%) rename src/app/{dashboard/discussions => reader-dashboard/discussions-and-clubs}/components/SuccessModal.tsx (100%) rename src/app/{dashboard => reader-dashboard}/notifications/notification-detail.tsx (100%) rename src/app/{reader-profile => reader-dashboard/profile}/following/page.tsx (100%) rename src/app/{reader-profile => reader-dashboard/profile}/layout.tsx (100%) rename src/app/{reader-profile => reader-dashboard/profile}/preferences/page.tsx (100%) rename src/app/{reader-profile => reader-dashboard/profile}/privacy/page.tsx (100%) rename src/app/{reader-profile => reader-dashboard/profile}/sign-out/page.tsx (100%) delete mode 100644 src/app/reader-dashboard/reading-stats/page.tsx rename src/app/{dashboard => reader-dashboard}/stats-and-achievements/page.tsx (100%) rename src/app/{dashboard => reader-dashboard}/transactions/transaction-details.tsx (100%) delete mode 100644 src/app/reader-profile/page.tsx rename src/app/{dashboard => writer-dashboard}/analytics/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/components/notification-detail.tsx (100%) rename src/app/{dashboard => writer-dashboard}/earnings/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/feedback/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/layout.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/BookContentStep.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/BookCreationFlow.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/BookDetailsStep.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/ContributorDetailsModal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/ContributorTypeModal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/Manage-content.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PreviewModal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PricingStep.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/ProgressStepper.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishTypeModal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishingNft/Pricing.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishingNft/bookContent.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishingNft/bookDetail.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishingNft/genre.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/PublishingNft/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/StepIndicator.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/SuccessModal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/book-preview-modal.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/example.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/loading.tsx (100%) rename src/app/{dashboard => writer-dashboard}/manage-content/page.tsx (100%) create mode 100644 src/app/writer-dashboard/notifications/notification-detail.tsx rename src/app/{dashboard => writer-dashboard}/notifications/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/ProfileForm.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/Social.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/UpdatePasswordForm.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/genre.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/profileHeader.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/component/profilesidebar.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/genre/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/layout.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/password/page.tsx (100%) rename src/app/{dashboard => writer-dashboard}/profile/social/page.tsx (100%) diff --git a/next.config.ts b/next.config.ts deleted file mode 100644 index 1b8d344..0000000 --- a/next.config.ts +++ /dev/null @@ -1,27 +0,0 @@ -// next.config.js -// /** @type {import('next').NextConfig} */ -// const nextConfig = { -// reactStrictMode: true, -// experimental: { -// turbo: { -// enabled: true, // Set turbo to true within an object -// }, -// }, -// }; - -// export default nextConfig; - - -// /** @type {import('next').NextConfig} */ -// const nextConfig = {}; - -// module.exports = nextConfig; - - -import type { NextConfig } from "next"; - -const nextConfig: NextConfig = { - /* config options here */ -}; - -export default nextConfig; diff --git a/src/app/dashboard/discussions/page.tsx b/src/app/dashboard/discussions/page.tsx deleted file mode 100644 index 5c1245a..0000000 --- a/src/app/dashboard/discussions/page.tsx +++ /dev/null @@ -1,171 +0,0 @@ -"use client"; -import { Header } from "@/components/dashboard/header"; -import React, { useState } from "react"; -import ClubsToolbar from "./components/ClubToolBar"; -import ClubCard from "./ClubCard"; -import { ClubDetailsProps } from "@/lib/types"; -import ClubModal from "./components/ClubDetails"; -import CreateClubModal from "./components/CreateEvent"; -import ClubDiscussion from "./components/ClubDiscussion"; -import StartEventModal from "./components/StartEvent"; -import ScheduleEvent from "./components/ScheduleEvent"; -import EventScheduleModal from "./components/SuccessModal"; - -const clubCards: ClubDetailsProps[] = [ - { - id: "1", - name: "Fantasy Enthusiasts", - isPublic: true, - memberCount: 1500, - sessionsInfo: "2+ Sessions a month", - unreadNotifications: 3, - authorAvatars: [ - "https://randomuser.me/api/portraits/men/32.jpg", - "https://randomuser.me/api/portraits/women/44.jpg", - "https://randomuser.me/api/portraits/men/32.jpg" - ], - }, - { - id: "2", - name: "Book Lovers", - isPublic: false, - memberCount: 1500, - sessionsInfo: "2+ Sessions in three months", - unreadNotifications: 2, - authorAvatars: [ - "https://randomuser.me/api/portraits/men/32.jpg", - "https://randomuser.me/api/portraits/women/44.jpg", - ], - }, - { - id: "3", - name: "Fantasy Enthusiasts", - isPublic: true, - memberCount: 1500, - sessionsInfo: "2+ Sessions a month", - unreadNotifications: 3, - authorAvatars: [ - "https://randomuser.me/api/portraits/men/32.jpg", - "https://randomuser.me/api/portraits/women/44.jpg", - "https://randomuser.me/api/portraits/men/32.jpg" - - ], - }, - { - id: "4", - name: "Book Lovers", - isPublic: false, - memberCount: 1500, - sessionsInfo: "2+ Sessions a month", - unreadNotifications: 10, - authorAvatars: [ - "https://randomuser.me/api/portraits/men/32.jpg", - "https://randomuser.me/api/portraits/women/44.jpg", - ], - }, -]; - -export default function DiscussionDashboard() { - const [selectedClub, setSelectedClub] = useState( - null - ); - const [modalOpen, setModalOpen] = useState(false); - const [createEventOpen, setCreateEventOpen] = useState(false); - const [startEventOpen, setStartEventOpen] = useState(false); - const [scheduleEventOpen, setScheduleEventOpen] = useState(false); - const [successModal, setSuccessModal] = useState(false); - - const [activePage, setActivePage] = useState< - "index" | "discussion" | "start" - >("index"); - - function openModal(club: ClubDetailsProps) { - setSelectedClub(club); - setModalOpen(true); - } - - function closeModal() { - setModalOpen(false); - setSelectedClub(null); - } - - function joinClub() { - setCreateEventOpen(true); - closeModal(); - } - - return ( -
-
-
- {activePage === "index" ? ( -
-
- - - {clubCards.map( - ({ - id, - name, - isPublic, - memberCount, - sessionsInfo, - authorAvatars, - unreadNotifications, - }) => ( - - ) - )} -
-
- ) : ( -
- setStartEventOpen(true)} /> -
- )} - - setCreateEventOpen(true)} - instantEvent={() => setScheduleEventOpen(true)} - isOpen={startEventOpen} - onClose={() => setStartEventOpen(false)} - /> - - - - setCreateEventOpen(false)} - onSubmit={() => setActivePage("discussion")} - /> - - setScheduleEventOpen(false)} - onSubmit={() => setSuccessModal(true)} - /> - - setSuccessModal(false)} - onSubmit={() => {}} - /> -
-
- ); -} diff --git a/src/app/dashboard/transactions/page.tsx b/src/app/dashboard/transactions/page.tsx deleted file mode 100644 index 63aa5db..0000000 --- a/src/app/dashboard/transactions/page.tsx +++ /dev/null @@ -1,340 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; -import { Input } from "@/components/ui/input"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { - ChevronLeft, - ChevronRight, -} from "lucide-react"; -import { Header } from "@/components/dashboard/header"; -import stk from "../../../../public/image 2.svg" -import Image from "next/image"; -import TransactionDetail from "./transaction-details"; - -const transactionData = [ - { - id: "Tran-124B", - type: "Monthly Subscription", - amount: "100.00 STRK", - status: "Successful", - date: "26 April", - details: { - title: "Monthly Subscription", - subtitle: "Premium Plan", - category: "Subscription", - amountPaid: "100.00 STRK", - platformCommission: "5.00 STRK", - transactionType: "Monthly Subscription", - status: "Successful", - date: "26 April, 2025", - time: "14:32", - nftId: "#0001", - buyer: "USER-0001", - transactionId: "TRANS-00110", - transactionHash: "0x5a3f7b...d6e7f8g", - confirmationStatus: "12/12", - }, - }, - { - id: "Tran-124B", - type: "Book Purchase", - amount: "800.45 STRK", - status: "Successful", - date: "25 April", - details: { - title: "99 Laws of Power", - subtitle: "NFT Edition", - category: "eBook", - amountPaid: "320.05 STRK", - platformCommission: "32 STRK", - transactionType: "Book Purchase", - status: "Successful", - date: "12 March, 2025", - time: "16:32", - nftId: "#0002", - buyer: "USER-0001", - transactionId: "TRANS-00112", - transactionHash: "0x5a3f7b...d6e7f8g", - confirmationStatus: "12/12", - }, - }, - { - id: "Tran-124B", - type: "Book Purchase", - amount: "56.78 STRK", - status: "Failed", - date: "20 April", - details: { - title: "Digital Marketing Guide", - subtitle: "Standard Edition", - category: "eBook", - amountPaid: "56.78 STRK", - platformCommission: "2.84 STRK", - transactionType: "Book Purchase", - status: "Failed", - date: "20 April, 2025", - time: "10:15", - nftId: "#0003", - buyer: "USER-0001", - transactionId: "TRANS-00113", - transactionHash: "0x5a3f7b...d6e7f8g", - confirmationStatus: "0/12", - }, - }, - { - id: "Tran-124B", - type: "NFT Purchase", - amount: "200.5 STRK", - status: "Successful", - date: "18 April", - details: { - title: "Crypto Art Collection", - subtitle: "Limited Edition", - category: "NFT", - amountPaid: "200.5 STRK", - platformCommission: "10.03 STRK", - transactionType: "NFT Purchase", - status: "Successful", - date: "18 April, 2025", - time: "09:45", - nftId: "#0004", - buyer: "USER-0001", - transactionId: "TRANS-00114", - transactionHash: "0x5a3f7b...d6e7f8g", - confirmationStatus: "12/12", - }, - }, - { - id: "Tran-124B", - type: "NFT Purchase", - amount: "540.569 STRK", - status: "Successful", - date: "18 April", - details: { - title: "Digital Collectible", - subtitle: "Rare Edition", - category: "NFT", - amountPaid: "540.569 STRK", - platformCommission: "27.03 STRK", - transactionType: "NFT Purchase", - status: "Successful", - date: "18 April, 2025", - time: "11:20", - nftId: "#0005", - buyer: "USER-0001", - transactionId: "TRANS-00115", - transactionHash: "0x5a3f7b...d6e7f8g", - confirmationStatus: "12/12", - }, - }, -]; - -export default function TransactionPage() { - const [activeFilter, setActiveFilter] = useState("This Week"); - const [fromDate, setFromDate] = useState(""); - const [toDate, setToDate] = useState(""); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [selectedTransaction, setSelectedTransaction] = useState(null); - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const handleViewDetails = (transaction: any) => { - setSelectedTransaction(transaction); - }; - - const closeModal = () => { - setSelectedTransaction(null); - }; - - return ( -
-
- - {/* Content */} -
-
- {/* Transaction History Header */} -
-

- Transaction History -

- - {/* Filter Controls */} -
-
- {["This Week", "This Month", "This Year"].map((filter) => ( - - ))} - - setFromDate(e.target.value)} - className="border border-[#E7E7E7] placeholder:text-[#D1D1D1] w-32 h-9" - /> - - to - - setToDate(e.target.value)} - className="w-32 h-9 border border-[#E7E7E7] placeholder:text-[#D1D1D1]" - /> - - -
- - -
-
- - {/* Table */} -
- - - - - Transaction ID - - - Transaction Type - - - Amount (STRK) - - - Status - - - Date - - - - - - {transactionData.map((transaction, index) => ( - - - {transaction.id} - - {transaction.type} - -
-
- -
- {transaction.amount} -
- - - - {transaction.status} - - - - {transaction.date} - - - - - - ))} - -
-
- - {/* Pagination */} -
-
-

Showing 1 to 5 of 12

-
- - - - - - 1 - - - 2 - - - 3 - - - ... - - - 10 - - - 11 - - - 12 - -
-
-
-
-
- - {/* Transaction Detail Modal */} - -
- ); -} diff --git a/src/app/dashboard/wishlist/page.tsx b/src/app/dashboard/wishlist/page.tsx deleted file mode 100644 index 519fe2f..0000000 --- a/src/app/dashboard/wishlist/page.tsx +++ /dev/null @@ -1,201 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Card, CardContent } from "@/components/ui/card"; -import { Search, Heart, Star, Images } from "lucide-react"; -import { Header } from "@/components/dashboard/header"; -import Image from "next/image"; -import nft from "../../../../public/Group 13.svg" - -const books = [ - { - id: 1, - title: "Native Invisibility", - author: "Darrin Collins", - price: "$10", - rating: 4.5, - series: "4 Series", - image: "/bookCover.png", - isLiked: true, - nft: false, - }, - { - id: 2, - title: "Native Invisibility", - author: "Darrin Collins", - price: "$10", - rating: 4.5, - series: "4 Series", - image: "/bookCover.png", - isLiked: true, - nft: false, - }, - { - id: 3, - title: "Native Invisibility", - author: "Darrin Collins", - price: "$10", - rating: 4.5, - series: "", - image: "/bookCover.png", - isLiked: true, - nft: true, - }, - { - id: 4, - title: "Native Invisibility", - author: "Darrin Collins", - price: "$10", - rating: 4.5, - series: "", - image: "/bookCover.png", - isLiked: true, - nft: false, - }, -]; - -export default function WishlistPage() { - const [searchQuery, setSearchQuery] = useState(""); - const [bookType, setBookType] = useState("all"); - const [genre, setGenre] = useState("all"); - const [likedBooks, setLikedBooks] = useState([1, 2, 3, 4]); - - const toggleLike = (bookId: number) => { - setLikedBooks((prev) => - prev.includes(bookId) - ? prev.filter((id) => id !== bookId) - : [...prev, bookId] - ); - }; - - const buyAllBooks = () => { - alert(`Purchasing ${likedBooks.length} books from wishlist!`); - }; - - return ( -
-
- - {/* Content */} -
- {/* Search and Filters */} -
-
-
- - setSearchQuery(e.target.value)} - /> -
- - -
-
-
-
- - {/* Books Section */} -
-
-
-

Books

- -
- -
- {books.map((book) => ( - - -
- {book.title} - -
-
- {book.nft && nft} -

- {book.title} -

-
- - By {book.author} - -
-
-
- {book.price} -
- - {book.rating} -
-
- {book.series && ( -
- - {book.series} -
- )} -
- - - ))} -
-
-
-
-
- ); -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 02140ef..1cdcc95 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,5 @@ import type { Metadata } from "next"; import "./globals.css"; -import NavBar from "@/components/landingpage/NavBar"; -import Footer from "@/components/landingpage/Footer"; import { WalletProvider } from "../components/blockchain/WalletProvider"; import { StarknetProvider } from "../components/blockchain/Providers"; import { Inter } from "next/font/google"; diff --git a/src/app/reader-dashboard/components/reader-side-navbar.tsx b/src/app/reader-dashboard/components/reader-side-navbar.tsx index 5a6faa1..623bffb 100644 --- a/src/app/reader-dashboard/components/reader-side-navbar.tsx +++ b/src/app/reader-dashboard/components/reader-side-navbar.tsx @@ -30,7 +30,7 @@ export function Sidebar() { { icon: DoorClosed, label: "Reading Stats", - href: "/reader-dashboard/reading-stats", + href: "/reader-dashboard/Stats-and-achievements", }, { icon: Heart, diff --git a/src/app/dashboard/discussions/ClubCard.tsx b/src/app/reader-dashboard/discussions-and-clubs/ClubCard.tsx similarity index 100% rename from src/app/dashboard/discussions/ClubCard.tsx rename to src/app/reader-dashboard/discussions-and-clubs/ClubCard.tsx diff --git a/src/app/dashboard/discussions/[id]/page.tsx b/src/app/reader-dashboard/discussions-and-clubs/[id]/page.tsx similarity index 100% rename from src/app/dashboard/discussions/[id]/page.tsx rename to src/app/reader-dashboard/discussions-and-clubs/[id]/page.tsx diff --git a/src/app/dashboard/discussions/components/AddGuest.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/AddGuest.tsx similarity index 100% rename from src/app/dashboard/discussions/components/AddGuest.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/AddGuest.tsx diff --git a/src/app/dashboard/discussions/components/ClubDetails.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/ClubDetails.tsx similarity index 100% rename from src/app/dashboard/discussions/components/ClubDetails.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/ClubDetails.tsx diff --git a/src/app/dashboard/discussions/components/ClubDiscussion.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/ClubDiscussion.tsx similarity index 100% rename from src/app/dashboard/discussions/components/ClubDiscussion.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/ClubDiscussion.tsx diff --git a/src/app/dashboard/discussions/components/ClubToolBar.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/ClubToolBar.tsx similarity index 100% rename from src/app/dashboard/discussions/components/ClubToolBar.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/ClubToolBar.tsx diff --git a/src/app/dashboard/discussions/components/CreateEvent.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/CreateEvent.tsx similarity index 100% rename from src/app/dashboard/discussions/components/CreateEvent.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/CreateEvent.tsx diff --git a/src/app/dashboard/discussions/components/Modal.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/Modal.tsx similarity index 100% rename from src/app/dashboard/discussions/components/Modal.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/Modal.tsx diff --git a/src/app/dashboard/discussions/components/ScheduleEvent.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/ScheduleEvent.tsx similarity index 100% rename from src/app/dashboard/discussions/components/ScheduleEvent.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/ScheduleEvent.tsx diff --git a/src/app/dashboard/discussions/components/StartEvent.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/StartEvent.tsx similarity index 100% rename from src/app/dashboard/discussions/components/StartEvent.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/StartEvent.tsx diff --git a/src/app/dashboard/discussions/components/SuccessModal.tsx b/src/app/reader-dashboard/discussions-and-clubs/components/SuccessModal.tsx similarity index 100% rename from src/app/dashboard/discussions/components/SuccessModal.tsx rename to src/app/reader-dashboard/discussions-and-clubs/components/SuccessModal.tsx diff --git a/src/app/reader-dashboard/discussions-and-clubs/page.tsx b/src/app/reader-dashboard/discussions-and-clubs/page.tsx index 31591c3..5c1245a 100644 --- a/src/app/reader-dashboard/discussions-and-clubs/page.tsx +++ b/src/app/reader-dashboard/discussions-and-clubs/page.tsx @@ -1,3 +1,171 @@ -export default function DiscussionsPage() { - return
Discussions & Clubs
; +"use client"; +import { Header } from "@/components/dashboard/header"; +import React, { useState } from "react"; +import ClubsToolbar from "./components/ClubToolBar"; +import ClubCard from "./ClubCard"; +import { ClubDetailsProps } from "@/lib/types"; +import ClubModal from "./components/ClubDetails"; +import CreateClubModal from "./components/CreateEvent"; +import ClubDiscussion from "./components/ClubDiscussion"; +import StartEventModal from "./components/StartEvent"; +import ScheduleEvent from "./components/ScheduleEvent"; +import EventScheduleModal from "./components/SuccessModal"; + +const clubCards: ClubDetailsProps[] = [ + { + id: "1", + name: "Fantasy Enthusiasts", + isPublic: true, + memberCount: 1500, + sessionsInfo: "2+ Sessions a month", + unreadNotifications: 3, + authorAvatars: [ + "https://randomuser.me/api/portraits/men/32.jpg", + "https://randomuser.me/api/portraits/women/44.jpg", + "https://randomuser.me/api/portraits/men/32.jpg" + ], + }, + { + id: "2", + name: "Book Lovers", + isPublic: false, + memberCount: 1500, + sessionsInfo: "2+ Sessions in three months", + unreadNotifications: 2, + authorAvatars: [ + "https://randomuser.me/api/portraits/men/32.jpg", + "https://randomuser.me/api/portraits/women/44.jpg", + ], + }, + { + id: "3", + name: "Fantasy Enthusiasts", + isPublic: true, + memberCount: 1500, + sessionsInfo: "2+ Sessions a month", + unreadNotifications: 3, + authorAvatars: [ + "https://randomuser.me/api/portraits/men/32.jpg", + "https://randomuser.me/api/portraits/women/44.jpg", + "https://randomuser.me/api/portraits/men/32.jpg" + + ], + }, + { + id: "4", + name: "Book Lovers", + isPublic: false, + memberCount: 1500, + sessionsInfo: "2+ Sessions a month", + unreadNotifications: 10, + authorAvatars: [ + "https://randomuser.me/api/portraits/men/32.jpg", + "https://randomuser.me/api/portraits/women/44.jpg", + ], + }, +]; + +export default function DiscussionDashboard() { + const [selectedClub, setSelectedClub] = useState( + null + ); + const [modalOpen, setModalOpen] = useState(false); + const [createEventOpen, setCreateEventOpen] = useState(false); + const [startEventOpen, setStartEventOpen] = useState(false); + const [scheduleEventOpen, setScheduleEventOpen] = useState(false); + const [successModal, setSuccessModal] = useState(false); + + const [activePage, setActivePage] = useState< + "index" | "discussion" | "start" + >("index"); + + function openModal(club: ClubDetailsProps) { + setSelectedClub(club); + setModalOpen(true); + } + + function closeModal() { + setModalOpen(false); + setSelectedClub(null); + } + + function joinClub() { + setCreateEventOpen(true); + closeModal(); + } + + return ( +
+
+
+ {activePage === "index" ? ( +
+
+ + + {clubCards.map( + ({ + id, + name, + isPublic, + memberCount, + sessionsInfo, + authorAvatars, + unreadNotifications, + }) => ( + + ) + )} +
+
+ ) : ( +
+ setStartEventOpen(true)} /> +
+ )} + + setCreateEventOpen(true)} + instantEvent={() => setScheduleEventOpen(true)} + isOpen={startEventOpen} + onClose={() => setStartEventOpen(false)} + /> + + + + setCreateEventOpen(false)} + onSubmit={() => setActivePage("discussion")} + /> + + setScheduleEventOpen(false)} + onSubmit={() => setSuccessModal(true)} + /> + + setSuccessModal(false)} + onSubmit={() => {}} + /> +
+
+ ); } diff --git a/src/app/dashboard/notifications/notification-detail.tsx b/src/app/reader-dashboard/notifications/notification-detail.tsx similarity index 100% rename from src/app/dashboard/notifications/notification-detail.tsx rename to src/app/reader-dashboard/notifications/notification-detail.tsx diff --git a/src/app/reader-dashboard/notifications/page.tsx b/src/app/reader-dashboard/notifications/page.tsx index 680a38e..ac03fed 100644 --- a/src/app/reader-dashboard/notifications/page.tsx +++ b/src/app/reader-dashboard/notifications/page.tsx @@ -1,3 +1,193 @@ -export default function NotificationsPage() { - return
Notifications
; +"use client"; + +import { useState } from "react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { CheckCheck } from "lucide-react"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Header } from "@/components/dashboard/header"; +import { NotificationDetailPage } from "./notification-detail"; + +const notifications = [ + { + id: 1, + title: "New updates for Writers", + time: "12:18 PM", + date: "Today", + isNew: true, + content: "Step up your writing with our latest update", + }, + { + id: 2, + title: "New updates for Writers", + time: "12:18 PM", + date: "Today", + isNew: true, + content: "Step up your writing with our latest update", + }, + { + id: 3, + title: "New updates for Writers", + time: "12:18 PM", + date: "Yesterday", + isNew: true, + content: "Step up your writing with our latest update", + }, + { + id: 4, + title: "New updates for Writers", + time: "12:18 PM", + date: "Yesterday", + isNew: true, + content: "Step up your writing with our latest update", + }, + { + id: 5, + title: "New updates for Writers", + time: "12:18 PM", + date: "Yesterday", + isNew: true, + content: "Step up your writing with our latest update", + }, + { + id: 6, + title: "New updates for Writers", + time: "12:18 PM", + date: "12 April, 2025", + isNew: true, + content: "Step up your writing with our latest update", + }, +]; + +function NotificationPage() { + const [filter, setFilter] = useState(""); + const [viewNotf, setViewNotf] = useState(false); + + const groupedNotifications = notifications.reduce((acc, notification) => { + if (!acc[notification.date]) { + acc[notification.date] = []; + } + acc[notification.date].push(notification); + return acc; + }, {} as Record); + + function backhandler() { + setViewNotf(false); + } + function viewNotificationhandler() { + setViewNotf(true); + } + if (viewNotf) { + return ; + } + + return ( +
+ {/* Header */} +
+ + {/* Content */} +
+
+ {/* Header */} +
+
+
+
+

All Notifications

(7) +
+
+ +
+
+ +
+
+ + {/* Notifications */} +
+ {Object.entries(groupedNotifications).map( + ([date, dateNotifications]) => ( +
+ {date !== "Today" && ( +
+

+ {date} +

+
+ )} + {date === "Today" && ( +
+

+ {date} +

+
+ )} + {dateNotifications.map((notification) => ( +
+
+ + + +
+
+

+ {notification.title} +

+ {notification.isNew && ( + + New + + )} +
+

+ {notification.time} +

+
+ +
+
+ ))} +
+ ) + )} +
+
+
+
+ ); } + +export default NotificationPage; + diff --git a/src/app/reader-profile/following/page.tsx b/src/app/reader-dashboard/profile/following/page.tsx similarity index 100% rename from src/app/reader-profile/following/page.tsx rename to src/app/reader-dashboard/profile/following/page.tsx diff --git a/src/app/reader-profile/layout.tsx b/src/app/reader-dashboard/profile/layout.tsx similarity index 100% rename from src/app/reader-profile/layout.tsx rename to src/app/reader-dashboard/profile/layout.tsx diff --git a/src/app/reader-dashboard/profile/page.tsx b/src/app/reader-dashboard/profile/page.tsx index 6917dde..dcaf92d 100644 --- a/src/app/reader-dashboard/profile/page.tsx +++ b/src/app/reader-dashboard/profile/page.tsx @@ -1,3 +1,260 @@ -export default function ProfilePage() { - return
Profile Settings
; -} \ No newline at end of file +"use client"; + +import type React from "react"; + +import { useState, useRef, type ChangeEvent } from "react"; +import Image from "next/image"; +import { ArrowLeft } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useMobileMenu } from "@/hooks/useMobileMenu"; + +interface ProfileFormData { + firstName: string; + lastName: string; + username: string; + email: string; + bio: string; + profilePicture: string | null; +} + +export default function ProfileDetailsPage() { + const router = useRouter(); + const { openMobileMenu } = useMobileMenu(); + const [formData, setFormData] = useState({ + firstName: "Faith", + lastName: "Haruna", + username: "Faith_Haruna", + email: "example@gmail.com", + bio: "", + profilePicture: null, + }); + + const [preview, setPreview] = useState( + "/reader-profile-dummy-image.png" + ); + 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 = () => { + setPreview(reader.result as string); + 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 ( +
+ {/* Mobile Header */} +
+
+ +

Profile

+
+ +
+ +
+
+ {/* Profile Picture Section */} +
+
+
+ {preview ? ( + Profile Preview + ) : ( +
+ + + +
+ )} +
+ + +
+ +
+
+ {" "} +

+ {formData.username} +

+
+ + + Enthusiast + +
+
+

ID: CLRD00010

+

+ Following 17 +

+
+
+ + {/* Form Fields */} +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ +