diff --git a/next.config.js b/next.config.js index 8a35c52..d0a1a48 100644 --- a/next.config.js +++ b/next.config.js @@ -7,6 +7,10 @@ const nextConfig = { enabled: true, // Set turbo to true within an object }, }, + images: { + domains: ['randomuser.me'], + }, + }; // export default nextConfig; diff --git a/public/live-event.png b/public/live-event.png new file mode 100644 index 0000000..d90eebe Binary files /dev/null and b/public/live-event.png differ diff --git a/src/app/dashboard/discussions/ClubCard.tsx b/src/app/dashboard/discussions/ClubCard.tsx new file mode 100644 index 0000000..ffbe093 --- /dev/null +++ b/src/app/dashboard/discussions/ClubCard.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import { Globe, PlusIcon } from "lucide-react"; +import { ClubDetailsProps } from "@/lib/types"; + +interface CardProps extends ClubDetailsProps { + onOpen: (club: ClubDetailsProps) => void; +} + +export default function ClubCard({ + id, + name, + isPublic, + memberCount, + sessionsInfo, + unreadNotifications, + authorAvatars, + onOpen, +}: CardProps) { + return ( +
+ +
+
+

+ {name} +

+ {unreadNotifications > 0 && ( + + {unreadNotifications} + + )} +
+
+
+
+
+ + {memberCount} +
+ +
+ {sessionsInfo} +
+
+ +
+
+ {authorAvatars && + authorAvatars.length > 0 && + authorAvatars.map((author) => ( + Author 1 + ))} +
+ + {authorAvatars && authorAvatars.length > 0 && ( + + {authorAvatars.length} Authors you follow are members + + )} +
+
+ +
+ ); +} diff --git a/src/app/dashboard/discussions/[id]/page.tsx b/src/app/dashboard/discussions/[id]/page.tsx new file mode 100644 index 0000000..4747871 --- /dev/null +++ b/src/app/dashboard/discussions/[id]/page.tsx @@ -0,0 +1,191 @@ +"use client"; + +import { Header } from "@/components/dashboard/header"; +import { Camera, Mic } from "lucide-react"; + +export default function LiveEventPage() { + return ( +
+
+ +
+
+
+
+ Live Session +
+
+ + 🔴 Live + + + 93 + +
+
+
+
+ + +
+
+ +
+ +
+

+ Native Invisibility +

+

+ By Darrin Collins ✔ +

+

+ Vibrant book club dedicated to exploring the vast and magical + realms of fantasy literature. From epic sagas and dark fantasy + to urban magic and whimsical tales, we delve into all corners of + the genre. +

+ +
+
+
+
+ Host +

+ Aisha Musa +

+
+
+ +
+
+
+ Guest +

+ Hana Yamal +

+
+
+
+
+
+ +
+
+

Viewers

+ + 92 Watching + +
+
    + {Array.from({ length: 4 }).map((_, i) => ( +
  • +
    +

    Darrin Collins

    +
    • + ))} +
+
+
+ +
+

+ Live Chat +

+
+
+
+
+ Young John + + Young John + +
+

+ I disagree with Peace. I believe Umar deserved a second chance + after what he did +

+
+ +
+
+ Ahmed Aliyu + + Ahmed Aliyu + +
+

Why do you feel that way?

+
+ +
+
+ You +
+

+ You're saying you don't agree with 'Peace' on this one +

+
+ +
+
+ Tony Tony + + Tony Tony + +
+

+ What makes you think he deserved that second chance? +

+
+
+ +
+ + +
+
+
+
+ ); +} diff --git a/src/app/dashboard/discussions/components/AddGuest.tsx b/src/app/dashboard/discussions/components/AddGuest.tsx new file mode 100644 index 0000000..f217f5d --- /dev/null +++ b/src/app/dashboard/discussions/components/AddGuest.tsx @@ -0,0 +1,50 @@ +"use client"; + +import React from "react"; +import Modal from "./Modal"; +import { Input } from "@/components/ui/input"; + +type Props = { + isOpen: boolean; + onClose: () => void; + addGuest: () => void; +}; + +export default function AddGuestModal({ isOpen, onClose, addGuest }: Props) { + return ( + +
+

+ Guest Email Address +

+
+

Guest Email Address

+ +
+
+ Joseph Yanum +
+

Joseph Yanum

+

josephyanum75@gmail.com

+
+
+ +
+ + ); +} diff --git a/src/app/dashboard/discussions/components/ClubDetails.tsx b/src/app/dashboard/discussions/components/ClubDetails.tsx new file mode 100644 index 0000000..5343791 --- /dev/null +++ b/src/app/dashboard/discussions/components/ClubDetails.tsx @@ -0,0 +1,129 @@ +import { ClubDetailsProps } from "@/lib/types"; +import { Globe, PlusIcon } from "lucide-react"; +import Modal from "./Modal"; + +type ClubModalProps = { + club: ClubDetailsProps | null; + isOpen: boolean; + onClose: () => void; + onJoin: () => void; +}; + +export default function ClubModal({ + club, + isOpen, + onClose, + onJoin, +}: ClubModalProps) { + if (!club) return null; + + return ( + +
+
+
+ +

+ {club.name} +

+ +
+
+ + + +
+ +
+
+ +
+ {club.authorAvatars?.length > 0 && ( + + {club.authorAvatars.length} Authors you follow are members + + )} +
+
+
+ +
+ +

+ Vibrant book club dedicated to exploring the vast and magical realms + of fantasy literature. From epic sagas and dark fantasy to urban + magic and whimsical tales, we delve into all corners of the genre. +

+
+ +
+ +
+ + +
+
+
+ + + + ); +} + +function Badge({ text, icon }: { text: string; icon?: "globe" | "plus" }) { + const icons = { + globe: , + plus: , + }; + + return ( +
+ {icon && icons[icon]} + {text} +
+ ); +} + +function SectionTitle({ title }: { title: string }) { + return ( +
+

{title}

+
+ ); +} + +function Tag({ text }: { text: string }) { + return ( + + {text} + + ); +} + +function AvatarGroup({ urls }: { urls: string[] }) { + return ( +
+ {urls.map((url, i) => ( + {`Author + ))} +
+ ); +} diff --git a/src/app/dashboard/discussions/components/ClubDiscussion.tsx b/src/app/dashboard/discussions/components/ClubDiscussion.tsx new file mode 100644 index 0000000..5335a45 --- /dev/null +++ b/src/app/dashboard/discussions/components/ClubDiscussion.tsx @@ -0,0 +1,209 @@ +import { useState } from "react"; + +interface ClubDiscussionProps { + startEvent: () => void; +} + +export default function ClubDiscussion({ startEvent }: ClubDiscussionProps) { + const [activeTab, setActiveTab] = useState("discussion"); + + const tabs = [ + { id: "discussion", label: "Discussion" }, + { id: "live", label: "Live", badge: 1 }, + { id: "about", label: "About" }, + { id: "members", label: "Members" }, + ]; + + const eventTabs = [ + { + id: "discussion", + label: "Discussion", + badge: 2, + event: { + title: "Native Invisibility", + author: "Darrin Collins", + verified: true, + description: + "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.", + live: false, + timeAgo: "2 weeks ago", + image: "/images/bookCover1.png", + }, + }, + { + id: "live", + label: "Live", + badge: null, + event: { + title: "Native Invisibility", + author: "Darrin Collins", + verified: true, + description: + "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.", + live: true, + timeAgo: "Live now", + image: "/images/bookCover1.png", + }, + }, + + { + id: "discussion", + label: "Discussion", + badge: null, + event: { + title: "Native Invisibility", + author: "Darrin Collins", + verified: true, + description: + "Delves into the complex and often insidious ways in which indigenous peoples and their unique experiences are rendered unseen and unheard in the modern era.", + live: true, + timeAgo: "Live now", + image: "/images/bookCover1.png", + }, + }, + ]; + + return ( +
+
+
+
+

+ Fantasy Enthusiasts +

+

+ Vibrant book club dedicated to exploring the vast and magical realms + of fantasy literature. From epic sagas and dark fantasy to urban + magic and whimsical tales, we delve into all corners of the genre. +

+
+ + + +
+
+ Author 1 + Author 2 + + 2 Authors you follow are members + +
+
+
+ +
+
+ + +
+
+ + {eventTabs.map(({ id, event }) => + activeTab === id ? ( + + ) :
+ )} +
+
+
+ ); +} + +function Badge({ icon, label }: { icon: string; label: string }) { + return ( + + {icon} {label} + + ); +} + +function EventCard({ + title, + author, + verified, + description, + live, + timeAgo, + image, +}: { + title: string; + author: string; + verified?: boolean; + description: string; + live?: boolean; + timeAgo?: string; + image: string; +}) { + return ( +
+ {title} +
+
+
+ + Live + +

{title}

+
+

+ By {author}{" "} + + + + +

+

Book Description

+

{description}

+
+ {timeAgo &&

{timeAgo}

} +
+
+ ); +} diff --git a/src/app/dashboard/discussions/components/ClubToolBar.tsx b/src/app/dashboard/discussions/components/ClubToolBar.tsx new file mode 100644 index 0000000..1c5f1ca --- /dev/null +++ b/src/app/dashboard/discussions/components/ClubToolBar.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import { Search, ChevronDown, PlusIcon } from "lucide-react"; + +export default function ClubsToolbar() { + return ( +
+
+
+

Clubs You've Joined (2)

+
+ +
+

Discover

+
+ + +
+ +
+
+ + +
+ + +
+
+ ); +} diff --git a/src/app/dashboard/discussions/components/CreateEvent.tsx b/src/app/dashboard/discussions/components/CreateEvent.tsx new file mode 100644 index 0000000..7f0faf3 --- /dev/null +++ b/src/app/dashboard/discussions/components/CreateEvent.tsx @@ -0,0 +1,116 @@ +"use client"; + +import React from "react"; +import Modal from "./Modal"; +import { Input } from "@/components/ui/input"; + +type Props = { + isOpen: boolean; + onClose: () => void; + onSubmit: () => void; +}; + +export default function CreateClubModal({ isOpen, onClose, onSubmit }: Props) { + const [name, setName] = React.useState(""); + const [description, setDescription] = React.useState(""); + const [genres, setGenres] = React.useState(["Fiction", "Drama"]); + const [clubType, setClubType] = React.useState(""); + + return ( + +
+

+ Create a new Club +

+

+ Launch your book club! Gather readers, share favorites, and spark + discussions +

+ +
+
+

Club Name

+ setName(e.target.value)} + className="mt-1 border border-gray-100 w-full h-[46px] border-b-0 px-3" + /> +
+ +
+ + +
+ +
+
+ {genres.map((genre) => ( + + {genre} × + + ))} +
+
+ +
+ +