Skip to content

feat: implement discussions and club interfaces #52

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 8 commits into from
Jul 5, 2025
Merged

feat: implement discussions and club interfaces #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
955728d
feat: add discussions route
zintarh Jul 2, 2025
080f989
feat: implement discussion/clubs
zintarh Jul 2, 2025
c270ee1
chore: resolve conflict
zintarh Jul 2, 2025
2ba89a3
feat: create event
zintarh Jul 3, 2025
fbff863
feat: implemented 6 screens on club flow
zintarh Jul 3, 2025
0308127
feat: add remaining screens
zintarh Jul 4, 2025
9d45680
feat: fix design
zintarh Jul 4, 2025
d51d2aa
fix: updates
zintarh Jul 4, 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
4 changes: 4 additions & 0 deletions next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ const nextConfig = {
enabled: true, // Set turbo to true within an object
},
},
images: {
domains: ['randomuser.me'],
},

};

// export default nextConfig;
Expand Down
Binary file added public/live-event.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.
99 changes: 99 additions & 0 deletions src/app/dashboard/discussions/ClubCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="flex cursor-pointer hover:shadow-sm items-center justify-between p-4 bg-white rounded-lg transition-shadow border border-[#E7E7E7] duration-300 w-full">
<div
className="flex-shrink-0 w-30 h-30 bg-[#D9D9D9] rounded-lg"
aria-hidden="true"
></div>
<div className="flex flex-col flex-grow ml-4 min-w-0">
<div className="flex items-center space-x-2">
<h2 className="text-lg font-semibold text-gray-900 truncate">
{name}
</h2>
{unreadNotifications > 0 && (
<span
className="flex items-center justify-center w-6 h-6 text-xs text-white bg-red-600 rounded-full"
aria-label="3 unread notifications"
>
{unreadNotifications}
</span>
)}
</div>
<div className="flex flex-wrap items-center text-sm space-x-3 mt-2 mb-1">
<div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
<Globe className="w-4 h-4 text-[#888888] " aria-hidden="true" />
<span className="text-[#888888]">
{isPublic ? "Public" : "Private"}
</span>
</div>
<div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
<PlusIcon className="text-sm w-3 h-3" />
<span className="text-[#888888]">{memberCount}</span>
</div>

<div className="flex text-sm items-center space-x-1 border border-[#D1D1D1] rounded-full px-2 py-0.5">
<span className="text-[#888888]">{sessionsInfo}</span>
</div>
</div>

<div className="flex items-center space-x-2 mt-2 ">
<div className="flex -space-x-2">
{authorAvatars &&
authorAvatars.length > 0 &&
authorAvatars.map((author) => (
<img
src={
author ?? "https://randomuser.me/api/portraits/men/32.jpg"
}
alt="Author 1"
className="w-6 h-6 rounded-full border-2 border-white"
/>
))}
</div>

{authorAvatars && authorAvatars.length > 0 && (
<span className="truncate text-[#5D5D5D] ">
{authorAvatars.length} Authors you follow are members
</span>
)}
</div>
</div>
<button
onClick={() => {
onOpen({
id: id,
name,
isPublic,
memberCount,
sessionsInfo,
unreadNotifications,
authorAvatars,
});
}}
type="button"
className="text-[#0F265C] py-2 px-8 transition-colors duration-300 ease-in-out
rounded-[10px] bg-[linear-gradient(to_bottom,_#EDF7FF_100%,_#096CFF_30%)]
hover:bg-gray-200 "
>
Open
</button>
</div>
);
}
191 changes: 191 additions & 0 deletions src/app/dashboard/discussions/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
"use client";

import { Header } from "@/components/dashboard/header";
import { Camera, Mic } from "lucide-react";

export default function LiveEventPage() {
return (
<div>
<Header title="Native Fantasy" />

<div className="flex flex-col items-start md:flex-row gap-x-10 p-4 md:max-w-[85rem] pt-20 px-10 ">
<div className="">
<div className="bg-white rounded-xl shadow overflow-hidden">
<div className="relative w-full h-[300px] md:h-[500px]">
<img
src="/live-event.png"
alt="Live Session"
className="object-cover w-full h-full"
/>
<div className="flex">
<div
className=" justify-end bg-[#F6F6F6] rounded-full py-1 px-1 absolute top-2 right-2
flex items-center gap-1"
>
<span className="bg-red-500 text-white text-xs font-medium px-2 py-1 rounded-full">
🔴 Live
</span>
<span className="bg-white/80 text-gray-800 text-xs px-2 py-1 rounded-full">
93
</span>
</div>
</div>
<div className="absolute bottom-2 left-2 flex items-center gap-2 bg-white/70 px-3 py-1 rounded-full text-sm">
<div className="absolute bottom-3 left-3 bg-gray-100 rounded-full px-2 py-1 flex gap-2 shadow-md">
<button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
<Camera className="w-5 h-5 text-blue-600" />
</button>
<button className="w-10 h-10 flex items-center justify-center bg-white rounded-full border border-gray-300 shadow">
<Mic className="w-5 h-5 text-blue-600" />
</button>
</div>
</div>
<button className="absolute bottom-2 right-2 px-4 py-1 bg-red-600/40 text-white text-sm rounded-full">
End Event
</button>
</div>

<div className="p-6">
<h2 className="text-xl font-semibold text-gray-900">
Native Invisibility
</h2>
<p className=" text-[#888888] mt-1">
By Darrin Collins <span className="text-blue-500">✔</span>
</p>
<p className=" text-[#888888] mt-4">
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.
</p>

<div className="mt-6 space-y-4">
<div className="flex items-center gap-4">
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
<div>
<span className="text-xs text-gray-500">Host</span>
<p className="text-sm font-medium text-gray-900">
Aisha Musa
</p>
</div>
</div>

<div className="flex items-center gap-4">
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
<div>
<span className="text-xs text-gray-500">Guest</span>
<p className="text-sm font-medium text-gray-900">
Hana Yamal
</p>
</div>
</div>
</div>
</div>
</div>

<div className="bg-white rounded-xl shadow p-4 w-full mt-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-md font-semibold text-gray-900">Viewers</h3>
<span className="text-sm bg-gray-100 px-3 py-1 rounded-full text-gray-600">
92 Watching
</span>
</div>
<ul className="divide-y divide-[#F6F6F6]">
{Array.from({ length: 4 }).map((_, i) => (
<li key={i} className="flex items-center gap-4 py-4">
<div className="w-10 h-10 bg-gray-200 rounded-full" />
<p className="text-sm text-gray-800">Darrin Collins</p>
</li>
))}
</ul>
</div>
</div>

<div className="bg-white rounded-xl shadow p-4 w-full max-w-md">
<h3 className="text-md font-semibold mb-2 text-gray-800">
Live Chat
</h3>
<hr className="mb-4" />
<div className="space-y-10">
<div className="bg-gray-100 p-3 rounded-lg">
<div className="flex items-center space-x-2 mb-1">
<img
src="https://randomuser.me/api/portraits/men/10.jpg"
alt="Young John"
className="w-6 h-6 rounded-full"
/>
<span className="text-sm font-medium text-gray-800">
Young John
</span>
</div>
<p className="text-sm text-gray-700">
I disagree with Peace. I believe Umar deserved a second chance
after what he did
</p>
</div>

<div className="bg-gray-100 p-3 rounded-lg w-fit">
<div className="flex items-center space-x-2 mb-1 ">
<img
src="https://randomuser.me/api/portraits/men/11.jpg"
alt="Ahmed Aliyu"
className="w-6 h-6 rounded-full"
/>
<span className="text-sm font-medium text-gray-800">
Ahmed Aliyu
</span>
</div>
<p className="text-sm text-gray-700">Why do you feel that way?</p>
</div>

<div className="bg-blue-50 p-3 rounded-lg self-end ">
<div className="text-right text-sm font-medium text-gray-700 mb-1">
You
</div>
<p className="text-sm text-gray-800 text-right">
You're saying you don't agree with 'Peace' on this one
</p>
</div>

<div className="bg-gray-100 p-3 rounded-lg">
<div className="flex items-center space-x-2 mb-1">
<img
src="https://randomuser.me/api/portraits/men/12.jpg"
alt="Tony Tony"
className="w-6 h-6 rounded-full"
/>
<span className="text-sm font-medium text-gray-800">
Tony Tony
</span>
</div>
<p className="text-sm text-gray-700">
What makes you think he deserved that second chance?
</p>
</div>
</div>

<form className="relative mt-6 max-w-md">
<input
type="text"
placeholder="Type here"
className="w-full pl-4 pr-12 py-3 rounded-md bg-gray-100 border text-[#B0B0B0] border-gray-200 text-sm focus:outline-none"
/>
<button
type="submit"
className="absolute top-1/2 right-2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center bg-blue-600 text-white rounded-full hover:bg-blue-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
</svg>
</button>
</form>
</div>
</div>
</div>
);
}
50 changes: 50 additions & 0 deletions src/app/dashboard/discussions/components/AddGuest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Modal isOpen={isOpen} onClose={onClose} className="max-w-md">
<div className="space-y-5 px-5 py-1">
<p className="text-xl text-[#454545] text-center font-semibold">
Guest Email Address
</p>
<div className="space-y-2">
<p className="text-[#5D5D5D]">Guest Email Address</p>
<Input
className="h-[46px] text-[#B0B0B0]"
placeholder="Enter guest email address"
/>
</div>
<div className="bg-blue-50 rounded-xl p-4 flex items-center space-x-4 w-fit">
<img
src="/authorImg2.png"
alt="Joseph Yanum"
className="w-12 h-12 rounded-full object-cover"
/>
<div>
<p className="text-lg font-semibold">Joseph Yanum</p>
<p className="text-sm text-[#888888]">josephyanum75@gmail.com</p>
</div>
</div>
<button
onClick={() => {
onClose();
addGuest();
}}
className="mb-5 w-full py-3 text-white rounded-md bg-gradient-to-b from-[#2A62F3] to-[#0029B3] hover:opacity-90 transition"
>
Add
</button>
</div>
</Modal>
);
}
Loading
Loading