├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── (auth)
    │   ├── layout.tsx
    │   ├── onboarding
    │   │   └── page.tsx
    │   ├── sign-in
    │   │   └── [[...sign-in]]
    │   │   │   └── page.tsx
    │   └── sign-up
    │   │   └── [[...sign-up]]
    │   │       └── page.tsx
    ├── (root)
    │   ├── activity
    │   │   └── page.tsx
    │   ├── communities
    │   │   ├── [id]
    │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── create-thread
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── page.tsx
    │   ├── profile
    │   │   ├── [id]
    │   │   │   └── page.tsx
    │   │   └── edit
    │   │   │   └── page.tsx
    │   ├── search
    │   │   └── page.tsx
    │   └── thread
    │   │   └── [id]
    │   │       └── page.tsx
    ├── api
    │   ├── uploadthing
    │   │   ├── core.ts
    │   │   └── route.ts
    │   └── webhook
    │   │   └── clerk
    │   │       └── route.ts
    ├── favicon.ico
    └── globals.css
├── components.json
├── components
    ├── cards
    │   ├── CommunityCard.tsx
    │   ├── ThreadCard.tsx
    │   └── UserCard.tsx
    ├── forms
    │   ├── AccountProfile.tsx
    │   ├── Comment.tsx
    │   ├── DeleteThread.tsx
    │   └── PostThread.tsx
    ├── shared
    │   ├── Bottombar.tsx
    │   ├── LeftSidebar.tsx
    │   ├── Pagination.tsx
    │   ├── ProfileHeader.tsx
    │   ├── RightSidebar.tsx
    │   ├── Searchbar.tsx
    │   ├── ThreadsTab.tsx
    │   └── Topbar.tsx
    └── ui
    │   ├── button.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── menubar.tsx
    │   ├── select.tsx
    │   ├── tabs.tsx
    │   ├── textarea.tsx
    │   ├── toast.tsx
    │   ├── toaster.tsx
    │   └── use-toast.ts
├── constants
    └── index.js
├── lib
    ├── actions
    │   ├── community.actions.ts
    │   ├── thread.actions.ts
    │   └── user.actions.ts
    ├── models
    │   ├── community.model.ts
    │   ├── thread.model.ts
    │   └── user.model.ts
    ├── mongoose.ts
    ├── uploadthing.ts
    ├── utils.ts
    └── validations
    │   ├── thread.ts
    │   └── user.ts
├── middleware.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── assets
    │   ├── community.svg
    │   ├── create.svg
    │   ├── delete.svg
    │   ├── edit.svg
    │   ├── heart-filled.svg
    │   ├── heart-gray.svg
    │   ├── heart.svg
    │   ├── home.svg
    │   ├── logout.svg
    │   ├── members.svg
    │   ├── more.svg
    │   ├── profile.svg
    │   ├── reply.svg
    │   ├── repost.svg
    │   ├── request.svg
    │   ├── search-gray.svg
    │   ├── search.svg
    │   ├── share.svg
    │   ├── tag.svg
    │   └── user.svg
    ├── logo.svg
    ├── next.svg
    └── vercel.svg
├── tailwind.config.js
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "next/core-web-vitals",
 4 |     "next",
 5 |     "standard",
 6 |     "plugin:tailwindcss/recommended",
 7 |     "prettier"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 
37 | # vscode
38 | .vscode
39 | 
40 | # env
41 | .env
42 | 


--------------------------------------------------------------------------------
/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import { ClerkProvider } from "@clerk/nextjs";
 5 | import { dark } from "@clerk/themes";
 6 | 
 7 | import "../globals.css";
 8 | 
 9 | const inter = Inter({ subsets: ["latin"] });
10 | 
11 | export const metadata: Metadata = {
12 |   title: "Auth",
13 |   description: "Generated by create next app",
14 | };
15 | 
16 | export default function RootLayout({
17 |   children,
18 | }: {
19 |   children: React.ReactNode;
20 | }) {
21 |   return (
22 |     <ClerkProvider
23 |       appearance={{
24 |         baseTheme: dark,
25 |       }}
26 |     >
27 |       <html lang='en'>
28 |         <body className={`${inter.className} bg-dark-1`}>{children}</body>
29 |       </html>
30 |     </ClerkProvider>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/app/(auth)/onboarding/page.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | import { redirect } from "next/navigation";
 3 | 
 4 | import { fetchUser } from "@/lib/actions/user.actions";
 5 | import AccountProfile from "@/components/forms/AccountProfile";
 6 | 
 7 | async function Page() {
 8 |   const user = await currentUser();
 9 |   if (!user) return null; // to avoid typescript warnings
10 | 
11 |   const userInfo = await fetchUser(user.id);
12 |   if (userInfo?.onboarded) redirect("/");
13 | 
14 |   const userData = {
15 |     id: user.id,
16 |     objectId: userInfo?._id,
17 |     username: userInfo ? userInfo?.username : user.username,
18 |     name: userInfo ? userInfo?.name : user.firstName ?? "",
19 |     bio: userInfo ? userInfo?.bio : "",
20 |     image: userInfo ? userInfo?.image : user.imageUrl,
21 |   };
22 | 
23 |   return (
24 |     <main className='mx-auto flex max-w-3xl flex-col justify-start px-10 py-20'>
25 |       <h1 className='head-text'>Onboarding</h1>
26 |       <p className='mt-3 text-base-regular text-light-2'>
27 |         Complete your profile now, to use Threds.
28 |       </p>
29 | 
30 |       <section className='mt-9 bg-dark-2 p-10'>
31 |         <AccountProfile user={userData} btnTitle='Continue' />
32 |       </section>
33 |     </main>
34 |   );
35 | }
36 | 
37 | export default Page;
38 | 


--------------------------------------------------------------------------------
/app/(auth)/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { SignIn } from "@clerk/nextjs";
2 | 
3 | export default function Page() {
4 |   return <SignIn />;
5 | }
6 | 


--------------------------------------------------------------------------------
/app/(auth)/sign-up/[[...sign-up]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { SignUp } from "@clerk/nextjs";
2 | 
3 | export default function Page() {
4 |   return <SignUp />;
5 | }
6 | 


--------------------------------------------------------------------------------
/app/(root)/activity/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | import { currentUser } from "@clerk/nextjs";
 4 | import { redirect } from "next/navigation";
 5 | 
 6 | import { fetchUser, getActivity } from "@/lib/actions/user.actions";
 7 | 
 8 | async function Page() {
 9 |   const user = await currentUser();
10 |   if (!user) return null;
11 | 
12 |   const userInfo = await fetchUser(user.id);
13 |   if (!userInfo?.onboarded) redirect("/onboarding");
14 | 
15 |   const activity = await getActivity(userInfo._id);
16 | 
17 |   return (
18 |     <>
19 |       <h1 className='head-text'>Activity</h1>
20 | 
21 |       <section className='mt-10 flex flex-col gap-5'>
22 |         {activity.length > 0 ? (
23 |           <>
24 |             {activity.map((activity) => (
25 |               <Link key={activity._id} href={`/thread/${activity.parentId}`}>
26 |                 <article className='activity-card'>
27 |                   <Image
28 |                     src={activity.author.image}
29 |                     alt='user_logo'
30 |                     width={20}
31 |                     height={20}
32 |                     className='rounded-full object-cover'
33 |                   />
34 |                   <p className='!text-small-regular text-light-1'>
35 |                     <span className='mr-1 text-primary-500'>
36 |                       {activity.author.name}
37 |                     </span>{" "}
38 |                     replied to your thread
39 |                   </p>
40 |                 </article>
41 |               </Link>
42 |             ))}
43 |           </>
44 |         ) : (
45 |           <p className='!text-base-regular text-light-3'>No activity yet</p>
46 |         )}
47 |       </section>
48 |     </>
49 |   );
50 | }
51 | 
52 | export default Page;
53 | 


--------------------------------------------------------------------------------
/app/(root)/communities/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { currentUser } from "@clerk/nextjs";
 3 | 
 4 | import { communityTabs } from "@/constants";
 5 | 
 6 | import UserCard from "@/components/cards/UserCard";
 7 | import ThreadsTab from "@/components/shared/ThreadsTab";
 8 | import ProfileHeader from "@/components/shared/ProfileHeader";
 9 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
10 | 
11 | import { fetchCommunityDetails } from "@/lib/actions/community.actions";
12 | 
13 | async function Page({ params }: { params: { id: string } }) {
14 |   const user = await currentUser();
15 |   if (!user) return null;
16 | 
17 |   const communityDetails = await fetchCommunityDetails(params.id);
18 | 
19 |   return (
20 |     <section>
21 |       <ProfileHeader
22 |         accountId={communityDetails.createdBy.id}
23 |         authUserId={user.id}
24 |         name={communityDetails.name}
25 |         username={communityDetails.username}
26 |         imgUrl={communityDetails.image}
27 |         bio={communityDetails.bio}
28 |         type='Community'
29 |       />
30 | 
31 |       <div className='mt-9'>
32 |         <Tabs defaultValue='threads' className='w-full'>
33 |           <TabsList className='tab'>
34 |             {communityTabs.map((tab) => (
35 |               <TabsTrigger key={tab.label} value={tab.value} className='tab'>
36 |                 <Image
37 |                   src={tab.icon}
38 |                   alt={tab.label}
39 |                   width={24}
40 |                   height={24}
41 |                   className='object-contain'
42 |                 />
43 |                 <p className='max-sm:hidden'>{tab.label}</p>
44 | 
45 |                 {tab.label === "Threads" && (
46 |                   <p className='ml-1 rounded-sm bg-light-4 px-2 py-1 !text-tiny-medium text-light-2'>
47 |                     {communityDetails.threads.length}
48 |                   </p>
49 |                 )}
50 |               </TabsTrigger>
51 |             ))}
52 |           </TabsList>
53 | 
54 |           <TabsContent value='threads' className='w-full text-light-1'>
55 |             {/* @ts-ignore */}
56 |             <ThreadsTab
57 |               currentUserId={user.id}
58 |               accountId={communityDetails._id}
59 |               accountType='Community'
60 |             />
61 |           </TabsContent>
62 | 
63 |           <TabsContent value='members' className='mt-9 w-full text-light-1'>
64 |             <section className='mt-9 flex flex-col gap-10'>
65 |               {communityDetails.members.map((member: any) => (
66 |                 <UserCard
67 |                   key={member.id}
68 |                   id={member.id}
69 |                   name={member.name}
70 |                   username={member.username}
71 |                   imgUrl={member.image}
72 |                   personType='User'
73 |                 />
74 |               ))}
75 |             </section>
76 |           </TabsContent>
77 | 
78 |           <TabsContent value='requests' className='w-full text-light-1'>
79 |             {/* @ts-ignore */}
80 |             <ThreadsTab
81 |               currentUserId={user.id}
82 |               accountId={communityDetails._id}
83 |               accountType='Community'
84 |             />
85 |           </TabsContent>
86 |         </Tabs>
87 |       </div>
88 |     </section>
89 |   );
90 | }
91 | 
92 | export default Page;
93 | 


--------------------------------------------------------------------------------
/app/(root)/communities/page.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | import { redirect } from "next/navigation";
 3 | 
 4 | import Searchbar from "@/components/shared/Searchbar";
 5 | import Pagination from "@/components/shared/Pagination";
 6 | import CommunityCard from "@/components/cards/CommunityCard";
 7 | 
 8 | import { fetchUser } from "@/lib/actions/user.actions";
 9 | import { fetchCommunities } from "@/lib/actions/community.actions";
10 | 
11 | async function Page({
12 |   searchParams,
13 | }: {
14 |   searchParams: { [key: string]: string | undefined };
15 | }) {
16 |   const user = await currentUser();
17 |   if (!user) return null;
18 | 
19 |   const userInfo = await fetchUser(user.id);
20 |   if (!userInfo?.onboarded) redirect("/onboarding");
21 | 
22 |   const result = await fetchCommunities({
23 |     searchString: searchParams.q,
24 |     pageNumber: searchParams?.page ? +searchParams.page : 1,
25 |     pageSize: 25,
26 |   });
27 | 
28 |   return (
29 |     <>
30 |       <h1 className='head-text'>Communities</h1>
31 | 
32 |       <div className='mt-5'>
33 |         <Searchbar routeType='communities' />
34 |       </div>
35 | 
36 |       <section className='mt-9 flex flex-wrap gap-4'>
37 |         {result.communities.length === 0 ? (
38 |           <p className='no-result'>No Result</p>
39 |         ) : (
40 |           <>
41 |             {result.communities.map((community) => (
42 |               <CommunityCard
43 |                 key={community.id}
44 |                 id={community.id}
45 |                 name={community.name}
46 |                 username={community.username}
47 |                 imgUrl={community.image}
48 |                 bio={community.bio}
49 |                 members={community.members}
50 |               />
51 |             ))}
52 |           </>
53 |         )}
54 |       </section>
55 | 
56 |       <Pagination
57 |         path='communities'
58 |         pageNumber={searchParams?.page ? +searchParams.page : 1}
59 |         isNext={result.isNext}
60 |       />
61 |     </>
62 |   );
63 | }
64 | 
65 | export default Page;
66 | 


--------------------------------------------------------------------------------
/app/(root)/create-thread/page.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | import { redirect } from "next/navigation";
 3 | 
 4 | import PostThread from "@/components/forms/PostThread";
 5 | import { fetchUser } from "@/lib/actions/user.actions";
 6 | 
 7 | async function Page() {
 8 |   const user = await currentUser();
 9 |   if (!user) return null;
10 | 
11 |   // fetch organization list created by user
12 |   const userInfo = await fetchUser(user.id);
13 |   if (!userInfo?.onboarded) redirect("/onboarding");
14 | 
15 |   return (
16 |     <>
17 |       <h1 className='head-text'>Create Thread</h1>
18 | 
19 |       <PostThread userId={userInfo._id} />
20 |     </>
21 |   );
22 | }
23 | 
24 | export default Page;
25 | 


--------------------------------------------------------------------------------
/app/(root)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import { ClerkProvider } from "@clerk/nextjs";
 5 | import { dark } from "@clerk/themes";
 6 | 
 7 | import "../globals.css";
 8 | import LeftSidebar from "@/components/shared/LeftSidebar";
 9 | import Bottombar from "@/components/shared/Bottombar";
10 | import RightSidebar from "@/components/shared/RightSidebar";
11 | import Topbar from "@/components/shared/Topbar";
12 | 
13 | const inter = Inter({ subsets: ["latin"] });
14 | 
15 | export const metadata: Metadata = {
16 |   title: "Threads",
17 |   description: "A Next.js 13 Meta Threads application",
18 | };
19 | 
20 | export default function RootLayout({
21 |   children,
22 | }: {
23 |   children: React.ReactNode;
24 | }) {
25 |   return (
26 |     <ClerkProvider
27 |       appearance={{
28 |         baseTheme: dark,
29 |       }}
30 |     >
31 |       <html lang='en'>
32 |         <body className={inter.className}>
33 |           <Topbar />
34 | 
35 |           <main className='flex flex-row'>
36 |             <LeftSidebar />
37 |             <section className='main-container'>
38 |               <div className='w-full max-w-4xl'>{children}</div>
39 |             </section>
40 |             {/* @ts-ignore */}
41 |             <RightSidebar />
42 |           </main>
43 | 
44 |           <Bottombar />
45 |         </body>
46 |       </html>
47 |     </ClerkProvider>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/app/(root)/page.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | import { redirect } from "next/navigation";
 3 | 
 4 | import ThreadCard from "@/components/cards/ThreadCard";
 5 | import Pagination from "@/components/shared/Pagination";
 6 | 
 7 | import { fetchPosts } from "@/lib/actions/thread.actions";
 8 | import { fetchUser } from "@/lib/actions/user.actions";
 9 | 
10 | async function Home({
11 |   searchParams,
12 | }: {
13 |   searchParams: { [key: string]: string | undefined };
14 | }) {
15 |   const user = await currentUser();
16 |   if (!user) return null;
17 | 
18 |   const userInfo = await fetchUser(user.id);
19 |   if (!userInfo?.onboarded) redirect("/onboarding");
20 | 
21 |   const result = await fetchPosts(
22 |     searchParams.page ? +searchParams.page : 1,
23 |     30
24 |   );
25 | 
26 |   return (
27 |     <>
28 |       <h1 className='head-text text-left'>Home</h1>
29 | 
30 |       <section className='mt-9 flex flex-col gap-10'>
31 |         {result.posts.length === 0 ? (
32 |           <p className='no-result'>No threads found</p>
33 |         ) : (
34 |           <>
35 |             {result.posts.map((post) => (
36 |               <ThreadCard
37 |                 key={post._id}
38 |                 id={post._id}
39 |                 currentUserId={user.id}
40 |                 parentId={post.parentId}
41 |                 content={post.text}
42 |                 author={post.author}
43 |                 community={post.community}
44 |                 createdAt={post.createdAt}
45 |                 comments={post.children}
46 |               />
47 |             ))}
48 |           </>
49 |         )}
50 |       </section>
51 | 
52 |       <Pagination
53 |         path='/'
54 |         pageNumber={searchParams?.page ? +searchParams.page : 1}
55 |         isNext={result.isNext}
56 |       />
57 |     </>
58 |   );
59 | }
60 | 
61 | export default Home;
62 | 


--------------------------------------------------------------------------------
/app/(root)/profile/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { currentUser } from "@clerk/nextjs";
 3 | import { redirect } from "next/navigation";
 4 | 
 5 | import { profileTabs } from "@/constants";
 6 | 
 7 | import ThreadsTab from "@/components/shared/ThreadsTab";
 8 | import ProfileHeader from "@/components/shared/ProfileHeader";
 9 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
10 | 
11 | import { fetchUser } from "@/lib/actions/user.actions";
12 | 
13 | async function Page({ params }: { params: { id: string } }) {
14 |   const user = await currentUser();
15 |   if (!user) return null;
16 | 
17 |   const userInfo = await fetchUser(params.id);
18 |   if (!userInfo?.onboarded) redirect("/onboarding");
19 | 
20 |   return (
21 |     <section>
22 |       <ProfileHeader
23 |         accountId={userInfo.id}
24 |         authUserId={user.id}
25 |         name={userInfo.name}
26 |         username={userInfo.username}
27 |         imgUrl={userInfo.image}
28 |         bio={userInfo.bio}
29 |       />
30 | 
31 |       <div className='mt-9'>
32 |         <Tabs defaultValue='threads' className='w-full'>
33 |           <TabsList className='tab'>
34 |             {profileTabs.map((tab) => (
35 |               <TabsTrigger key={tab.label} value={tab.value} className='tab'>
36 |                 <Image
37 |                   src={tab.icon}
38 |                   alt={tab.label}
39 |                   width={24}
40 |                   height={24}
41 |                   className='object-contain'
42 |                 />
43 |                 <p className='max-sm:hidden'>{tab.label}</p>
44 | 
45 |                 {tab.label === "Threads" && (
46 |                   <p className='ml-1 rounded-sm bg-light-4 px-2 py-1 !text-tiny-medium text-light-2'>
47 |                     {userInfo.threads.length}
48 |                   </p>
49 |                 )}
50 |               </TabsTrigger>
51 |             ))}
52 |           </TabsList>
53 |           {profileTabs.map((tab) => (
54 |             <TabsContent
55 |               key={`content-${tab.label}`}
56 |               value={tab.value}
57 |               className='w-full text-light-1'
58 |             >
59 |               {/* @ts-ignore */}
60 |               <ThreadsTab
61 |                 currentUserId={user.id}
62 |                 accountId={userInfo.id}
63 |                 accountType='User'
64 |               />
65 |             </TabsContent>
66 |           ))}
67 |         </Tabs>
68 |       </div>
69 |     </section>
70 |   );
71 | }
72 | export default Page;
73 | 


--------------------------------------------------------------------------------
/app/(root)/profile/edit/page.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | import { redirect } from "next/navigation";
 3 | 
 4 | import { fetchUser } from "@/lib/actions/user.actions";
 5 | import AccountProfile from "@/components/forms/AccountProfile";
 6 | 
 7 | // Copy paste most of the code as it is from the /onboarding
 8 | 
 9 | async function Page() {
10 |   const user = await currentUser();
11 |   if (!user) return null;
12 | 
13 |   const userInfo = await fetchUser(user.id);
14 |   if (!userInfo?.onboarded) redirect("/onboarding");
15 | 
16 |   const userData = {
17 |     id: user.id,
18 |     objectId: userInfo?._id,
19 |     username: userInfo ? userInfo?.username : user.username,
20 |     name: userInfo ? userInfo?.name : user.firstName ?? "",
21 |     bio: userInfo ? userInfo?.bio : "",
22 |     image: userInfo ? userInfo?.image : user.imageUrl,
23 |   };
24 | 
25 |   return (
26 |     <>
27 |       <h1 className='head-text'>Edit Profile</h1>
28 |       <p className='mt-3 text-base-regular text-light-2'>Make any changes</p>
29 | 
30 |       <section className='mt-12'>
31 |         <AccountProfile user={userData} btnTitle='Continue' />
32 |       </section>
33 |     </>
34 |   );
35 | }
36 | 
37 | export default Page;
38 | 


--------------------------------------------------------------------------------
/app/(root)/search/page.tsx:
--------------------------------------------------------------------------------
 1 | import { redirect } from "next/navigation";
 2 | import { currentUser } from "@clerk/nextjs";
 3 | 
 4 | import UserCard from "@/components/cards/UserCard";
 5 | import Searchbar from "@/components/shared/Searchbar";
 6 | import Pagination from "@/components/shared/Pagination";
 7 | 
 8 | import { fetchUser, fetchUsers } from "@/lib/actions/user.actions";
 9 | 
10 | async function Page({
11 |   searchParams,
12 | }: {
13 |   searchParams: { [key: string]: string | undefined };
14 | }) {
15 |   const user = await currentUser();
16 |   if (!user) return null;
17 | 
18 |   const userInfo = await fetchUser(user.id);
19 |   if (!userInfo?.onboarded) redirect("/onboarding");
20 | 
21 |   const result = await fetchUsers({
22 |     userId: user.id,
23 |     searchString: searchParams.q,
24 |     pageNumber: searchParams?.page ? +searchParams.page : 1,
25 |     pageSize: 25,
26 |   });
27 | 
28 |   return (
29 |     <section>
30 |       <h1 className='head-text mb-10'>Search</h1>
31 | 
32 |       <Searchbar routeType='search' />
33 | 
34 |       <div className='mt-14 flex flex-col gap-9'>
35 |         {result.users.length === 0 ? (
36 |           <p className='no-result'>No Result</p>
37 |         ) : (
38 |           <>
39 |             {result.users.map((person) => (
40 |               <UserCard
41 |                 key={person.id}
42 |                 id={person.id}
43 |                 name={person.name}
44 |                 username={person.username}
45 |                 imgUrl={person.image}
46 |                 personType='User'
47 |               />
48 |             ))}
49 |           </>
50 |         )}
51 |       </div>
52 | 
53 |       <Pagination
54 |         path='search'
55 |         pageNumber={searchParams?.page ? +searchParams.page : 1}
56 |         isNext={result.isNext}
57 |       />
58 |     </section>
59 |   );
60 | }
61 | 
62 | export default Page;
63 | 


--------------------------------------------------------------------------------
/app/(root)/thread/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { redirect } from "next/navigation";
 2 | import { currentUser } from "@clerk/nextjs";
 3 | 
 4 | import Comment from "@/components/forms/Comment";
 5 | import ThreadCard from "@/components/cards/ThreadCard";
 6 | 
 7 | import { fetchUser } from "@/lib/actions/user.actions";
 8 | import { fetchThreadById } from "@/lib/actions/thread.actions";
 9 | 
10 | export const revalidate = 0;
11 | 
12 | async function page({ params }: { params: { id: string } }) {
13 |   if (!params.id) return null;
14 | 
15 |   const user = await currentUser();
16 |   if (!user) return null;
17 | 
18 |   const userInfo = await fetchUser(user.id);
19 |   if (!userInfo?.onboarded) redirect("/onboarding");
20 | 
21 |   const thread = await fetchThreadById(params.id);
22 | 
23 |   return (
24 |     <section className='relative'>
25 |       <div>
26 |         <ThreadCard
27 |           id={thread._id}
28 |           currentUserId={user.id}
29 |           parentId={thread.parentId}
30 |           content={thread.text}
31 |           author={thread.author}
32 |           community={thread.community}
33 |           createdAt={thread.createdAt}
34 |           comments={thread.children}
35 |         />
36 |       </div>
37 | 
38 |       <div className='mt-7'>
39 |         <Comment
40 |           threadId={params.id}
41 |           currentUserImg={user.imageUrl}
42 |           currentUserId={JSON.stringify(userInfo._id)}
43 |         />
44 |       </div>
45 | 
46 |       <div className='mt-10'>
47 |         {thread.children.map((childItem: any) => (
48 |           <ThreadCard
49 |             key={childItem._id}
50 |             id={childItem._id}
51 |             currentUserId={user.id}
52 |             parentId={childItem.parentId}
53 |             content={childItem.text}
54 |             author={childItem.author}
55 |             community={childItem.community}
56 |             createdAt={childItem.createdAt}
57 |             comments={childItem.children}
58 |             isComment
59 |           />
60 |         ))}
61 |       </div>
62 |     </section>
63 |   );
64 | }
65 | 
66 | export default page;
67 | 


--------------------------------------------------------------------------------
/app/api/uploadthing/core.ts:
--------------------------------------------------------------------------------
 1 | // Resource: https://docs.uploadthing.com/nextjs/appdir#creating-your-first-fileroute
 2 | // Above resource shows how to setup uploadthing. Copy paste most of it as it is.
 3 | // We're changing a few things in the middleware and configs of the file upload i.e., "media", "maxFileCount"
 4 | 
 5 | import { currentUser } from "@clerk/nextjs";
 6 | import { createUploadthing, type FileRouter } from "uploadthing/next";
 7 | 
 8 | const f = createUploadthing();
 9 | 
10 | const getUser = async () => await currentUser();
11 | 
12 | export const ourFileRouter = {
13 |   // Define as many FileRoutes as you like, each with a unique routeSlug
14 |   media: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
15 |     // Set permissions and file types for this FileRoute
16 |     .middleware(async (req) => {
17 |       // This code runs on your server before upload
18 |       const user = await getUser();
19 | 
20 |       // If you throw, the user will not be able to upload
21 |       if (!user) throw new Error("Unauthorized");
22 | 
23 |       // Whatever is returned here is accessible in onUploadComplete as `metadata`
24 |       return { userId: user.id };
25 |     })
26 |     .onUploadComplete(async ({ metadata, file }) => {
27 |       // This code RUNS ON YOUR SERVER after upload
28 |       console.log("Upload complete for userId:", metadata.userId);
29 | 
30 |       console.log("file url", file.url);
31 |     }),
32 | } satisfies FileRouter;
33 | 
34 | export type OurFileRouter = typeof ourFileRouter;
35 | 


--------------------------------------------------------------------------------
/app/api/uploadthing/route.ts:
--------------------------------------------------------------------------------
 1 | // Resource: https://docs.uploadthing.com/nextjs/appdir#create-a-nextjs-api-route-using-the-filerouter
 2 | // Copy paste (be careful with imports)
 3 | 
 4 | import { createNextRouteHandler } from "uploadthing/next";
 5 | 
 6 | import { ourFileRouter } from "./core";
 7 | 
 8 | // Export routes for Next App Router
 9 | export const { GET, POST } = createNextRouteHandler({
10 |   router: ourFileRouter,
11 | });
12 | 


--------------------------------------------------------------------------------
/app/api/webhook/clerk/route.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable camelcase */
  2 | // Resource: https://clerk.com/docs/users/sync-data-to-your-backend
  3 | // Above article shows why we need webhooks i.e., to sync data to our backend
  4 | 
  5 | // Resource: https://docs.svix.com/receiving/verifying-payloads/why
  6 | // It's a good practice to verify webhooks. Above article shows why we should do it
  7 | import { Webhook, WebhookRequiredHeaders } from "svix";
  8 | import { headers } from "next/headers";
  9 | 
 10 | import { IncomingHttpHeaders } from "http";
 11 | 
 12 | import { NextResponse } from "next/server";
 13 | import {
 14 |   addMemberToCommunity,
 15 |   createCommunity,
 16 |   deleteCommunity,
 17 |   removeUserFromCommunity,
 18 |   updateCommunityInfo,
 19 | } from "@/lib/actions/community.actions";
 20 | 
 21 | // Resource: https://clerk.com/docs/integration/webhooks#supported-events
 22 | // Above document lists the supported events
 23 | type EventType =
 24 |   | "organization.created"
 25 |   | "organizationInvitation.created"
 26 |   | "organizationMembership.created"
 27 |   | "organizationMembership.deleted"
 28 |   | "organization.updated"
 29 |   | "organization.deleted";
 30 | 
 31 | type Event = {
 32 |   data: Record<string, string | number | Record<string, string>[]>;
 33 |   object: "event";
 34 |   type: EventType;
 35 | };
 36 | 
 37 | export const POST = async (request: Request) => {
 38 |   const payload = await request.json();
 39 |   const header = headers();
 40 | 
 41 |   const heads = {
 42 |     "svix-id": header.get("svix-id"),
 43 |     "svix-timestamp": header.get("svix-timestamp"),
 44 |     "svix-signature": header.get("svix-signature"),
 45 |   };
 46 | 
 47 |   // Activitate Webhook in the Clerk Dashboard.
 48 |   // After adding the endpoint, you'll see the secret on the right side.
 49 |   const wh = new Webhook(process.env.NEXT_CLERK_WEBHOOK_SECRET || "");
 50 | 
 51 |   let evnt: Event | null = null;
 52 | 
 53 |   try {
 54 |     evnt = wh.verify(
 55 |       JSON.stringify(payload),
 56 |       heads as IncomingHttpHeaders & WebhookRequiredHeaders
 57 |     ) as Event;
 58 |   } catch (err) {
 59 |     return NextResponse.json({ message: err }, { status: 400 });
 60 |   }
 61 | 
 62 |   const eventType: EventType = evnt?.type!;
 63 | 
 64 |   // Listen organization creation event
 65 |   if (eventType === "organization.created") {
 66 |     // Resource: https://clerk.com/docs/reference/backend-api/tag/Organizations#operation/CreateOrganization
 67 |     // Show what evnt?.data sends from above resource
 68 |     const { id, name, slug, logo_url, image_url, created_by } =
 69 |       evnt?.data ?? {};
 70 | 
 71 |     try {
 72 |       // @ts-ignore
 73 |       await createCommunity(
 74 |         // @ts-ignore
 75 |         id,
 76 |         name,
 77 |         slug,
 78 |         logo_url || image_url,
 79 |         "org bio",
 80 |         created_by
 81 |       );
 82 | 
 83 |       return NextResponse.json({ message: "User created" }, { status: 201 });
 84 |     } catch (err) {
 85 |       console.log(err);
 86 |       return NextResponse.json(
 87 |         { message: "Internal Server Error" },
 88 |         { status: 500 }
 89 |       );
 90 |     }
 91 |   }
 92 | 
 93 |   // Listen organization invitation creation event.
 94 |   // Just to show. You can avoid this or tell people that we can create a new mongoose action and
 95 |   // add pending invites in the database.
 96 |   if (eventType === "organizationInvitation.created") {
 97 |     try {
 98 |       // Resource: https://clerk.com/docs/reference/backend-api/tag/Organization-Invitations#operation/CreateOrganizationInvitation
 99 |       console.log("Invitation created", evnt?.data);
100 | 
101 |       return NextResponse.json(
102 |         { message: "Invitation created" },
103 |         { status: 201 }
104 |       );
105 |     } catch (err) {
106 |       console.log(err);
107 | 
108 |       return NextResponse.json(
109 |         { message: "Internal Server Error" },
110 |         { status: 500 }
111 |       );
112 |     }
113 |   }
114 | 
115 |   // Listen organization membership (member invite & accepted) creation
116 |   if (eventType === "organizationMembership.created") {
117 |     try {
118 |       // Resource: https://clerk.com/docs/reference/backend-api/tag/Organization-Memberships#operation/CreateOrganizationMembership
119 |       // Show what evnt?.data sends from above resource
120 |       const { organization, public_user_data } = evnt?.data;
121 |       console.log("created", evnt?.data);
122 | 
123 |       // @ts-ignore
124 |       await addMemberToCommunity(organization.id, public_user_data.user_id);
125 | 
126 |       return NextResponse.json(
127 |         { message: "Invitation accepted" },
128 |         { status: 201 }
129 |       );
130 |     } catch (err) {
131 |       console.log(err);
132 | 
133 |       return NextResponse.json(
134 |         { message: "Internal Server Error" },
135 |         { status: 500 }
136 |       );
137 |     }
138 |   }
139 | 
140 |   // Listen member deletion event
141 |   if (eventType === "organizationMembership.deleted") {
142 |     try {
143 |       // Resource: https://clerk.com/docs/reference/backend-api/tag/Organization-Memberships#operation/DeleteOrganizationMembership
144 |       // Show what evnt?.data sends from above resource
145 |       const { organization, public_user_data } = evnt?.data;
146 |       console.log("removed", evnt?.data);
147 | 
148 |       // @ts-ignore
149 |       await removeUserFromCommunity(public_user_data.user_id, organization.id);
150 | 
151 |       return NextResponse.json({ message: "Member removed" }, { status: 201 });
152 |     } catch (err) {
153 |       console.log(err);
154 | 
155 |       return NextResponse.json(
156 |         { message: "Internal Server Error" },
157 |         { status: 500 }
158 |       );
159 |     }
160 |   }
161 | 
162 |   // Listen organization updation event
163 |   if (eventType === "organization.updated") {
164 |     try {
165 |       // Resource: https://clerk.com/docs/reference/backend-api/tag/Organizations#operation/UpdateOrganization
166 |       // Show what evnt?.data sends from above resource
167 |       const { id, logo_url, name, slug } = evnt?.data;
168 |       console.log("updated", evnt?.data);
169 | 
170 |       // @ts-ignore
171 |       await updateCommunityInfo(id, name, slug, logo_url);
172 | 
173 |       return NextResponse.json({ message: "Member removed" }, { status: 201 });
174 |     } catch (err) {
175 |       console.log(err);
176 | 
177 |       return NextResponse.json(
178 |         { message: "Internal Server Error" },
179 |         { status: 500 }
180 |       );
181 |     }
182 |   }
183 | 
184 |   // Listen organization deletion event
185 |   if (eventType === "organization.deleted") {
186 |     try {
187 |       // Resource: https://clerk.com/docs/reference/backend-api/tag/Organizations#operation/DeleteOrganization
188 |       // Show what evnt?.data sends from above resource
189 |       const { id } = evnt?.data;
190 |       console.log("deleted", evnt?.data);
191 | 
192 |       // @ts-ignore
193 |       await deleteCommunity(id);
194 | 
195 |       return NextResponse.json(
196 |         { message: "Organization deleted" },
197 |         { status: 201 }
198 |       );
199 |     } catch (err) {
200 |       console.log(err);
201 | 
202 |       return NextResponse.json(
203 |         { message: "Internal Server Error" },
204 |         { status: 500 }
205 |       );
206 |     }
207 |   }
208 | };
209 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/adrianhajdin/threads/72da0d632377518985cb5ae279d84d0733520d37/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer components {
  6 |   /* main */
  7 |   .main-container {
  8 |     @apply flex min-h-screen flex-1 flex-col items-center bg-dark-1 px-6 pb-10 pt-28 max-md:pb-32 sm:px-10;
  9 |   }
 10 | 
 11 |   /* Head Text */
 12 |   .head-text {
 13 |     @apply text-heading2-bold text-light-1;
 14 |   }
 15 | 
 16 |   /* Activity */
 17 |   .activity-card {
 18 |     @apply flex items-center gap-2 rounded-md bg-dark-2 px-7 py-4;
 19 |   }
 20 | 
 21 |   /* No Result */
 22 |   .no-result {
 23 |     @apply text-center !text-base-regular text-light-3;
 24 |   }
 25 | 
 26 |   /* Community Card */
 27 |   .community-card {
 28 |     @apply w-full rounded-lg bg-dark-3 px-4 py-5 sm:w-96;
 29 |   }
 30 | 
 31 |   .community-card_btn {
 32 |     @apply rounded-lg bg-primary-500 px-5 py-1.5 text-small-regular !text-light-1 !important;
 33 |   }
 34 | 
 35 |   /* thread card  */
 36 |   .thread-card_bar {
 37 |     @apply relative mt-2 w-0.5 grow rounded-full bg-neutral-800;
 38 |   }
 39 | 
 40 |   /* User card */
 41 |   .user-card {
 42 |     @apply flex flex-col justify-between gap-4 max-xs:rounded-xl max-xs:bg-dark-3 max-xs:p-4 xs:flex-row xs:items-center;
 43 |   }
 44 | 
 45 |   .user-card_avatar {
 46 |     @apply flex flex-1 items-start justify-start gap-3 xs:items-center;
 47 |   }
 48 | 
 49 |   .user-card_btn {
 50 |     @apply h-auto min-w-[74px] rounded-lg bg-primary-500 text-[12px] text-light-1 !important;
 51 |   }
 52 | 
 53 |   .searchbar {
 54 |     @apply flex gap-1 rounded-lg bg-dark-3 px-4 py-2;
 55 |   }
 56 | 
 57 |   .searchbar_input {
 58 |     @apply border-none bg-dark-3 text-base-regular text-light-4 outline-none !important;
 59 |   }
 60 | 
 61 |   .topbar {
 62 |     @apply fixed top-0 z-30 flex w-full items-center justify-between bg-dark-2 px-6 py-3;
 63 |   }
 64 | 
 65 |   .bottombar {
 66 |     @apply fixed bottom-0 z-10 w-full rounded-t-3xl bg-glassmorphism p-4 backdrop-blur-lg xs:px-7 md:hidden;
 67 |   }
 68 | 
 69 |   .bottombar_container {
 70 |     @apply flex items-center justify-between gap-3 xs:gap-5;
 71 |   }
 72 | 
 73 |   .bottombar_link {
 74 |     @apply relative flex flex-col items-center gap-2 rounded-lg p-2 sm:flex-1 sm:px-2 sm:py-2.5;
 75 |   }
 76 | 
 77 |   .leftsidebar {
 78 |     @apply sticky left-0 top-0 z-20 flex h-screen w-fit flex-col justify-between overflow-auto border-r border-r-dark-4 bg-dark-2 pb-5 pt-28 max-md:hidden;
 79 |   }
 80 | 
 81 |   .leftsidebar_link {
 82 |     @apply relative flex justify-start gap-4 rounded-lg p-4;
 83 |   }
 84 | 
 85 |   .pagination {
 86 |     @apply mt-10 flex w-full items-center justify-center gap-5;
 87 |   }
 88 | 
 89 |   .rightsidebar {
 90 |     @apply sticky right-0 top-0 z-20 flex h-screen w-fit flex-col justify-between gap-12 overflow-auto border-l border-l-dark-4 bg-dark-2 px-10 pb-6 pt-28 max-xl:hidden;
 91 |   }
 92 | }
 93 | 
 94 | @layer utilities {
 95 |   .css-invert {
 96 |     @apply invert-[50%] brightness-200;
 97 |   }
 98 | 
 99 |   .custom-scrollbar::-webkit-scrollbar {
100 |     width: 3px;
101 |     height: 3px;
102 |     border-radius: 2px;
103 |   }
104 | 
105 |   .custom-scrollbar::-webkit-scrollbar-track {
106 |     background: #09090a;
107 |   }
108 | 
109 |   .custom-scrollbar::-webkit-scrollbar-thumb {
110 |     background: #5c5c7b;
111 |     border-radius: 50px;
112 |   }
113 | 
114 |   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
115 |     background: #7878a3;
116 |   }
117 | }
118 | 
119 | /* Clerk Responsive fix */
120 | .cl-organizationSwitcherTrigger .cl-userPreview .cl-userPreviewTextContainer {
121 |   @apply max-sm:hidden;
122 | }
123 | 
124 | .cl-organizationSwitcherTrigger
125 |   .cl-organizationPreview
126 |   .cl-organizationPreviewTextContainer {
127 |   @apply max-sm:hidden;
128 | }
129 | 
130 | /* Shadcn Component Styles */
131 | 
132 | /* Tab */
133 | .tab {
134 |   @apply flex min-h-[50px] flex-1 items-center gap-3 bg-dark-2 text-light-2 data-[state=active]:bg-[#0e0e12] data-[state=active]:text-light-2 !important;
135 | }
136 | 
137 | .no-focus {
138 |   @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
139 | }
140 | 
141 | /* Account Profile  */
142 | .account-form_image-label {
143 |   @apply flex h-24 w-24 items-center justify-center rounded-full bg-dark-4 !important;
144 | }
145 | 
146 | .account-form_image-input {
147 |   @apply cursor-pointer border-none bg-transparent outline-none file:text-blue !important;
148 | }
149 | 
150 | .account-form_input {
151 |   @apply border border-dark-4 bg-dark-3 text-light-1 !important;
152 | }
153 | 
154 | /* Comment Form */
155 | .comment-form {
156 |   @apply mt-10 flex items-center gap-4 border-y border-y-dark-4 py-5 max-xs:flex-col !important;
157 | }
158 | 
159 | .comment-form_btn {
160 |   @apply rounded-3xl bg-primary-500 px-8 py-2 !text-small-regular text-light-1 max-xs:w-full !important;
161 | }
162 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": false
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/cards/CommunityCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | 
 4 | import { Button } from "../ui/button";
 5 | 
 6 | interface Props {
 7 |   id: string;
 8 |   name: string;
 9 |   username: string;
10 |   imgUrl: string;
11 |   bio: string;
12 |   members: {
13 |     image: string;
14 |   }[];
15 | }
16 | 
17 | function CommunityCard({ id, name, username, imgUrl, bio, members }: Props) {
18 |   return (
19 |     <article className='community-card'>
20 |       <div className='flex flex-wrap items-center gap-3'>
21 |         <Link href={`/communities/${id}`} className='relative h-12 w-12'>
22 |           <Image
23 |             src={imgUrl}
24 |             alt='community_logo'
25 |             fill
26 |             className='rounded-full object-cover'
27 |           />
28 |         </Link>
29 | 
30 |         <div>
31 |           <Link href={`/communities/${id}`}>
32 |             <h4 className='text-base-semibold text-light-1'>{name}</h4>
33 |           </Link>
34 |           <p className='text-small-medium text-gray-1'>@{username}</p>
35 |         </div>
36 |       </div>
37 | 
38 |       <p className='mt-4 text-subtle-medium text-gray-1'>{bio}</p>
39 | 
40 |       <div className='mt-5 flex flex-wrap items-center justify-between gap-3'>
41 |         <Link href={`/communities/${id}`}>
42 |           <Button size='sm' className='community-card_btn'>
43 |             View
44 |           </Button>
45 |         </Link>
46 | 
47 |         {members.length > 0 && (
48 |           <div className='flex items-center'>
49 |             {members.map((member, index) => (
50 |               <Image
51 |                 key={index}
52 |                 src={member.image}
53 |                 alt={`user_${index}`}
54 |                 width={28}
55 |                 height={28}
56 |                 className={`${
57 |                   index !== 0 && "-ml-2"
58 |                 } rounded-full object-cover`}
59 |               />
60 |             ))}
61 |             {members.length > 3 && (
62 |               <p className='ml-1 text-subtle-medium text-gray-1'>
63 |                 {members.length}+ Users
64 |               </p>
65 |             )}
66 |           </div>
67 |         )}
68 |       </div>
69 |     </article>
70 |   );
71 | }
72 | 
73 | export default CommunityCard;
74 | 


--------------------------------------------------------------------------------
/components/cards/ThreadCard.tsx:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | import Link from "next/link";
  3 | 
  4 | import { formatDateString } from "@/lib/utils";
  5 | import DeleteThread from "../forms/DeleteThread";
  6 | 
  7 | interface Props {
  8 |   id: string;
  9 |   currentUserId: string;
 10 |   parentId: string | null;
 11 |   content: string;
 12 |   author: {
 13 |     name: string;
 14 |     image: string;
 15 |     id: string;
 16 |   };
 17 |   community: {
 18 |     id: string;
 19 |     name: string;
 20 |     image: string;
 21 |   } | null;
 22 |   createdAt: string;
 23 |   comments: {
 24 |     author: {
 25 |       image: string;
 26 |     };
 27 |   }[];
 28 |   isComment?: boolean;
 29 | }
 30 | 
 31 | function ThreadCard({
 32 |   id,
 33 |   currentUserId,
 34 |   parentId,
 35 |   content,
 36 |   author,
 37 |   community,
 38 |   createdAt,
 39 |   comments,
 40 |   isComment,
 41 | }: Props) {
 42 |   return (
 43 |     <article
 44 |       className={`flex w-full flex-col rounded-xl ${
 45 |         isComment ? "px-0 xs:px-7" : "bg-dark-2 p-7"
 46 |       }`}
 47 |     >
 48 |       <div className='flex items-start justify-between'>
 49 |         <div className='flex w-full flex-1 flex-row gap-4'>
 50 |           <div className='flex flex-col items-center'>
 51 |             <Link href={`/profile/${author.id}`} className='relative h-11 w-11'>
 52 |               <Image
 53 |                 src={author.image}
 54 |                 alt='user_community_image'
 55 |                 fill
 56 |                 className='cursor-pointer rounded-full'
 57 |               />
 58 |             </Link>
 59 | 
 60 |             <div className='thread-card_bar' />
 61 |           </div>
 62 | 
 63 |           <div className='flex w-full flex-col'>
 64 |             <Link href={`/profile/${author.id}`} className='w-fit'>
 65 |               <h4 className='cursor-pointer text-base-semibold text-light-1'>
 66 |                 {author.name}
 67 |               </h4>
 68 |             </Link>
 69 | 
 70 |             <p className='mt-2 text-small-regular text-light-2'>{content}</p>
 71 | 
 72 |             <div className={`${isComment && "mb-10"} mt-5 flex flex-col gap-3`}>
 73 |               <div className='flex gap-3.5'>
 74 |                 <Image
 75 |                   src='/assets/heart-gray.svg'
 76 |                   alt='heart'
 77 |                   width={24}
 78 |                   height={24}
 79 |                   className='cursor-pointer object-contain'
 80 |                 />
 81 |                 <Link href={`/thread/${id}`}>
 82 |                   <Image
 83 |                     src='/assets/reply.svg'
 84 |                     alt='heart'
 85 |                     width={24}
 86 |                     height={24}
 87 |                     className='cursor-pointer object-contain'
 88 |                   />
 89 |                 </Link>
 90 |                 <Image
 91 |                   src='/assets/repost.svg'
 92 |                   alt='heart'
 93 |                   width={24}
 94 |                   height={24}
 95 |                   className='cursor-pointer object-contain'
 96 |                 />
 97 |                 <Image
 98 |                   src='/assets/share.svg'
 99 |                   alt='heart'
100 |                   width={24}
101 |                   height={24}
102 |                   className='cursor-pointer object-contain'
103 |                 />
104 |               </div>
105 | 
106 |               {isComment && comments.length > 0 && (
107 |                 <Link href={`/thread/${id}`}>
108 |                   <p className='mt-1 text-subtle-medium text-gray-1'>
109 |                     {comments.length} repl{comments.length > 1 ? "ies" : "y"}
110 |                   </p>
111 |                 </Link>
112 |               )}
113 |             </div>
114 |           </div>
115 |         </div>
116 | 
117 |         <DeleteThread
118 |           threadId={JSON.stringify(id)}
119 |           currentUserId={currentUserId}
120 |           authorId={author.id}
121 |           parentId={parentId}
122 |           isComment={isComment}
123 |         />
124 |       </div>
125 | 
126 |       {!isComment && comments.length > 0 && (
127 |         <div className='ml-1 mt-3 flex items-center gap-2'>
128 |           {comments.slice(0, 2).map((comment, index) => (
129 |             <Image
130 |               key={index}
131 |               src={comment.author.image}
132 |               alt={`user_${index}`}
133 |               width={24}
134 |               height={24}
135 |               className={`${index !== 0 && "-ml-5"} rounded-full object-cover`}
136 |             />
137 |           ))}
138 | 
139 |           <Link href={`/thread/${id}`}>
140 |             <p className='mt-1 text-subtle-medium text-gray-1'>
141 |               {comments.length} repl{comments.length > 1 ? "ies" : "y"}
142 |             </p>
143 |           </Link>
144 |         </div>
145 |       )}
146 | 
147 |       {!isComment && community && (
148 |         <Link
149 |           href={`/communities/${community.id}`}
150 |           className='mt-5 flex items-center'
151 |         >
152 |           <p className='text-subtle-medium text-gray-1'>
153 |             {formatDateString(createdAt)}
154 |             {community && ` - ${community.name} Community`}
155 |           </p>
156 | 
157 |           <Image
158 |             src={community.image}
159 |             alt={community.name}
160 |             width={14}
161 |             height={14}
162 |             className='ml-1 rounded-full object-cover'
163 |           />
164 |         </Link>
165 |       )}
166 |     </article>
167 |   );
168 | }
169 | 
170 | export default ThreadCard;
171 | 


--------------------------------------------------------------------------------
/components/cards/UserCard.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import { useRouter } from "next/navigation";
 5 | 
 6 | import { Button } from "../ui/button";
 7 | 
 8 | interface Props {
 9 |   id: string;
10 |   name: string;
11 |   username: string;
12 |   imgUrl: string;
13 |   personType: string;
14 | }
15 | 
16 | function UserCard({ id, name, username, imgUrl, personType }: Props) {
17 |   const router = useRouter();
18 | 
19 |   const isCommunity = personType === "Community";
20 | 
21 |   return (
22 |     <article className='user-card'>
23 |       <div className='user-card_avatar'>
24 |         <div className='relative h-12 w-12'>
25 |           <Image
26 |             src={imgUrl}
27 |             alt='user_logo'
28 |             fill
29 |             className='rounded-full object-cover'
30 |           />
31 |         </div>
32 | 
33 |         <div className='flex-1 text-ellipsis'>
34 |           <h4 className='text-base-semibold text-light-1'>{name}</h4>
35 |           <p className='text-small-medium text-gray-1'>@{username}</p>
36 |         </div>
37 |       </div>
38 | 
39 |       <Button
40 |         className='user-card_btn'
41 |         onClick={() => {
42 |           if (isCommunity) {
43 |             router.push(`/communities/${id}`);
44 |           } else {
45 |             router.push(`/profile/${id}`);
46 |           }
47 |         }}
48 |       >
49 |         View
50 |       </Button>
51 |     </article>
52 |   );
53 | }
54 | 
55 | export default UserCard;
56 | 


--------------------------------------------------------------------------------
/components/forms/AccountProfile.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as z from "zod";
  4 | import Image from "next/image";
  5 | import { useForm } from "react-hook-form";
  6 | import { usePathname, useRouter } from "next/navigation";
  7 | import { ChangeEvent, useState } from "react";
  8 | import { zodResolver } from "@hookform/resolvers/zod";
  9 | 
 10 | import {
 11 |   Form,
 12 |   FormControl,
 13 |   FormField,
 14 |   FormItem,
 15 |   FormLabel,
 16 |   FormMessage,
 17 | } from "@/components/ui/form";
 18 | import { Input } from "@/components/ui/input";
 19 | import { Button } from "@/components/ui/button";
 20 | import { Textarea } from "@/components/ui/textarea";
 21 | 
 22 | import { useUploadThing } from "@/lib/uploadthing";
 23 | import { isBase64Image } from "@/lib/utils";
 24 | 
 25 | import { UserValidation } from "@/lib/validations/user";
 26 | import { updateUser } from "@/lib/actions/user.actions";
 27 | 
 28 | interface Props {
 29 |   user: {
 30 |     id: string;
 31 |     objectId: string;
 32 |     username: string;
 33 |     name: string;
 34 |     bio: string;
 35 |     image: string;
 36 |   };
 37 |   btnTitle: string;
 38 | }
 39 | 
 40 | const AccountProfile = ({ user, btnTitle }: Props) => {
 41 |   const router = useRouter();
 42 |   const pathname = usePathname();
 43 |   const { startUpload } = useUploadThing("media");
 44 | 
 45 |   const [files, setFiles] = useState<File[]>([]);
 46 | 
 47 |   const form = useForm<z.infer<typeof UserValidation>>({
 48 |     resolver: zodResolver(UserValidation),
 49 |     defaultValues: {
 50 |       profile_photo: user?.image ? user.image : "",
 51 |       name: user?.name ? user.name : "",
 52 |       username: user?.username ? user.username : "",
 53 |       bio: user?.bio ? user.bio : "",
 54 |     },
 55 |   });
 56 | 
 57 |   const onSubmit = async (values: z.infer<typeof UserValidation>) => {
 58 |     const blob = values.profile_photo;
 59 | 
 60 |     const hasImageChanged = isBase64Image(blob);
 61 |     if (hasImageChanged) {
 62 |       const imgRes = await startUpload(files);
 63 | 
 64 |       if (imgRes && imgRes[0].fileUrl) {
 65 |         values.profile_photo = imgRes[0].fileUrl;
 66 |       }
 67 |     }
 68 | 
 69 |     await updateUser({
 70 |       name: values.name,
 71 |       path: pathname,
 72 |       username: values.username,
 73 |       userId: user.id,
 74 |       bio: values.bio,
 75 |       image: values.profile_photo,
 76 |     });
 77 | 
 78 |     if (pathname === "/profile/edit") {
 79 |       router.back();
 80 |     } else {
 81 |       router.push("/");
 82 |     }
 83 |   };
 84 | 
 85 |   const handleImage = (
 86 |     e: ChangeEvent<HTMLInputElement>,
 87 |     fieldChange: (value: string) => void
 88 |   ) => {
 89 |     e.preventDefault();
 90 | 
 91 |     const fileReader = new FileReader();
 92 | 
 93 |     if (e.target.files && e.target.files.length > 0) {
 94 |       const file = e.target.files[0];
 95 |       setFiles(Array.from(e.target.files));
 96 | 
 97 |       if (!file.type.includes("image")) return;
 98 | 
 99 |       fileReader.onload = async (event) => {
100 |         const imageDataUrl = event.target?.result?.toString() || "";
101 |         fieldChange(imageDataUrl);
102 |       };
103 | 
104 |       fileReader.readAsDataURL(file);
105 |     }
106 |   };
107 | 
108 |   return (
109 |     <Form {...form}>
110 |       <form
111 |         className='flex flex-col justify-start gap-10'
112 |         onSubmit={form.handleSubmit(onSubmit)}
113 |       >
114 |         <FormField
115 |           control={form.control}
116 |           name='profile_photo'
117 |           render={({ field }) => (
118 |             <FormItem className='flex items-center gap-4'>
119 |               <FormLabel className='account-form_image-label'>
120 |                 {field.value ? (
121 |                   <Image
122 |                     src={field.value}
123 |                     alt='profile_icon'
124 |                     width={96}
125 |                     height={96}
126 |                     priority
127 |                     className='rounded-full object-contain'
128 |                   />
129 |                 ) : (
130 |                   <Image
131 |                     src='/assets/profile.svg'
132 |                     alt='profile_icon'
133 |                     width={24}
134 |                     height={24}
135 |                     className='object-contain'
136 |                   />
137 |                 )}
138 |               </FormLabel>
139 |               <FormControl className='flex-1 text-base-semibold text-gray-200'>
140 |                 <Input
141 |                   type='file'
142 |                   accept='image/*'
143 |                   placeholder='Add profile photo'
144 |                   className='account-form_image-input'
145 |                   onChange={(e) => handleImage(e, field.onChange)}
146 |                 />
147 |               </FormControl>
148 |             </FormItem>
149 |           )}
150 |         />
151 | 
152 |         <FormField
153 |           control={form.control}
154 |           name='name'
155 |           render={({ field }) => (
156 |             <FormItem className='flex w-full flex-col gap-3'>
157 |               <FormLabel className='text-base-semibold text-light-2'>
158 |                 Name
159 |               </FormLabel>
160 |               <FormControl>
161 |                 <Input
162 |                   type='text'
163 |                   className='account-form_input no-focus'
164 |                   {...field}
165 |                 />
166 |               </FormControl>
167 |               <FormMessage />
168 |             </FormItem>
169 |           )}
170 |         />
171 | 
172 |         <FormField
173 |           control={form.control}
174 |           name='username'
175 |           render={({ field }) => (
176 |             <FormItem className='flex w-full flex-col gap-3'>
177 |               <FormLabel className='text-base-semibold text-light-2'>
178 |                 Username
179 |               </FormLabel>
180 |               <FormControl>
181 |                 <Input
182 |                   type='text'
183 |                   className='account-form_input no-focus'
184 |                   {...field}
185 |                 />
186 |               </FormControl>
187 |               <FormMessage />
188 |             </FormItem>
189 |           )}
190 |         />
191 | 
192 |         <FormField
193 |           control={form.control}
194 |           name='bio'
195 |           render={({ field }) => (
196 |             <FormItem className='flex w-full flex-col gap-3'>
197 |               <FormLabel className='text-base-semibold text-light-2'>
198 |                 Bio
199 |               </FormLabel>
200 |               <FormControl>
201 |                 <Textarea
202 |                   rows={10}
203 |                   className='account-form_input no-focus'
204 |                   {...field}
205 |                 />
206 |               </FormControl>
207 |               <FormMessage />
208 |             </FormItem>
209 |           )}
210 |         />
211 | 
212 |         <Button type='submit' className='bg-primary-500'>
213 |           {btnTitle}
214 |         </Button>
215 |       </form>
216 |     </Form>
217 |   );
218 | };
219 | 
220 | export default AccountProfile;
221 | 


--------------------------------------------------------------------------------
/components/forms/Comment.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { z } from "zod";
 4 | import Image from "next/image";
 5 | import { useForm } from "react-hook-form";
 6 | import { usePathname } from "next/navigation";
 7 | import { zodResolver } from "@hookform/resolvers/zod";
 8 | 
 9 | import {
10 |   Form,
11 |   FormControl,
12 |   FormField,
13 |   FormItem,
14 |   FormLabel,
15 | } from "@/components/ui/form";
16 | 
17 | import { Input } from "../ui/input";
18 | import { Button } from "../ui/button";
19 | 
20 | import { CommentValidation } from "@/lib/validations/thread";
21 | import { addCommentToThread } from "@/lib/actions/thread.actions";
22 | 
23 | interface Props {
24 |   threadId: string;
25 |   currentUserImg: string;
26 |   currentUserId: string;
27 | }
28 | 
29 | function Comment({ threadId, currentUserImg, currentUserId }: Props) {
30 |   const pathname = usePathname();
31 | 
32 |   const form = useForm<z.infer<typeof CommentValidation>>({
33 |     resolver: zodResolver(CommentValidation),
34 |     defaultValues: {
35 |       thread: "",
36 |     },
37 |   });
38 | 
39 |   const onSubmit = async (values: z.infer<typeof CommentValidation>) => {
40 |     await addCommentToThread(
41 |       threadId,
42 |       values.thread,
43 |       JSON.parse(currentUserId),
44 |       pathname
45 |     );
46 | 
47 |     form.reset();
48 |   };
49 | 
50 |   return (
51 |     <Form {...form}>
52 |       <form className='comment-form' onSubmit={form.handleSubmit(onSubmit)}>
53 |         <FormField
54 |           control={form.control}
55 |           name='thread'
56 |           render={({ field }) => (
57 |             <FormItem className='flex w-full items-center gap-3'>
58 |               <FormLabel>
59 |                 <Image
60 |                   src={currentUserImg}
61 |                   alt='current_user'
62 |                   width={48}
63 |                   height={48}
64 |                   className='rounded-full object-cover'
65 |                 />
66 |               </FormLabel>
67 |               <FormControl className='border-none bg-transparent'>
68 |                 <Input
69 |                   type='text'
70 |                   {...field}
71 |                   placeholder='Comment...'
72 |                   className='no-focus text-light-1 outline-none'
73 |                 />
74 |               </FormControl>
75 |             </FormItem>
76 |           )}
77 |         />
78 | 
79 |         <Button type='submit' className='comment-form_btn'>
80 |           Reply
81 |         </Button>
82 |       </form>
83 |     </Form>
84 |   );
85 | }
86 | 
87 | export default Comment;
88 | 


--------------------------------------------------------------------------------
/components/forms/DeleteThread.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import { usePathname, useRouter } from "next/navigation";
 5 | 
 6 | import { deleteThread } from "@/lib/actions/thread.actions";
 7 | 
 8 | interface Props {
 9 |   threadId: string;
10 |   currentUserId: string;
11 |   authorId: string;
12 |   parentId: string | null;
13 |   isComment?: boolean;
14 | }
15 | 
16 | function DeleteThread({
17 |   threadId,
18 |   currentUserId,
19 |   authorId,
20 |   parentId,
21 |   isComment,
22 | }: Props) {
23 |   const pathname = usePathname();
24 |   const router = useRouter();
25 | 
26 |   if (currentUserId !== authorId || pathname === "/") return null;
27 | 
28 |   return (
29 |     <Image
30 |       src='/assets/delete.svg'
31 |       alt='delte'
32 |       width={18}
33 |       height={18}
34 |       className='cursor-pointer object-contain'
35 |       onClick={async () => {
36 |         await deleteThread(JSON.parse(threadId), pathname);
37 |         if (!parentId || !isComment) {
38 |           router.push("/");
39 |         }
40 |       }}
41 |     />
42 |   );
43 | }
44 | 
45 | export default DeleteThread;
46 | 


--------------------------------------------------------------------------------
/components/forms/PostThread.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as z from "zod";
 4 | import { useForm } from "react-hook-form";
 5 | import { useOrganization } from "@clerk/nextjs";
 6 | import { zodResolver } from "@hookform/resolvers/zod";
 7 | import { usePathname, useRouter } from "next/navigation";
 8 | 
 9 | import {
10 |   Form,
11 |   FormControl,
12 |   FormField,
13 |   FormItem,
14 |   FormLabel,
15 |   FormMessage,
16 | } from "@/components/ui/form";
17 | import { Button } from "@/components/ui/button";
18 | import { Textarea } from "@/components/ui/textarea";
19 | 
20 | import { ThreadValidation } from "@/lib/validations/thread";
21 | import { createThread } from "@/lib/actions/thread.actions";
22 | 
23 | interface Props {
24 |   userId: string;
25 | }
26 | 
27 | function PostThread({ userId }: Props) {
28 |   const router = useRouter();
29 |   const pathname = usePathname();
30 | 
31 |   const { organization } = useOrganization();
32 | 
33 |   const form = useForm<z.infer<typeof ThreadValidation>>({
34 |     resolver: zodResolver(ThreadValidation),
35 |     defaultValues: {
36 |       thread: "",
37 |       accountId: userId,
38 |     },
39 |   });
40 | 
41 |   const onSubmit = async (values: z.infer<typeof ThreadValidation>) => {
42 |     await createThread({
43 |       text: values.thread,
44 |       author: userId,
45 |       communityId: organization ? organization.id : null,
46 |       path: pathname,
47 |     });
48 | 
49 |     router.push("/");
50 |   };
51 | 
52 |   return (
53 |     <Form {...form}>
54 |       <form
55 |         className='mt-10 flex flex-col justify-start gap-10'
56 |         onSubmit={form.handleSubmit(onSubmit)}
57 |       >
58 |         <FormField
59 |           control={form.control}
60 |           name='thread'
61 |           render={({ field }) => (
62 |             <FormItem className='flex w-full flex-col gap-3'>
63 |               <FormLabel className='text-base-semibold text-light-2'>
64 |                 Content
65 |               </FormLabel>
66 |               <FormControl className='no-focus border border-dark-4 bg-dark-3 text-light-1'>
67 |                 <Textarea rows={15} {...field} />
68 |               </FormControl>
69 |               <FormMessage />
70 |             </FormItem>
71 |           )}
72 |         />
73 | 
74 |         <Button type='submit' className='bg-primary-500'>
75 |           Post Thread
76 |         </Button>
77 |       </form>
78 |     </Form>
79 |   );
80 | }
81 | 
82 | export default PostThread;
83 | 


--------------------------------------------------------------------------------
/components/shared/Bottombar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import Link from "next/link";
 5 | import { usePathname } from "next/navigation";
 6 | 
 7 | import { sidebarLinks } from "@/constants";
 8 | 
 9 | function Bottombar() {
10 |   const pathname = usePathname();
11 | 
12 |   return (
13 |     <section className='bottombar'>
14 |       <div className='bottombar_container'>
15 |         {sidebarLinks.map((link) => {
16 |           const isActive =
17 |             (pathname.includes(link.route) && link.route.length > 1) ||
18 |             pathname === link.route;
19 | 
20 |           return (
21 |             <Link
22 |               href={link.route}
23 |               key={link.label}
24 |               className={`bottombar_link ${isActive && "bg-primary-500"}`}
25 |             >
26 |               <Image
27 |                 src={link.imgURL}
28 |                 alt={link.label}
29 |                 width={16}
30 |                 height={16}
31 |                 className='object-contain'
32 |               />
33 | 
34 |               <p className='text-subtle-medium text-light-1 max-sm:hidden'>
35 |                 {link.label.split(/\s+/)[0]}
36 |               </p>
37 |             </Link>
38 |           );
39 |         })}
40 |       </div>
41 |     </section>
42 |   );
43 | }
44 | 
45 | export default Bottombar;
46 | 


--------------------------------------------------------------------------------
/components/shared/LeftSidebar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import Link from "next/link";
 5 | import { usePathname, useRouter } from "next/navigation";
 6 | import { SignOutButton, SignedIn, useAuth } from "@clerk/nextjs";
 7 | 
 8 | import { sidebarLinks } from "@/constants";
 9 | 
10 | const LeftSidebar = () => {
11 |   const router = useRouter();
12 |   const pathname = usePathname();
13 | 
14 |   const { userId } = useAuth();
15 | 
16 |   return (
17 |     <section className='custom-scrollbar leftsidebar'>
18 |       <div className='flex w-full flex-1 flex-col gap-6 px-6'>
19 |         {sidebarLinks.map((link) => {
20 |           const isActive =
21 |             (pathname.includes(link.route) && link.route.length > 1) ||
22 |             pathname === link.route;
23 | 
24 |           if (link.route === "/profile") link.route = `${link.route}/${userId}`;
25 | 
26 |           return (
27 |             <Link
28 |               href={link.route}
29 |               key={link.label}
30 |               className={`leftsidebar_link ${isActive && "bg-primary-500 "}`}
31 |             >
32 |               <Image
33 |                 src={link.imgURL}
34 |                 alt={link.label}
35 |                 width={24}
36 |                 height={24}
37 |               />
38 | 
39 |               <p className='text-light-1 max-lg:hidden'>{link.label}</p>
40 |             </Link>
41 |           );
42 |         })}
43 |       </div>
44 | 
45 |       <div className='mt-10 px-6'>
46 |         <SignedIn>
47 |           <SignOutButton signOutCallback={() => router.push("/sign-in")}>
48 |             <div className='flex cursor-pointer gap-4 p-4'>
49 |               <Image
50 |                 src='/assets/logout.svg'
51 |                 alt='logout'
52 |                 width={24}
53 |                 height={24}
54 |               />
55 | 
56 |               <p className='text-light-2 max-lg:hidden'>Logout</p>
57 |             </div>
58 |           </SignOutButton>
59 |         </SignedIn>
60 |       </div>
61 |     </section>
62 |   );
63 | };
64 | 
65 | export default LeftSidebar;
66 | 


--------------------------------------------------------------------------------
/components/shared/Pagination.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useRouter } from "next/navigation";
 4 | 
 5 | import { Button } from "../ui/button";
 6 | 
 7 | interface Props {
 8 |   pageNumber: number;
 9 |   isNext: boolean;
10 |   path: string;
11 | }
12 | 
13 | function Pagination({ pageNumber, isNext, path }: Props) {
14 |   const router = useRouter();
15 | 
16 |   const handleNavigation = (type: string) => {
17 |     let nextPageNumber = pageNumber;
18 | 
19 |     if (type === "prev") {
20 |       nextPageNumber = Math.max(1, pageNumber - 1);
21 |     } else if (type === "next") {
22 |       nextPageNumber = pageNumber + 1;
23 |     }
24 | 
25 |     if (nextPageNumber > 1) {
26 |       router.push(`/${path}?page=${nextPageNumber}`);
27 |     } else {
28 |       router.push(`/${path}`);
29 |     }
30 |   };
31 | 
32 |   if (!isNext && pageNumber === 1) return null;
33 | 
34 |   return (
35 |     <div className='pagination'>
36 |       <Button
37 |         onClick={() => handleNavigation("prev")}
38 |         disabled={pageNumber === 1}
39 |         className='!text-small-regular text-light-2'
40 |       >
41 |         Prev
42 |       </Button>
43 |       <p className='text-small-semibold text-light-1'>{pageNumber}</p>
44 |       <Button
45 |         onClick={() => handleNavigation("next")}
46 |         disabled={!isNext}
47 |         className='!text-small-regular text-light-2'
48 |       >
49 |         Next
50 |       </Button>
51 |     </div>
52 |   );
53 | }
54 | 
55 | export default Pagination;
56 | 


--------------------------------------------------------------------------------
/components/shared/ProfileHeader.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import Image from "next/image";
 3 | 
 4 | interface Props {
 5 |   accountId: string;
 6 |   authUserId: string;
 7 |   name: string;
 8 |   username: string;
 9 |   imgUrl: string;
10 |   bio: string;
11 |   type?: string;
12 | }
13 | 
14 | function ProfileHeader({
15 |   accountId,
16 |   authUserId,
17 |   name,
18 |   username,
19 |   imgUrl,
20 |   bio,
21 |   type,
22 | }: Props) {
23 |   return (
24 |     <div className='flex w-full flex-col justify-start'>
25 |       <div className='flex items-center justify-between'>
26 |         <div className='flex items-center gap-3'>
27 |           <div className='relative h-20 w-20 object-cover'>
28 |             <Image
29 |               src={imgUrl}
30 |               alt='logo'
31 |               fill
32 |               className='rounded-full object-cover shadow-2xl'
33 |             />
34 |           </div>
35 | 
36 |           <div className='flex-1'>
37 |             <h2 className='text-left text-heading3-bold text-light-1'>
38 |               {name}
39 |             </h2>
40 |             <p className='text-base-medium text-gray-1'>@{username}</p>
41 |           </div>
42 |         </div>
43 |         {accountId === authUserId && type !== "Community" && (
44 |           <Link href='/profile/edit'>
45 |             <div className='flex cursor-pointer gap-3 rounded-lg bg-dark-3 px-4 py-2'>
46 |               <Image
47 |                 src='/assets/edit.svg'
48 |                 alt='logout'
49 |                 width={16}
50 |                 height={16}
51 |               />
52 | 
53 |               <p className='text-light-2 max-sm:hidden'>Edit</p>
54 |             </div>
55 |           </Link>
56 |         )}
57 |       </div>
58 | 
59 |       <p className='mt-6 max-w-lg text-base-regular text-light-2'>{bio}</p>
60 | 
61 |       <div className='mt-12 h-0.5 w-full bg-dark-3' />
62 |     </div>
63 |   );
64 | }
65 | 
66 | export default ProfileHeader;
67 | 


--------------------------------------------------------------------------------
/components/shared/RightSidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { currentUser } from "@clerk/nextjs";
 2 | 
 3 | import UserCard from "../cards/UserCard";
 4 | 
 5 | import { fetchCommunities } from "@/lib/actions/community.actions";
 6 | import { fetchUsers } from "@/lib/actions/user.actions";
 7 | 
 8 | async function RightSidebar() {
 9 |   const user = await currentUser();
10 |   if (!user) return null;
11 | 
12 |   const similarMinds = await fetchUsers({
13 |     userId: user.id,
14 |     pageSize: 4,
15 |   });
16 | 
17 |   const suggestedCOmmunities = await fetchCommunities({ pageSize: 4 });
18 | 
19 |   return (
20 |     <section className='custom-scrollbar rightsidebar'>
21 |       <div className='flex flex-1 flex-col justify-start'>
22 |         <h3 className='text-heading4-medium text-light-1'>
23 |           Suggested Communities
24 |         </h3>
25 | 
26 |         <div className='mt-7 flex w-[350px] flex-col gap-9'>
27 |           {suggestedCOmmunities.communities.length > 0 ? (
28 |             <>
29 |               {suggestedCOmmunities.communities.map((community) => (
30 |                 <UserCard
31 |                   key={community.id}
32 |                   id={community.id}
33 |                   name={community.name}
34 |                   username={community.username}
35 |                   imgUrl={community.image}
36 |                   personType='Community'
37 |                 />
38 |               ))}
39 |             </>
40 |           ) : (
41 |             <p className='!text-base-regular text-light-3'>
42 |               No communities yet
43 |             </p>
44 |           )}
45 |         </div>
46 |       </div>
47 | 
48 |       <div className='flex flex-1 flex-col justify-start'>
49 |         <h3 className='text-heading4-medium text-light-1'>Similar Minds</h3>
50 |         <div className='mt-7 flex w-[350px] flex-col gap-10'>
51 |           {similarMinds.users.length > 0 ? (
52 |             <>
53 |               {similarMinds.users.map((person) => (
54 |                 <UserCard
55 |                   key={person.id}
56 |                   id={person.id}
57 |                   name={person.name}
58 |                   username={person.username}
59 |                   imgUrl={person.image}
60 |                   personType='User'
61 |                 />
62 |               ))}
63 |             </>
64 |           ) : (
65 |             <p className='!text-base-regular text-light-3'>No users yet</p>
66 |           )}
67 |         </div>
68 |       </div>
69 |     </section>
70 |   );
71 | }
72 | 
73 | export default RightSidebar;
74 | 


--------------------------------------------------------------------------------
/components/shared/Searchbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import { useRouter } from "next/navigation";
 5 | import { useEffect, useState } from "react";
 6 | 
 7 | import { Input } from "../ui/input";
 8 | 
 9 | interface Props {
10 |   routeType: string;
11 | }
12 | 
13 | function Searchbar({ routeType }: Props) {
14 |   const router = useRouter();
15 |   const [search, setSearch] = useState("");
16 | 
17 |   // query after 0.3s of no input
18 |   useEffect(() => {
19 |     const delayDebounceFn = setTimeout(() => {
20 |       if (search) {
21 |         router.push(`/${routeType}?q=` + search);
22 |       } else {
23 |         router.push(`/${routeType}`);
24 |       }
25 |     }, 300);
26 | 
27 |     return () => clearTimeout(delayDebounceFn);
28 |   }, [search, routeType]);
29 | 
30 |   return (
31 |     <div className='searchbar'>
32 |       <Image
33 |         src='/assets/search-gray.svg'
34 |         alt='search'
35 |         width={24}
36 |         height={24}
37 |         className='object-contain'
38 |       />
39 |       <Input
40 |         id='text'
41 |         value={search}
42 |         onChange={(e) => setSearch(e.target.value)}
43 |         placeholder={`${
44 |           routeType !== "/search" ? "Search communities" : "Search creators"
45 |         }`}
46 |         className='no-focus searchbar_input'
47 |       />
48 |     </div>
49 |   );
50 | }
51 | 
52 | export default Searchbar;
53 | 


--------------------------------------------------------------------------------
/components/shared/ThreadsTab.tsx:
--------------------------------------------------------------------------------
 1 | import { redirect } from "next/navigation";
 2 | 
 3 | import { fetchCommunityPosts } from "@/lib/actions/community.actions";
 4 | import { fetchUserPosts } from "@/lib/actions/user.actions";
 5 | 
 6 | import ThreadCard from "../cards/ThreadCard";
 7 | 
 8 | interface Result {
 9 |   name: string;
10 |   image: string;
11 |   id: string;
12 |   threads: {
13 |     _id: string;
14 |     text: string;
15 |     parentId: string | null;
16 |     author: {
17 |       name: string;
18 |       image: string;
19 |       id: string;
20 |     };
21 |     community: {
22 |       id: string;
23 |       name: string;
24 |       image: string;
25 |     } | null;
26 |     createdAt: string;
27 |     children: {
28 |       author: {
29 |         image: string;
30 |       };
31 |     }[];
32 |   }[];
33 | }
34 | 
35 | interface Props {
36 |   currentUserId: string;
37 |   accountId: string;
38 |   accountType: string;
39 | }
40 | 
41 | async function ThreadsTab({ currentUserId, accountId, accountType }: Props) {
42 |   let result: Result;
43 | 
44 |   if (accountType === "Community") {
45 |     result = await fetchCommunityPosts(accountId);
46 |   } else {
47 |     result = await fetchUserPosts(accountId);
48 |   }
49 | 
50 |   if (!result) {
51 |     redirect("/");
52 |   }
53 | 
54 |   return (
55 |     <section className='mt-9 flex flex-col gap-10'>
56 |       {result.threads.map((thread) => (
57 |         <ThreadCard
58 |           key={thread._id}
59 |           id={thread._id}
60 |           currentUserId={currentUserId}
61 |           parentId={thread.parentId}
62 |           content={thread.text}
63 |           author={
64 |             accountType === "User"
65 |               ? { name: result.name, image: result.image, id: result.id }
66 |               : {
67 |                   name: thread.author.name,
68 |                   image: thread.author.image,
69 |                   id: thread.author.id,
70 |                 }
71 |           }
72 |           community={
73 |             accountType === "Community"
74 |               ? { name: result.name, id: result.id, image: result.image }
75 |               : thread.community
76 |           }
77 |           createdAt={thread.createdAt}
78 |           comments={thread.children}
79 |         />
80 |       ))}
81 |     </section>
82 |   );
83 | }
84 | 
85 | export default ThreadsTab;
86 | 


--------------------------------------------------------------------------------
/components/shared/Topbar.tsx:
--------------------------------------------------------------------------------
 1 | import { OrganizationSwitcher, SignedIn, SignOutButton } from "@clerk/nextjs";
 2 | import { dark } from "@clerk/themes";
 3 | import Image from "next/image";
 4 | import Link from "next/link";
 5 | 
 6 | function Topbar() {
 7 |   return (
 8 |     <nav className='topbar'>
 9 |       <Link href='/' className='flex items-center gap-4'>
10 |         <Image src='/logo.svg' alt='logo' width={28} height={28} />
11 |         <p className='text-heading3-bold text-light-1 max-xs:hidden'>Threads</p>
12 |       </Link>
13 | 
14 |       <div className='flex items-center gap-1'>
15 |         <div className='block md:hidden'>
16 |           <SignedIn>
17 |             <SignOutButton>
18 |               <div className='flex cursor-pointer'>
19 |                 <Image
20 |                   src='/assets/logout.svg'
21 |                   alt='logout'
22 |                   width={24}
23 |                   height={24}
24 |                 />
25 |               </div>
26 |             </SignOutButton>
27 |           </SignedIn>
28 |         </div>
29 | 
30 |         <OrganizationSwitcher
31 |           appearance={{
32 |             baseTheme: dark,
33 |             elements: {
34 |               organizationSwitcherTrigger: "py-2 px-4",
35 |             },
36 |           }}
37 |         />
38 |       </div>
39 |     </nav>
40 |   );
41 | }
42 | 
43 | export default Topbar;
44 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
13 |         destructive:
14 |           "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-red-50 dark:hover:bg-red-900/90",
15 |         outline:
16 |           "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
17 |         secondary:
18 |           "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
19 |         ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
20 |         link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as LabelPrimitive from "@radix-ui/react-label"
  3 | import { Slot } from "@radix-ui/react-slot"
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form"
 12 | 
 13 | import { cn } from "@/lib/utils"
 14 | import { Label } from "@/components/ui/label"
 15 | 
 16 | const Form = FormProvider
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 21 | > = {
 22 |   name: TName
 23 | }
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue
 27 | )
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   )
 40 | }
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext)
 44 |   const itemContext = React.useContext(FormItemContext)
 45 |   const { getFieldState, formState } = useFormContext()
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState)
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>")
 51 |   }
 52 | 
 53 |   const { id } = itemContext
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   }
 63 | }
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string
 67 | }
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue
 71 | )
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId()
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   )
 84 | })
 85 | FormItem.displayName = "FormItem"
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField()
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-red-500 dark:text-red-900", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   )
101 | })
102 | FormLabel.displayName = "FormLabel"
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109 | 
110 |   return (
111 |     <Slot
112 |       ref={ref}
113 |       id={formItemId}
114 |       aria-describedby={
115 |         !error
116 |           ? `${formDescriptionId}`
117 |           : `${formDescriptionId} ${formMessageId}`
118 |       }
119 |       aria-invalid={!!error}
120 |       {...props}
121 |     />
122 |   )
123 | })
124 | FormControl.displayName = "FormControl"
125 | 
126 | const FormDescription = React.forwardRef<
127 |   HTMLParagraphElement,
128 |   React.HTMLAttributes<HTMLParagraphElement>
129 | >(({ className, ...props }, ref) => {
130 |   const { formDescriptionId } = useFormField()
131 | 
132 |   return (
133 |     <p
134 |       ref={ref}
135 |       id={formDescriptionId}
136 |       className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
137 |       {...props}
138 |     />
139 |   )
140 | })
141 | FormDescription.displayName = "FormDescription"
142 | 
143 | const FormMessage = React.forwardRef<
144 |   HTMLParagraphElement,
145 |   React.HTMLAttributes<HTMLParagraphElement>
146 | >(({ className, children, ...props }, ref) => {
147 |   const { error, formMessageId } = useFormField()
148 |   const body = error ? String(error?.message) : children
149 | 
150 |   if (!body) {
151 |     return null
152 |   }
153 | 
154 |   return (
155 |     <p
156 |       ref={ref}
157 |       id={formMessageId}
158 |       className={cn("text-sm font-medium text-red-500 dark:text-red-900", className)}
159 |       {...props}
160 |     >
161 |       {body}
162 |     </p>
163 |   )
164 | })
165 | FormMessage.displayName = "FormMessage"
166 | 
167 | export {
168 |   useFormField,
169 |   Form,
170 |   FormItem,
171 |   FormLabel,
172 |   FormControl,
173 |   FormDescription,
174 |   FormMessage,
175 |   FormField,
176 | }
177 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-slate-200 border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   }
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const MenubarMenu = MenubarPrimitive.Menu
 10 | 
 11 | const MenubarGroup = MenubarPrimitive.Group
 12 | 
 13 | const MenubarPortal = MenubarPrimitive.Portal
 14 | 
 15 | const MenubarSub = MenubarPrimitive.Sub
 16 | 
 17 | const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 18 | 
 19 | const Menubar = React.forwardRef<
 20 |   React.ElementRef<typeof MenubarPrimitive.Root>,
 21 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 22 | >(({ className, ...props }, ref) => (
 23 |   <MenubarPrimitive.Root
 24 |     ref={ref}
 25 |     className={cn(
 26 |       "flex h-10 items-center space-x-1 rounded-md border border-slate-200 bg-white p-1 dark:border-slate-800 dark:bg-slate-950",
 27 |       className
 28 |     )}
 29 |     {...props}
 30 |   />
 31 | ))
 32 | Menubar.displayName = MenubarPrimitive.Root.displayName
 33 | 
 34 | const MenubarTrigger = React.forwardRef<
 35 |   React.ElementRef<typeof MenubarPrimitive.Trigger>,
 36 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 37 | >(({ className, ...props }, ref) => (
 38 |   <MenubarPrimitive.Trigger
 39 |     ref={ref}
 40 |     className={cn(
 41 |       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 focus:text-slate-900 data-[state=open]:bg-slate-100 data-[state=open]:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-50",
 42 |       className
 43 |     )}
 44 |     {...props}
 45 |   />
 46 | ))
 47 | MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 48 | 
 49 | const MenubarSubTrigger = React.forwardRef<
 50 |   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
 51 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
 52 |     inset?: boolean
 53 |   }
 54 | >(({ className, inset, children, ...props }, ref) => (
 55 |   <MenubarPrimitive.SubTrigger
 56 |     ref={ref}
 57 |     className={cn(
 58 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[state=open]:bg-slate-100 data-[state=open]:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-50 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-50",
 59 |       inset && "pl-8",
 60 |       className
 61 |     )}
 62 |     {...props}
 63 |   >
 64 |     {children}
 65 |     <ChevronRight className="ml-auto h-4 w-4" />
 66 |   </MenubarPrimitive.SubTrigger>
 67 | ))
 68 | MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 69 | 
 70 | const MenubarSubContent = React.forwardRef<
 71 |   React.ElementRef<typeof MenubarPrimitive.SubContent>,
 72 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 73 | >(({ className, ...props }, ref) => (
 74 |   <MenubarPrimitive.SubContent
 75 |     ref={ref}
 76 |     className={cn(
 77 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
 78 |       className
 79 |     )}
 80 |     {...props}
 81 |   />
 82 | ))
 83 | MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 84 | 
 85 | const MenubarContent = React.forwardRef<
 86 |   React.ElementRef<typeof MenubarPrimitive.Content>,
 87 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 88 | >(
 89 |   (
 90 |     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
 91 |     ref
 92 |   ) => (
 93 |     <MenubarPrimitive.Portal>
 94 |       <MenubarPrimitive.Content
 95 |         ref={ref}
 96 |         align={align}
 97 |         alignOffset={alignOffset}
 98 |         sideOffset={sideOffset}
 99 |         className={cn(
100 |           "z-50 min-w-[12rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
101 |           className
102 |         )}
103 |         {...props}
104 |       />
105 |     </MenubarPrimitive.Portal>
106 |   )
107 | )
108 | MenubarContent.displayName = MenubarPrimitive.Content.displayName
109 | 
110 | const MenubarItem = React.forwardRef<
111 |   React.ElementRef<typeof MenubarPrimitive.Item>,
112 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
113 |     inset?: boolean
114 |   }
115 | >(({ className, inset, ...props }, ref) => (
116 |   <MenubarPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
120 |       inset && "pl-8",
121 |       className
122 |     )}
123 |     {...props}
124 |   />
125 | ))
126 | MenubarItem.displayName = MenubarPrimitive.Item.displayName
127 | 
128 | const MenubarCheckboxItem = React.forwardRef<
129 |   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
130 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
131 | >(({ className, children, checked, ...props }, ref) => (
132 |   <MenubarPrimitive.CheckboxItem
133 |     ref={ref}
134 |     className={cn(
135 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
136 |       className
137 |     )}
138 |     checked={checked}
139 |     {...props}
140 |   >
141 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
142 |       <MenubarPrimitive.ItemIndicator>
143 |         <Check className="h-4 w-4" />
144 |       </MenubarPrimitive.ItemIndicator>
145 |     </span>
146 |     {children}
147 |   </MenubarPrimitive.CheckboxItem>
148 | ))
149 | MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
150 | 
151 | const MenubarRadioItem = React.forwardRef<
152 |   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
153 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
154 | >(({ className, children, ...props }, ref) => (
155 |   <MenubarPrimitive.RadioItem
156 |     ref={ref}
157 |     className={cn(
158 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
159 |       className
160 |     )}
161 |     {...props}
162 |   >
163 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
164 |       <MenubarPrimitive.ItemIndicator>
165 |         <Circle className="h-2 w-2 fill-current" />
166 |       </MenubarPrimitive.ItemIndicator>
167 |     </span>
168 |     {children}
169 |   </MenubarPrimitive.RadioItem>
170 | ))
171 | MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
172 | 
173 | const MenubarLabel = React.forwardRef<
174 |   React.ElementRef<typeof MenubarPrimitive.Label>,
175 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
176 |     inset?: boolean
177 |   }
178 | >(({ className, inset, ...props }, ref) => (
179 |   <MenubarPrimitive.Label
180 |     ref={ref}
181 |     className={cn(
182 |       "px-2 py-1.5 text-sm font-semibold",
183 |       inset && "pl-8",
184 |       className
185 |     )}
186 |     {...props}
187 |   />
188 | ))
189 | MenubarLabel.displayName = MenubarPrimitive.Label.displayName
190 | 
191 | const MenubarSeparator = React.forwardRef<
192 |   React.ElementRef<typeof MenubarPrimitive.Separator>,
193 |   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
194 | >(({ className, ...props }, ref) => (
195 |   <MenubarPrimitive.Separator
196 |     ref={ref}
197 |     className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
198 |     {...props}
199 |   />
200 | ))
201 | MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
202 | 
203 | const MenubarShortcut = ({
204 |   className,
205 |   ...props
206 | }: React.HTMLAttributes<HTMLSpanElement>) => {
207 |   return (
208 |     <span
209 |       className={cn(
210 |         "ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400",
211 |         className
212 |       )}
213 |       {...props}
214 |     />
215 |   )
216 | }
217 | MenubarShortcut.displayname = "MenubarShortcut"
218 | 
219 | export {
220 |   Menubar,
221 |   MenubarMenu,
222 |   MenubarTrigger,
223 |   MenubarContent,
224 |   MenubarItem,
225 |   MenubarSeparator,
226 |   MenubarLabel,
227 |   MenubarCheckboxItem,
228 |   MenubarRadioGroup,
229 |   MenubarRadioItem,
230 |   MenubarPortal,
231 |   MenubarSubContent,
232 |   MenubarSubTrigger,
233 |   MenubarGroup,
234 |   MenubarSub,
235 |   MenubarShortcut,
236 | }
237 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 border-slate-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus:ring-slate-800",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectContent = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 38 | >(({ className, children, position = "popper", ...props }, ref) => (
 39 |   <SelectPrimitive.Portal>
 40 |     <SelectPrimitive.Content
 41 |       ref={ref}
 42 |       className={cn(
 43 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
 44 |         position === "popper" &&
 45 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 46 |         className
 47 |       )}
 48 |       position={position}
 49 |       {...props}
 50 |     >
 51 |       <SelectPrimitive.Viewport
 52 |         className={cn(
 53 |           "p-1",
 54 |           position === "popper" &&
 55 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 56 |         )}
 57 |       >
 58 |         {children}
 59 |       </SelectPrimitive.Viewport>
 60 |     </SelectPrimitive.Content>
 61 |   </SelectPrimitive.Portal>
 62 | ))
 63 | SelectContent.displayName = SelectPrimitive.Content.displayName
 64 | 
 65 | const SelectLabel = React.forwardRef<
 66 |   React.ElementRef<typeof SelectPrimitive.Label>,
 67 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 68 | >(({ className, ...props }, ref) => (
 69 |   <SelectPrimitive.Label
 70 |     ref={ref}
 71 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 72 |     {...props}
 73 |   />
 74 | ))
 75 | SelectLabel.displayName = SelectPrimitive.Label.displayName
 76 | 
 77 | const SelectItem = React.forwardRef<
 78 |   React.ElementRef<typeof SelectPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 80 | >(({ className, children, ...props }, ref) => (
 81 |   <SelectPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   >
 89 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 90 |       <SelectPrimitive.ItemIndicator>
 91 |         <Check className="h-4 w-4" />
 92 |       </SelectPrimitive.ItemIndicator>
 93 |     </span>
 94 | 
 95 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 96 |   </SelectPrimitive.Item>
 97 | ))
 98 | SelectItem.displayName = SelectPrimitive.Item.displayName
 99 | 
100 | const SelectSeparator = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Separator>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Separator
105 |     ref={ref}
106 |     className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
111 | 
112 | export {
113 |   Select,
114 |   SelectGroup,
115 |   SelectValue,
116 |   SelectTrigger,
117 |   SelectContent,
118 |   SelectLabel,
119 |   SelectItem,
120 |   SelectSeparator,
121 | }
122 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs";
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | const Tabs = TabsPrimitive.Root;
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ));
23 | TabsList.displayName = TabsPrimitive.List.displayName;
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-sm dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ));
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ));
53 | TabsContent.displayName = TabsPrimitive.Content.displayName;
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent };
56 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           "flex min-h-[80px] w-full rounded-md border border-slate-200 border-slate-200 bg-transparent px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:border-slate-800 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800",
14 |           className
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     )
20 |   }
21 | )
22 | Textarea.displayName = "Textarea"
23 | 
24 | export { Textarea }
25 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-slate-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-slate-800",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-white dark:bg-slate-950",
 31 |         destructive:
 32 |           "destructive group border-red-500 bg-red-500 text-slate-50 dark:border-red-900 dark:bg-red-900 dark:text-red-50",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-slate-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 group-[.destructive]:focus:ring-red-500 dark:border-slate-800 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:focus:ring-slate-800 dark:group-[.destructive]:border-slate-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-red-50 dark:group-[.destructive]:focus:ring-red-900",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-slate-950/50 opacity-0 transition-opacity hover:text-slate-950 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-slate-50/50 dark:hover:text-slate-50",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react"
  3 | 
  4 | import type {
  5 |   ToastActionElement,
  6 |   ToastProps,
  7 | } from "@/components/ui/toast"
  8 | 
  9 | const TOAST_LIMIT = 1
 10 | const TOAST_REMOVE_DELAY = 1000000
 11 | 
 12 | type ToasterToast = ToastProps & {
 13 |   id: string
 14 |   title?: React.ReactNode
 15 |   description?: React.ReactNode
 16 |   action?: ToastActionElement
 17 | }
 18 | 
 19 | const actionTypes = {
 20 |   ADD_TOAST: "ADD_TOAST",
 21 |   UPDATE_TOAST: "UPDATE_TOAST",
 22 |   DISMISS_TOAST: "DISMISS_TOAST",
 23 |   REMOVE_TOAST: "REMOVE_TOAST",
 24 | } as const
 25 | 
 26 | let count = 0
 27 | 
 28 | function genId() {
 29 |   count = (count + 1) % Number.MAX_VALUE
 30 |   return count.toString()
 31 | }
 32 | 
 33 | type ActionType = typeof actionTypes
 34 | 
 35 | type Action =
 36 |   | {
 37 |       type: ActionType["ADD_TOAST"]
 38 |       toast: ToasterToast
 39 |     }
 40 |   | {
 41 |       type: ActionType["UPDATE_TOAST"]
 42 |       toast: Partial<ToasterToast>
 43 |     }
 44 |   | {
 45 |       type: ActionType["DISMISS_TOAST"]
 46 |       toastId?: ToasterToast["id"]
 47 |     }
 48 |   | {
 49 |       type: ActionType["REMOVE_TOAST"]
 50 |       toastId?: ToasterToast["id"]
 51 |     }
 52 | 
 53 | interface State {
 54 |   toasts: ToasterToast[]
 55 | }
 56 | 
 57 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 58 | 
 59 | const addToRemoveQueue = (toastId: string) => {
 60 |   if (toastTimeouts.has(toastId)) {
 61 |     return
 62 |   }
 63 | 
 64 |   const timeout = setTimeout(() => {
 65 |     toastTimeouts.delete(toastId)
 66 |     dispatch({
 67 |       type: "REMOVE_TOAST",
 68 |       toastId: toastId,
 69 |     })
 70 |   }, TOAST_REMOVE_DELAY)
 71 | 
 72 |   toastTimeouts.set(toastId, timeout)
 73 | }
 74 | 
 75 | export const reducer = (state: State, action: Action): State => {
 76 |   switch (action.type) {
 77 |     case "ADD_TOAST":
 78 |       return {
 79 |         ...state,
 80 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 81 |       }
 82 | 
 83 |     case "UPDATE_TOAST":
 84 |       return {
 85 |         ...state,
 86 |         toasts: state.toasts.map((t) =>
 87 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 88 |         ),
 89 |       }
 90 | 
 91 |     case "DISMISS_TOAST": {
 92 |       const { toastId } = action
 93 | 
 94 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 95 |       // but I'll keep it here for simplicity
 96 |       if (toastId) {
 97 |         addToRemoveQueue(toastId)
 98 |       } else {
 99 |         state.toasts.forEach((toast) => {
100 |           addToRemoveQueue(toast.id)
101 |         })
102 |       }
103 | 
104 |       return {
105 |         ...state,
106 |         toasts: state.toasts.map((t) =>
107 |           t.id === toastId || toastId === undefined
108 |             ? {
109 |                 ...t,
110 |                 open: false,
111 |               }
112 |             : t
113 |         ),
114 |       }
115 |     }
116 |     case "REMOVE_TOAST":
117 |       if (action.toastId === undefined) {
118 |         return {
119 |           ...state,
120 |           toasts: [],
121 |         }
122 |       }
123 |       return {
124 |         ...state,
125 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 |       }
127 |   }
128 | }
129 | 
130 | const listeners: Array<(state: State) => void> = []
131 | 
132 | let memoryState: State = { toasts: [] }
133 | 
134 | function dispatch(action: Action) {
135 |   memoryState = reducer(memoryState, action)
136 |   listeners.forEach((listener) => {
137 |     listener(memoryState)
138 |   })
139 | }
140 | 
141 | type Toast = Omit<ToasterToast, "id">
142 | 
143 | function toast({ ...props }: Toast) {
144 |   const id = genId()
145 | 
146 |   const update = (props: ToasterToast) =>
147 |     dispatch({
148 |       type: "UPDATE_TOAST",
149 |       toast: { ...props, id },
150 |     })
151 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 | 
153 |   dispatch({
154 |     type: "ADD_TOAST",
155 |     toast: {
156 |       ...props,
157 |       id,
158 |       open: true,
159 |       onOpenChange: (open) => {
160 |         if (!open) dismiss()
161 |       },
162 |     },
163 |   })
164 | 
165 |   return {
166 |     id: id,
167 |     dismiss,
168 |     update,
169 |   }
170 | }
171 | 
172 | function useToast() {
173 |   const [state, setState] = React.useState<State>(memoryState)
174 | 
175 |   React.useEffect(() => {
176 |     listeners.push(setState)
177 |     return () => {
178 |       const index = listeners.indexOf(setState)
179 |       if (index > -1) {
180 |         listeners.splice(index, 1)
181 |       }
182 |     }
183 |   }, [state])
184 | 
185 |   return {
186 |     ...state,
187 |     toast,
188 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 |   }
190 | }
191 | 
192 | export { useToast, toast }
193 | 


--------------------------------------------------------------------------------
/constants/index.js:
--------------------------------------------------------------------------------
 1 | export const sidebarLinks = [
 2 |   {
 3 |     imgURL: "/assets/home.svg",
 4 |     route: "/",
 5 |     label: "Home",
 6 |   },
 7 |   {
 8 |     imgURL: "/assets/search.svg",
 9 |     route: "/search",
10 |     label: "Search",
11 |   },
12 |   {
13 |     imgURL: "/assets/heart.svg",
14 |     route: "/activity",
15 |     label: "Activity",
16 |   },
17 |   {
18 |     imgURL: "/assets/create.svg",
19 |     route: "/create-thread",
20 |     label: "Create Thread",
21 |   },
22 |   {
23 |     imgURL: "/assets/community.svg",
24 |     route: "/communities",
25 |     label: "Communities",
26 |   },
27 |   {
28 |     imgURL: "/assets/user.svg",
29 |     route: "/profile",
30 |     label: "Profile",
31 |   },
32 | ];
33 | 
34 | export const profileTabs = [
35 |   { value: "threads", label: "Threads", icon: "/assets/reply.svg" },
36 |   { value: "replies", label: "Replies", icon: "/assets/members.svg" },
37 |   { value: "tagged", label: "Tagged", icon: "/assets/tag.svg" },
38 | ];
39 | 
40 | export const communityTabs = [
41 |   { value: "threads", label: "Threads", icon: "/assets/reply.svg" },
42 |   { value: "members", label: "Members", icon: "/assets/members.svg" },
43 |   { value: "requests", label: "Requests", icon: "/assets/request.svg" },
44 | ];
45 | 


--------------------------------------------------------------------------------
/lib/actions/community.actions.ts:
--------------------------------------------------------------------------------
  1 | "use server";
  2 | 
  3 | import { FilterQuery, SortOrder } from "mongoose";
  4 | 
  5 | import Community from "../models/community.model";
  6 | import Thread from "../models/thread.model";
  7 | import User from "../models/user.model";
  8 | 
  9 | import { connectToDB } from "../mongoose";
 10 | 
 11 | export async function createCommunity(
 12 |   id: string,
 13 |   name: string,
 14 |   username: string,
 15 |   image: string,
 16 |   bio: string,
 17 |   createdById: string // Change the parameter name to reflect it's an id
 18 | ) {
 19 |   try {
 20 |     connectToDB();
 21 | 
 22 |     // Find the user with the provided unique id
 23 |     const user = await User.findOne({ id: createdById });
 24 | 
 25 |     if (!user) {
 26 |       throw new Error("User not found"); // Handle the case if the user with the id is not found
 27 |     }
 28 | 
 29 |     const newCommunity = new Community({
 30 |       id,
 31 |       name,
 32 |       username,
 33 |       image,
 34 |       bio,
 35 |       createdBy: user._id, // Use the mongoose ID of the user
 36 |     });
 37 | 
 38 |     const createdCommunity = await newCommunity.save();
 39 | 
 40 |     // Update User model
 41 |     user.communities.push(createdCommunity._id);
 42 |     await user.save();
 43 | 
 44 |     return createdCommunity;
 45 |   } catch (error) {
 46 |     // Handle any errors
 47 |     console.error("Error creating community:", error);
 48 |     throw error;
 49 |   }
 50 | }
 51 | 
 52 | export async function fetchCommunityDetails(id: string) {
 53 |   try {
 54 |     connectToDB();
 55 | 
 56 |     const communityDetails = await Community.findOne({ id }).populate([
 57 |       "createdBy",
 58 |       {
 59 |         path: "members",
 60 |         model: User,
 61 |         select: "name username image _id id",
 62 |       },
 63 |     ]);
 64 | 
 65 |     return communityDetails;
 66 |   } catch (error) {
 67 |     // Handle any errors
 68 |     console.error("Error fetching community details:", error);
 69 |     throw error;
 70 |   }
 71 | }
 72 | 
 73 | export async function fetchCommunityPosts(id: string) {
 74 |   try {
 75 |     connectToDB();
 76 | 
 77 |     const communityPosts = await Community.findById(id).populate({
 78 |       path: "threads",
 79 |       model: Thread,
 80 |       populate: [
 81 |         {
 82 |           path: "author",
 83 |           model: User,
 84 |           select: "name image id", // Select the "name" and "_id" fields from the "User" model
 85 |         },
 86 |         {
 87 |           path: "children",
 88 |           model: Thread,
 89 |           populate: {
 90 |             path: "author",
 91 |             model: User,
 92 |             select: "image _id", // Select the "name" and "_id" fields from the "User" model
 93 |           },
 94 |         },
 95 |       ],
 96 |     });
 97 | 
 98 |     return communityPosts;
 99 |   } catch (error) {
100 |     // Handle any errors
101 |     console.error("Error fetching community posts:", error);
102 |     throw error;
103 |   }
104 | }
105 | 
106 | export async function fetchCommunities({
107 |   searchString = "",
108 |   pageNumber = 1,
109 |   pageSize = 20,
110 |   sortBy = "desc",
111 | }: {
112 |   searchString?: string;
113 |   pageNumber?: number;
114 |   pageSize?: number;
115 |   sortBy?: SortOrder;
116 | }) {
117 |   try {
118 |     connectToDB();
119 | 
120 |     // Calculate the number of communities to skip based on the page number and page size.
121 |     const skipAmount = (pageNumber - 1) * pageSize;
122 | 
123 |     // Create a case-insensitive regular expression for the provided search string.
124 |     const regex = new RegExp(searchString, "i");
125 | 
126 |     // Create an initial query object to filter communities.
127 |     const query: FilterQuery<typeof Community> = {};
128 | 
129 |     // If the search string is not empty, add the $or operator to match either username or name fields.
130 |     if (searchString.trim() !== "") {
131 |       query.$or = [
132 |         { username: { $regex: regex } },
133 |         { name: { $regex: regex } },
134 |       ];
135 |     }
136 | 
137 |     // Define the sort options for the fetched communities based on createdAt field and provided sort order.
138 |     const sortOptions = { createdAt: sortBy };
139 | 
140 |     // Create a query to fetch the communities based on the search and sort criteria.
141 |     const communitiesQuery = Community.find(query)
142 |       .sort(sortOptions)
143 |       .skip(skipAmount)
144 |       .limit(pageSize)
145 |       .populate("members");
146 | 
147 |     // Count the total number of communities that match the search criteria (without pagination).
148 |     const totalCommunitiesCount = await Community.countDocuments(query);
149 | 
150 |     const communities = await communitiesQuery.exec();
151 | 
152 |     // Check if there are more communities beyond the current page.
153 |     const isNext = totalCommunitiesCount > skipAmount + communities.length;
154 | 
155 |     return { communities, isNext };
156 |   } catch (error) {
157 |     console.error("Error fetching communities:", error);
158 |     throw error;
159 |   }
160 | }
161 | 
162 | export async function addMemberToCommunity(
163 |   communityId: string,
164 |   memberId: string
165 | ) {
166 |   try {
167 |     connectToDB();
168 | 
169 |     // Find the community by its unique id
170 |     const community = await Community.findOne({ id: communityId });
171 | 
172 |     if (!community) {
173 |       throw new Error("Community not found");
174 |     }
175 | 
176 |     // Find the user by their unique id
177 |     const user = await User.findOne({ id: memberId });
178 | 
179 |     if (!user) {
180 |       throw new Error("User not found");
181 |     }
182 | 
183 |     // Check if the user is already a member of the community
184 |     if (community.members.includes(user._id)) {
185 |       throw new Error("User is already a member of the community");
186 |     }
187 | 
188 |     // Add the user's _id to the members array in the community
189 |     community.members.push(user._id);
190 |     await community.save();
191 | 
192 |     // Add the community's _id to the communities array in the user
193 |     user.communities.push(community._id);
194 |     await user.save();
195 | 
196 |     return community;
197 |   } catch (error) {
198 |     // Handle any errors
199 |     console.error("Error adding member to community:", error);
200 |     throw error;
201 |   }
202 | }
203 | 
204 | export async function removeUserFromCommunity(
205 |   userId: string,
206 |   communityId: string
207 | ) {
208 |   try {
209 |     connectToDB();
210 | 
211 |     const userIdObject = await User.findOne({ id: userId }, { _id: 1 });
212 |     const communityIdObject = await Community.findOne(
213 |       { id: communityId },
214 |       { _id: 1 }
215 |     );
216 | 
217 |     if (!userIdObject) {
218 |       throw new Error("User not found");
219 |     }
220 | 
221 |     if (!communityIdObject) {
222 |       throw new Error("Community not found");
223 |     }
224 | 
225 |     // Remove the user's _id from the members array in the community
226 |     await Community.updateOne(
227 |       { _id: communityIdObject._id },
228 |       { $pull: { members: userIdObject._id } }
229 |     );
230 | 
231 |     // Remove the community's _id from the communities array in the user
232 |     await User.updateOne(
233 |       { _id: userIdObject._id },
234 |       { $pull: { communities: communityIdObject._id } }
235 |     );
236 | 
237 |     return { success: true };
238 |   } catch (error) {
239 |     // Handle any errors
240 |     console.error("Error removing user from community:", error);
241 |     throw error;
242 |   }
243 | }
244 | 
245 | export async function updateCommunityInfo(
246 |   communityId: string,
247 |   name: string,
248 |   username: string,
249 |   image: string
250 | ) {
251 |   try {
252 |     connectToDB();
253 | 
254 |     // Find the community by its _id and update the information
255 |     const updatedCommunity = await Community.findOneAndUpdate(
256 |       { id: communityId },
257 |       { name, username, image }
258 |     );
259 | 
260 |     if (!updatedCommunity) {
261 |       throw new Error("Community not found");
262 |     }
263 | 
264 |     return updatedCommunity;
265 |   } catch (error) {
266 |     // Handle any errors
267 |     console.error("Error updating community information:", error);
268 |     throw error;
269 |   }
270 | }
271 | 
272 | export async function deleteCommunity(communityId: string) {
273 |   try {
274 |     connectToDB();
275 | 
276 |     // Find the community by its ID and delete it
277 |     const deletedCommunity = await Community.findOneAndDelete({
278 |       id: communityId,
279 |     });
280 | 
281 |     if (!deletedCommunity) {
282 |       throw new Error("Community not found");
283 |     }
284 | 
285 |     // Delete all threads associated with the community
286 |     await Thread.deleteMany({ community: communityId });
287 | 
288 |     // Find all users who are part of the community
289 |     const communityUsers = await User.find({ communities: communityId });
290 | 
291 |     // Remove the community from the 'communities' array for each user
292 |     const updateUserPromises = communityUsers.map((user) => {
293 |       user.communities.pull(communityId);
294 |       return user.save();
295 |     });
296 | 
297 |     await Promise.all(updateUserPromises);
298 | 
299 |     return deletedCommunity;
300 |   } catch (error) {
301 |     console.error("Error deleting community: ", error);
302 |     throw error;
303 |   }
304 | }
305 | 


--------------------------------------------------------------------------------
/lib/actions/thread.actions.ts:
--------------------------------------------------------------------------------
  1 | "use server";
  2 | 
  3 | import { revalidatePath } from "next/cache";
  4 | 
  5 | import { connectToDB } from "../mongoose";
  6 | 
  7 | import User from "../models/user.model";
  8 | import Thread from "../models/thread.model";
  9 | import Community from "../models/community.model";
 10 | 
 11 | export async function fetchPosts(pageNumber = 1, pageSize = 20) {
 12 |   connectToDB();
 13 | 
 14 |   // Calculate the number of posts to skip based on the page number and page size.
 15 |   const skipAmount = (pageNumber - 1) * pageSize;
 16 | 
 17 |   // Create a query to fetch the posts that have no parent (top-level threads) (a thread that is not a comment/reply).
 18 |   const postsQuery = Thread.find({ parentId: { $in: [null, undefined] } })
 19 |     .sort({ createdAt: "desc" })
 20 |     .skip(skipAmount)
 21 |     .limit(pageSize)
 22 |     .populate({
 23 |       path: "author",
 24 |       model: User,
 25 |     })
 26 |     .populate({
 27 |       path: "community",
 28 |       model: Community,
 29 |     })
 30 |     .populate({
 31 |       path: "children", // Populate the children field
 32 |       populate: {
 33 |         path: "author", // Populate the author field within children
 34 |         model: User,
 35 |         select: "_id name parentId image", // Select only _id and username fields of the author
 36 |       },
 37 |     });
 38 | 
 39 |   // Count the total number of top-level posts (threads) i.e., threads that are not comments.
 40 |   const totalPostsCount = await Thread.countDocuments({
 41 |     parentId: { $in: [null, undefined] },
 42 |   }); // Get the total count of posts
 43 | 
 44 |   const posts = await postsQuery.exec();
 45 | 
 46 |   const isNext = totalPostsCount > skipAmount + posts.length;
 47 | 
 48 |   return { posts, isNext };
 49 | }
 50 | 
 51 | interface Params {
 52 |   text: string,
 53 |   author: string,
 54 |   communityId: string | null,
 55 |   path: string,
 56 | }
 57 | 
 58 | export async function createThread({ text, author, communityId, path }: Params
 59 | ) {
 60 |   try {
 61 |     connectToDB();
 62 | 
 63 |     const communityIdObject = await Community.findOne(
 64 |       { id: communityId },
 65 |       { _id: 1 }
 66 |     );
 67 | 
 68 |     const createdThread = await Thread.create({
 69 |       text,
 70 |       author,
 71 |       community: communityIdObject, // Assign communityId if provided, or leave it null for personal account
 72 |     });
 73 | 
 74 |     // Update User model
 75 |     await User.findByIdAndUpdate(author, {
 76 |       $push: { threads: createdThread._id },
 77 |     });
 78 | 
 79 |     if (communityIdObject) {
 80 |       // Update Community model
 81 |       await Community.findByIdAndUpdate(communityIdObject, {
 82 |         $push: { threads: createdThread._id },
 83 |       });
 84 |     }
 85 | 
 86 |     revalidatePath(path);
 87 |   } catch (error: any) {
 88 |     throw new Error(`Failed to create thread: ${error.message}`);
 89 |   }
 90 | }
 91 | 
 92 | async function fetchAllChildThreads(threadId: string): Promise<any[]> {
 93 |   const childThreads = await Thread.find({ parentId: threadId });
 94 | 
 95 |   const descendantThreads = [];
 96 |   for (const childThread of childThreads) {
 97 |     const descendants = await fetchAllChildThreads(childThread._id);
 98 |     descendantThreads.push(childThread, ...descendants);
 99 |   }
100 | 
101 |   return descendantThreads;
102 | }
103 | 
104 | export async function deleteThread(id: string, path: string): Promise<void> {
105 |   try {
106 |     connectToDB();
107 | 
108 |     // Find the thread to be deleted (the main thread)
109 |     const mainThread = await Thread.findById(id).populate("author community");
110 | 
111 |     if (!mainThread) {
112 |       throw new Error("Thread not found");
113 |     }
114 | 
115 |     // Fetch all child threads and their descendants recursively
116 |     const descendantThreads = await fetchAllChildThreads(id);
117 | 
118 |     // Get all descendant thread IDs including the main thread ID and child thread IDs
119 |     const descendantThreadIds = [
120 |       id,
121 |       ...descendantThreads.map((thread) => thread._id),
122 |     ];
123 | 
124 |     // Extract the authorIds and communityIds to update User and Community models respectively
125 |     const uniqueAuthorIds = new Set(
126 |       [
127 |         ...descendantThreads.map((thread) => thread.author?._id?.toString()), // Use optional chaining to handle possible undefined values
128 |         mainThread.author?._id?.toString(),
129 |       ].filter((id) => id !== undefined)
130 |     );
131 | 
132 |     const uniqueCommunityIds = new Set(
133 |       [
134 |         ...descendantThreads.map((thread) => thread.community?._id?.toString()), // Use optional chaining to handle possible undefined values
135 |         mainThread.community?._id?.toString(),
136 |       ].filter((id) => id !== undefined)
137 |     );
138 | 
139 |     // Recursively delete child threads and their descendants
140 |     await Thread.deleteMany({ _id: { $in: descendantThreadIds } });
141 | 
142 |     // Update User model
143 |     await User.updateMany(
144 |       { _id: { $in: Array.from(uniqueAuthorIds) } },
145 |       { $pull: { threads: { $in: descendantThreadIds } } }
146 |     );
147 | 
148 |     // Update Community model
149 |     await Community.updateMany(
150 |       { _id: { $in: Array.from(uniqueCommunityIds) } },
151 |       { $pull: { threads: { $in: descendantThreadIds } } }
152 |     );
153 | 
154 |     revalidatePath(path);
155 |   } catch (error: any) {
156 |     throw new Error(`Failed to delete thread: ${error.message}`);
157 |   }
158 | }
159 | 
160 | export async function fetchThreadById(threadId: string) {
161 |   connectToDB();
162 | 
163 |   try {
164 |     const thread = await Thread.findById(threadId)
165 |       .populate({
166 |         path: "author",
167 |         model: User,
168 |         select: "_id id name image",
169 |       }) // Populate the author field with _id and username
170 |       .populate({
171 |         path: "community",
172 |         model: Community,
173 |         select: "_id id name image",
174 |       }) // Populate the community field with _id and name
175 |       .populate({
176 |         path: "children", // Populate the children field
177 |         populate: [
178 |           {
179 |             path: "author", // Populate the author field within children
180 |             model: User,
181 |             select: "_id id name parentId image", // Select only _id and username fields of the author
182 |           },
183 |           {
184 |             path: "children", // Populate the children field within children
185 |             model: Thread, // The model of the nested children (assuming it's the same "Thread" model)
186 |             populate: {
187 |               path: "author", // Populate the author field within nested children
188 |               model: User,
189 |               select: "_id id name parentId image", // Select only _id and username fields of the author
190 |             },
191 |           },
192 |         ],
193 |       })
194 |       .exec();
195 | 
196 |     return thread;
197 |   } catch (err) {
198 |     console.error("Error while fetching thread:", err);
199 |     throw new Error("Unable to fetch thread");
200 |   }
201 | }
202 | 
203 | export async function addCommentToThread(
204 |   threadId: string,
205 |   commentText: string,
206 |   userId: string,
207 |   path: string
208 | ) {
209 |   connectToDB();
210 | 
211 |   try {
212 |     // Find the original thread by its ID
213 |     const originalThread = await Thread.findById(threadId);
214 | 
215 |     if (!originalThread) {
216 |       throw new Error("Thread not found");
217 |     }
218 | 
219 |     // Create the new comment thread
220 |     const commentThread = new Thread({
221 |       text: commentText,
222 |       author: userId,
223 |       parentId: threadId, // Set the parentId to the original thread's ID
224 |     });
225 | 
226 |     // Save the comment thread to the database
227 |     const savedCommentThread = await commentThread.save();
228 | 
229 |     // Add the comment thread's ID to the original thread's children array
230 |     originalThread.children.push(savedCommentThread._id);
231 | 
232 |     // Save the updated original thread to the database
233 |     await originalThread.save();
234 | 
235 |     revalidatePath(path);
236 |   } catch (err) {
237 |     console.error("Error while adding comment:", err);
238 |     throw new Error("Unable to add comment");
239 |   }
240 | }
241 | 


--------------------------------------------------------------------------------
/lib/actions/user.actions.ts:
--------------------------------------------------------------------------------
  1 | "use server";
  2 | 
  3 | import { FilterQuery, SortOrder } from "mongoose";
  4 | import { revalidatePath } from "next/cache";
  5 | 
  6 | import Community from "../models/community.model";
  7 | import Thread from "../models/thread.model";
  8 | import User from "../models/user.model";
  9 | 
 10 | import { connectToDB } from "../mongoose";
 11 | 
 12 | export async function fetchUser(userId: string) {
 13 |   try {
 14 |     connectToDB();
 15 | 
 16 |     return await User.findOne({ id: userId }).populate({
 17 |       path: "communities",
 18 |       model: Community,
 19 |     });
 20 |   } catch (error: any) {
 21 |     throw new Error(`Failed to fetch user: ${error.message}`);
 22 |   }
 23 | }
 24 | 
 25 | interface Params {
 26 |   userId: string;
 27 |   username: string;
 28 |   name: string;
 29 |   bio: string;
 30 |   image: string;
 31 |   path: string;
 32 | }
 33 | 
 34 | export async function updateUser({
 35 |   userId,
 36 |   bio,
 37 |   name,
 38 |   path,
 39 |   username,
 40 |   image,
 41 | }: Params): Promise<void> {
 42 |   try {
 43 |     connectToDB();
 44 | 
 45 |     await User.findOneAndUpdate(
 46 |       { id: userId },
 47 |       {
 48 |         username: username.toLowerCase(),
 49 |         name,
 50 |         bio,
 51 |         image,
 52 |         onboarded: true,
 53 |       },
 54 |       { upsert: true }
 55 |     );
 56 | 
 57 |     if (path === "/profile/edit") {
 58 |       revalidatePath(path);
 59 |     }
 60 |   } catch (error: any) {
 61 |     throw new Error(`Failed to create/update user: ${error.message}`);
 62 |   }
 63 | }
 64 | 
 65 | export async function fetchUserPosts(userId: string) {
 66 |   try {
 67 |     connectToDB();
 68 | 
 69 |     // Find all threads authored by the user with the given userId
 70 |     const threads = await User.findOne({ id: userId }).populate({
 71 |       path: "threads",
 72 |       model: Thread,
 73 |       populate: [
 74 |         {
 75 |           path: "community",
 76 |           model: Community,
 77 |           select: "name id image _id", // Select the "name" and "_id" fields from the "Community" model
 78 |         },
 79 |         {
 80 |           path: "children",
 81 |           model: Thread,
 82 |           populate: {
 83 |             path: "author",
 84 |             model: User,
 85 |             select: "name image id", // Select the "name" and "_id" fields from the "User" model
 86 |           },
 87 |         },
 88 |       ],
 89 |     });
 90 |     return threads;
 91 |   } catch (error) {
 92 |     console.error("Error fetching user threads:", error);
 93 |     throw error;
 94 |   }
 95 | }
 96 | 
 97 | // Almost similar to Thead (search + pagination) and Community (search + pagination)
 98 | export async function fetchUsers({
 99 |   userId,
100 |   searchString = "",
101 |   pageNumber = 1,
102 |   pageSize = 20,
103 |   sortBy = "desc",
104 | }: {
105 |   userId: string;
106 |   searchString?: string;
107 |   pageNumber?: number;
108 |   pageSize?: number;
109 |   sortBy?: SortOrder;
110 | }) {
111 |   try {
112 |     connectToDB();
113 | 
114 |     // Calculate the number of users to skip based on the page number and page size.
115 |     const skipAmount = (pageNumber - 1) * pageSize;
116 | 
117 |     // Create a case-insensitive regular expression for the provided search string.
118 |     const regex = new RegExp(searchString, "i");
119 | 
120 |     // Create an initial query object to filter users.
121 |     const query: FilterQuery<typeof User> = {
122 |       id: { $ne: userId }, // Exclude the current user from the results.
123 |     };
124 | 
125 |     // If the search string is not empty, add the $or operator to match either username or name fields.
126 |     if (searchString.trim() !== "") {
127 |       query.$or = [
128 |         { username: { $regex: regex } },
129 |         { name: { $regex: regex } },
130 |       ];
131 |     }
132 | 
133 |     // Define the sort options for the fetched users based on createdAt field and provided sort order.
134 |     const sortOptions = { createdAt: sortBy };
135 | 
136 |     const usersQuery = User.find(query)
137 |       .sort(sortOptions)
138 |       .skip(skipAmount)
139 |       .limit(pageSize);
140 | 
141 |     // Count the total number of users that match the search criteria (without pagination).
142 |     const totalUsersCount = await User.countDocuments(query);
143 | 
144 |     const users = await usersQuery.exec();
145 | 
146 |     // Check if there are more users beyond the current page.
147 |     const isNext = totalUsersCount > skipAmount + users.length;
148 | 
149 |     return { users, isNext };
150 |   } catch (error) {
151 |     console.error("Error fetching users:", error);
152 |     throw error;
153 |   }
154 | }
155 | 
156 | export async function getActivity(userId: string) {
157 |   try {
158 |     connectToDB();
159 | 
160 |     // Find all threads created by the user
161 |     const userThreads = await Thread.find({ author: userId });
162 | 
163 |     // Collect all the child thread ids (replies) from the 'children' field of each user thread
164 |     const childThreadIds = userThreads.reduce((acc, userThread) => {
165 |       return acc.concat(userThread.children);
166 |     }, []);
167 | 
168 |     // Find and return the child threads (replies) excluding the ones created by the same user
169 |     const replies = await Thread.find({
170 |       _id: { $in: childThreadIds },
171 |       author: { $ne: userId }, // Exclude threads authored by the same user
172 |     }).populate({
173 |       path: "author",
174 |       model: User,
175 |       select: "name image _id",
176 |     });
177 | 
178 |     return replies;
179 |   } catch (error) {
180 |     console.error("Error fetching replies: ", error);
181 |     throw error;
182 |   }
183 | }
184 | 


--------------------------------------------------------------------------------
/lib/models/community.model.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const communitySchema = new mongoose.Schema({
 4 |   id: {
 5 |     type: String,
 6 |     required: true,
 7 |   },
 8 |   username: {
 9 |     type: String,
10 |     unique: true,
11 |     required: true,
12 |   },
13 |   name: {
14 |     type: String,
15 |     required: true,
16 |   },
17 |   image: String,
18 |   bio: String,
19 |   createdBy: {
20 |     type: mongoose.Schema.Types.ObjectId,
21 |     ref: "User",
22 |   },
23 |   threads: [
24 |     {
25 |       type: mongoose.Schema.Types.ObjectId,
26 |       ref: "Thread",
27 |     },
28 |   ],
29 |   members: [
30 |     {
31 |       type: mongoose.Schema.Types.ObjectId,
32 |       ref: "User",
33 |     },
34 |   ],
35 | });
36 | 
37 | const Community =
38 |   mongoose.models.Community || mongoose.model("Community", communitySchema);
39 | 
40 | export default Community;
41 | 


--------------------------------------------------------------------------------
/lib/models/thread.model.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const threadSchema = new mongoose.Schema({
 4 |   text: {
 5 |     type: String,
 6 |     required: true,
 7 |   },
 8 |   author: {
 9 |     type: mongoose.Schema.Types.ObjectId,
10 |     ref: "User",
11 |     required: true,
12 |   },
13 |   community: {
14 |     type: mongoose.Schema.Types.ObjectId,
15 |     ref: "Community",
16 |   },
17 |   createdAt: {
18 |     type: Date,
19 |     default: Date.now,
20 |   },
21 |   parentId: {
22 |     type: String,
23 |   },
24 |   children: [
25 |     {
26 |       type: mongoose.Schema.Types.ObjectId,
27 |       ref: "Thread",
28 |     },
29 |   ],
30 | });
31 | 
32 | const Thread = mongoose.models.Thread || mongoose.model("Thread", threadSchema);
33 | 
34 | export default Thread;
35 | 


--------------------------------------------------------------------------------
/lib/models/user.model.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | const userSchema = new mongoose.Schema({
 4 |   id: {
 5 |     type: String,
 6 |     required: true,
 7 |   },
 8 |   username: {
 9 |     type: String,
10 |     unique: true,
11 |     required: true,
12 |   },
13 |   name: {
14 |     type: String,
15 |     required: true,
16 |   },
17 |   image: String,
18 |   bio: String,
19 |   threads: [
20 |     {
21 |       type: mongoose.Schema.Types.ObjectId,
22 |       ref: "Thread",
23 |     },
24 |   ],
25 |   onboarded: {
26 |     type: Boolean,
27 |     default: false,
28 |   },
29 |   communities: [
30 |     {
31 |       type: mongoose.Schema.Types.ObjectId,
32 |       ref: "Community",
33 |     },
34 |   ],
35 | });
36 | 
37 | const User = mongoose.models.User || mongoose.model("User", userSchema);
38 | 
39 | export default User;
40 | 


--------------------------------------------------------------------------------
/lib/mongoose.ts:
--------------------------------------------------------------------------------
 1 | import mongoose from "mongoose";
 2 | 
 3 | let isConnected = false; // Variable to track the connection status
 4 | 
 5 | export const connectToDB = async () => {
 6 |   // Set strict query mode for Mongoose to prevent unknown field queries.
 7 |   mongoose.set("strictQuery", true);
 8 | 
 9 |   if (!process.env.MONGODB_URL) return console.log("Missing MongoDB URL");
10 | 
11 |   // If the connection is already established, return without creating a new connection.
12 |   if (isConnected) {
13 |     console.log("MongoDB connection already established");
14 |     return;
15 |   }
16 | 
17 |   try {
18 |     await mongoose.connect(process.env.MONGODB_URL);
19 | 
20 |     isConnected = true; // Set the connection status to true
21 |     console.log("MongoDB connected");
22 |   } catch (error) {
23 |     console.log(error);
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/lib/uploadthing.ts:
--------------------------------------------------------------------------------
 1 | // Resource: https://docs.uploadthing.com/api-reference/react#generatereacthelpers
 2 | // Copy paste (be careful with imports)
 3 | 
 4 | import { generateReactHelpers } from "@uploadthing/react/hooks";
 5 | 
 6 | import type { OurFileRouter } from "@/app/api/uploadthing/core";
 7 | 
 8 | export const { useUploadThing, uploadFiles } =
 9 |   generateReactHelpers<OurFileRouter>();
10 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // generated by shadcn
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | // created by chatgpt
10 | export function isBase64Image(imageData: string) {
11 |   const base64Regex = /^data:image\/(png|jpe?g|gif|webp);base64,/;
12 |   return base64Regex.test(imageData);
13 | }
14 | 
15 | // created by chatgpt
16 | export function formatDateString(dateString: string) {
17 |   const options: Intl.DateTimeFormatOptions = {
18 |     year: "numeric",
19 |     month: "short",
20 |     day: "numeric",
21 |   };
22 | 
23 |   const date = new Date(dateString);
24 |   const formattedDate = date.toLocaleDateString(undefined, options);
25 | 
26 |   const time = date.toLocaleTimeString([], {
27 |     hour: "numeric",
28 |     minute: "2-digit",
29 |   });
30 | 
31 |   return `${time} - ${formattedDate}`;
32 | }
33 | 
34 | // created by chatgpt
35 | export function formatThreadCount(count: number): string {
36 |   if (count === 0) {
37 |     return "No Threads";
38 |   } else {
39 |     const threadCount = count.toString().padStart(2, "0");
40 |     const threadWord = count === 1 ? "Thread" : "Threads";
41 |     return `${threadCount} ${threadWord}`;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/lib/validations/thread.ts:
--------------------------------------------------------------------------------
 1 | import * as z from "zod";
 2 | 
 3 | export const ThreadValidation = z.object({
 4 |   thread: z.string().nonempty().min(3, { message: "Minimum 3 characters." }),
 5 |   accountId: z.string(),
 6 | });
 7 | 
 8 | export const CommentValidation = z.object({
 9 |   thread: z.string().nonempty().min(3, { message: "Minimum 3 characters." }),
10 | });
11 | 


--------------------------------------------------------------------------------
/lib/validations/user.ts:
--------------------------------------------------------------------------------
 1 | import * as z from "zod";
 2 | 
 3 | export const UserValidation = z.object({
 4 |   profile_photo: z.string().url().nonempty(),
 5 |   name: z
 6 |     .string()
 7 |     .min(3, { message: "Minimum 3 characters." })
 8 |     .max(30, { message: "Maximum 30 caracters." }),
 9 |   username: z
10 |     .string()
11 |     .min(3, { message: "Minimum 3 characters." })
12 |     .max(30, { message: "Maximum 30 caracters." }),
13 |   bio: z
14 |     .string()
15 |     .min(3, { message: "Minimum 3 characters." })
16 |     .max(1000, { message: "Maximum 1000 caracters." }),
17 | });
18 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | // Resource: https://clerk.com/docs/nextjs/middleware#auth-middleware
 2 | // Copy the middleware code as it is from the above resource
 3 | 
 4 | import { authMiddleware } from "@clerk/nextjs";
 5 | 
 6 | export default authMiddleware({
 7 |   // An array of public routes that don't require authentication.
 8 |   publicRoutes: ["/api/webhook/clerk"],
 9 | 
10 |   // An array of routes to be ignored by the authentication middleware.
11 |   ignoredRoutes: ["/api/webhook/clerk"],
12 | });
13 | 
14 | export const config = {
15 |   matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
16 | };
17 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   experimental: {
 4 |     serverActions: true,
 5 |     serverComponentsExternalPackages: ["mongoose"],
 6 |   },
 7 |   eslint: {
 8 |     // Warning: This allows production builds to successfully complete even if
 9 |     // your project has ESLint errors.
10 |     ignoreDuringBuilds: true,
11 |   },
12 |   images: {
13 |     remotePatterns: [
14 |       {
15 |         protocol: "https",
16 |         hostname: "img.clerk.com",
17 |       },
18 |       {
19 |         protocol: "https",
20 |         hostname: "images.clerk.dev",
21 |       },
22 |       {
23 |         protocol: "https",
24 |         hostname: "uploadthing.com",
25 |       },
26 |       {
27 |         protocol: "https",
28 |         hostname: "placehold.co",
29 |       },
30 |     ],
31 |   },
32 | };
33 | 
34 | module.exports = nextConfig;
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "threads",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@clerk/nextjs": "^4.21.15",
13 |     "@clerk/themes": "^1.7.5",
14 |     "@hookform/resolvers": "^3.1.1",
15 |     "@radix-ui/react-label": "^2.0.2",
16 |     "@radix-ui/react-menubar": "^1.0.3",
17 |     "@radix-ui/react-select": "^1.2.2",
18 |     "@radix-ui/react-slot": "^1.0.2",
19 |     "@radix-ui/react-tabs": "^1.0.4",
20 |     "@radix-ui/react-toast": "^1.1.4",
21 |     "@types/node": "20.4.2",
22 |     "@types/react": "18.2.15",
23 |     "@types/react-dom": "18.2.7",
24 |     "@uploadthing/react": "^5.2.0",
25 |     "autoprefixer": "10.4.14",
26 |     "class-variance-authority": "^0.6.1",
27 |     "clsx": "^1.2.1",
28 |     "eslint": "8.45.0",
29 |     "eslint-config-next": "13.4.10",
30 |     "eslint-config-prettier": "^8.8.0",
31 |     "eslint-config-standard": "^17.1.0",
32 |     "eslint-plugin-tailwindcss": "^3.13.0",
33 |     "lucide-react": "^0.260.0",
34 |     "micro": "^10.0.1",
35 |     "mongoose": "^7.3.4",
36 |     "next": "13.4.10",
37 |     "postcss": "8.4.26",
38 |     "prettier": "^3.0.0",
39 |     "react": "18.2.0",
40 |     "react-dom": "18.2.0",
41 |     "react-hook-form": "^7.45.1",
42 |     "svix": "^1.7.0",
43 |     "tailwind-merge": "^1.13.2",
44 |     "tailwindcss": "3.3.3",
45 |     "tailwindcss-animate": "^1.0.6",
46 |     "typescript": "5.1.6",
47 |     "uploadthing": "^5.2.0",
48 |     "zod": "^3.21.4"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/assets/community.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C9.37665 1.25 7.25 3.37665 7.25 6C7.25 8.62335 9.37665 10.75 12 10.75C14.6234 10.75 16.75 8.62335 16.75 6C16.75 3.37665 14.6234 1.25 12 1.25ZM8.75 6C8.75 4.20507 10.2051 2.75 12 2.75C13.7949 2.75 15.25 4.20507 15.25 6C15.25 7.79493 13.7949 9.25 12 9.25C10.2051 9.25 8.75 7.79493 8.75 6Z" fill="#EFEFEF"/>
3 | <path d="M18 3.25C17.5858 3.25 17.25 3.58579 17.25 4C17.25 4.41421 17.5858 4.75 18 4.75C19.3765 4.75 20.25 5.65573 20.25 6.5C20.25 7.34427 19.3765 8.25 18 8.25C17.5858 8.25 17.25 8.58579 17.25 9C17.25 9.41421 17.5858 9.75 18 9.75C19.9372 9.75 21.75 8.41715 21.75 6.5C21.75 4.58285 19.9372 3.25 18 3.25Z" fill="#EFEFEF"/>
4 | <path d="M6.75 4C6.75 3.58579 6.41421 3.25 6 3.25C4.06278 3.25 2.25 4.58285 2.25 6.5C2.25 8.41715 4.06278 9.75 6 9.75C6.41421 9.75 6.75 9.41421 6.75 9C6.75 8.58579 6.41421 8.25 6 8.25C4.62351 8.25 3.75 7.34427 3.75 6.5C3.75 5.65573 4.62351 4.75 6 4.75C6.41421 4.75 6.75 4.41421 6.75 4Z" fill="#EFEFEF"/>
5 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.25C10.2157 12.25 8.56645 12.7308 7.34133 13.5475C6.12146 14.3608 5.25 15.5666 5.25 17C5.25 18.4334 6.12146 19.6392 7.34133 20.4525C8.56645 21.2692 10.2157 21.75 12 21.75C13.7843 21.75 15.4335 21.2692 16.6587 20.4525C17.8785 19.6392 18.75 18.4334 18.75 17C18.75 15.5666 17.8785 14.3608 16.6587 13.5475C15.4335 12.7308 13.7843 12.25 12 12.25ZM6.75 17C6.75 16.2242 7.22169 15.4301 8.17338 14.7956C9.11984 14.1646 10.4706 13.75 12 13.75C13.5294 13.75 14.8802 14.1646 15.8266 14.7956C16.7783 15.4301 17.25 16.2242 17.25 17C17.25 17.7758 16.7783 18.5699 15.8266 19.2044C14.8802 19.8354 13.5294 20.25 12 20.25C10.4706 20.25 9.11984 19.8354 8.17338 19.2044C7.22169 18.5699 6.75 17.7758 6.75 17Z" fill="#EFEFEF"/>
6 | <path d="M19.2674 13.8393C19.3561 13.4347 19.7561 13.1787 20.1607 13.2674C21.1225 13.4783 21.9893 13.8593 22.6328 14.3859C23.2758 14.912 23.75 15.6352 23.75 16.5C23.75 17.3648 23.2758 18.088 22.6328 18.6141C21.9893 19.1407 21.1225 19.5217 20.1607 19.7326C19.7561 19.8213 19.3561 19.5653 19.2674 19.1607C19.1787 18.7561 19.4347 18.3561 19.8393 18.2674C20.6317 18.0936 21.2649 17.7952 21.6829 17.4532C22.1014 17.1108 22.25 16.7763 22.25 16.5C22.25 16.2237 22.1014 15.8892 21.6829 15.5468C21.2649 15.2048 20.6317 14.9064 19.8393 14.7326C19.4347 14.6439 19.1787 14.2439 19.2674 13.8393Z" fill="#EFEFEF"/>
7 | <path d="M3.83935 13.2674C4.24395 13.1787 4.64387 13.4347 4.73259 13.8393C4.82132 14.2439 4.56525 14.6439 4.16065 14.7326C3.36829 14.9064 2.73505 15.2048 2.31712 15.5468C1.89863 15.8892 1.75 16.2237 1.75 16.5C1.75 16.7763 1.89863 17.1108 2.31712 17.4532C2.73505 17.7952 3.36829 18.0936 4.16065 18.2674C4.56525 18.3561 4.82132 18.7561 4.73259 19.1607C4.64387 19.5653 4.24395 19.8213 3.83935 19.7326C2.87746 19.5217 2.0107 19.1407 1.36719 18.6141C0.724248 18.088 0.25 17.3648 0.25 16.5C0.25 15.6352 0.724248 14.912 1.36719 14.3859C2.0107 13.8593 2.87746 13.4783 3.83935 13.2674Z" fill="#EFEFEF"/>
8 | </svg>
9 | 


--------------------------------------------------------------------------------
/public/assets/create.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 1.25C18.9142 1.25 19.25 1.58579 19.25 2V4.75H22C22.4142 4.75 22.75 5.08579 22.75 5.5C22.75 5.91421 22.4142 6.25 22 6.25H19.25V9C19.25 9.41421 18.9142 9.75 18.5 9.75C18.0858 9.75 17.75 9.41421 17.75 9V6.25H15C14.5858 6.25 14.25 5.91421 14.25 5.5C14.25 5.08579 14.5858 4.75 15 4.75H17.75V2C17.75 1.58579 18.0858 1.25 18.5 1.25Z" fill="#EFEFEF"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25L11.9426 1.25C9.63423 1.24999 7.82519 1.24998 6.41371 1.43975C4.96897 1.63399 3.82895 2.03933 2.93414 2.93414C2.03933 3.82895 1.63399 4.96897 1.43975 6.41371C1.24998 7.82519 1.24999 9.63423 1.25 11.9426V12.0574C1.24999 14.3658 1.24998 16.1748 1.43975 17.5863C1.63399 19.031 2.03933 20.1711 2.93414 21.0659C3.82895 21.9607 4.96897 22.366 6.41371 22.5603C7.82519 22.75 9.63423 22.75 11.9426 22.75H12.0574C14.3658 22.75 16.1748 22.75 17.5863 22.5603C19.031 22.366 20.1711 21.9607 21.0659 21.0659C21.9607 20.1711 22.366 19.031 22.5603 17.5863C22.75 16.1748 22.75 14.3658 22.75 12.0574V12C22.75 11.5858 22.4142 11.25 22 11.25C21.5858 11.25 21.25 11.5858 21.25 12C21.25 14.3782 21.2484 16.0864 21.0736 17.3864C21.0667 17.4377 21.0596 17.4882 21.0522 17.5378L18.2782 15.0412C16.9788 13.8718 15.0437 13.7553 13.6134 14.7605L13.3152 14.9701C12.8182 15.3193 12.1421 15.2608 11.7125 14.8313L7.42282 10.5415C6.28741 9.40612 4.46613 9.34547 3.25771 10.4028L2.75098 10.8462C2.75552 9.05395 2.78124 7.69302 2.92637 6.61358C3.09825 5.33517 3.42514 4.56445 3.9948 3.9948C4.56445 3.42514 5.33517 3.09825 6.61358 2.92637C7.91356 2.75159 9.62177 2.75 12 2.75C12.4142 2.75 12.75 2.41421 12.75 2C12.75 1.58579 12.4142 1.25 12 1.25ZM2.92637 17.3864C3.09825 18.6648 3.42514 19.4355 3.9948 20.0052C4.56445 20.5749 5.33517 20.9018 6.61358 21.0736C7.91356 21.2484 9.62177 21.25 12 21.25C14.3782 21.25 16.0864 21.2484 17.3864 21.0736C18.6648 20.9018 19.4355 20.5749 20.0052 20.0052C20.2487 19.7617 20.4479 19.4814 20.6096 19.1404C20.5707 19.1166 20.5334 19.089 20.4983 19.0574L17.2747 16.1562C16.4951 15.4545 15.334 15.3846 14.4758 15.9877L14.1776 16.1973C13.0843 16.9657 11.5968 16.8369 10.6519 15.8919L6.36216 11.6022C5.78515 11.0252 4.85958 10.9944 4.24546 11.5317L2.75038 12.8399C2.75296 14.7884 2.77289 16.2448 2.92637 17.3864Z" fill="#EFEFEF"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/assets/delete.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
 2 |   <g clip-path="url(#clip0_1013_92603)">
 3 |     <path d="M15 3.75C15.1989 3.75 15.3897 3.82902 15.5303 3.96967C15.671 4.11032 15.75 4.30109 15.75 4.5C15.75 4.69891 15.671 4.88968 15.5303 5.03033C15.3897 5.17098 15.1989 5.25 15 5.25H14.25L14.2477 5.30325L13.548 15.1065C13.5211 15.4849 13.3517 15.8391 13.0741 16.0977C12.7965 16.3562 12.4311 16.5 12.0518 16.5H5.9475C5.5681 16.5 5.2028 16.3562 4.92516 16.0977C4.64753 15.8391 4.47819 15.4849 4.45125 15.1065L3.7515 5.304C3.75036 5.28602 3.74986 5.26801 3.75 5.25H3C2.80109 5.25 2.61032 5.17098 2.46967 5.03033C2.32902 4.88968 2.25 4.69891 2.25 4.5C2.25 4.30109 2.32902 4.11032 2.46967 3.96967C2.61032 3.82902 2.80109 3.75 3 3.75H15ZM10.5 1.5C10.6989 1.5 10.8897 1.57902 11.0303 1.71967C11.171 1.86032 11.25 2.05109 11.25 2.25C11.25 2.44891 11.171 2.63968 11.0303 2.78033C10.8897 2.92098 10.6989 3 10.5 3H7.5C7.30109 3 7.11032 2.92098 6.96967 2.78033C6.82902 2.63968 6.75 2.44891 6.75 2.25C6.75 2.05109 6.82902 1.86032 6.96967 1.71967C7.11032 1.57902 7.30109 1.5 7.5 1.5H10.5Z" fill="#FF4D4D"/>
 4 |   </g>
 5 |   <defs>
 6 |     <clipPath id="clip0_1013_92603">
 7 |       <rect width="18" height="18" fill="white"/>
 8 |     </clipPath>
 9 |   </defs>
10 | </svg>


--------------------------------------------------------------------------------
/public/assets/edit.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
 2 |   <g clip-path="url(#clip0_993_5978)">
 3 |     <path fill-rule="evenodd" clip-rule="evenodd" d="M7.96191 0.833374L9.00016 0.833374C9.2763 0.833374 9.50016 1.05723 9.50016 1.33337C9.50016 1.60952 9.2763 1.83337 9.00016 1.83337H8.00016C6.41468 1.83337 5.27587 1.83444 4.40921 1.95095C3.55694 2.06554 3.04313 2.28347 2.66336 2.66324C2.28359 3.04301 2.06566 3.55682 1.95108 4.40909C1.83456 5.27574 1.8335 6.41456 1.8335 8.00004C1.8335 9.58552 1.83456 10.7243 1.95108 11.591C2.06566 12.4433 2.28359 12.9571 2.66336 13.3368C3.04313 13.7166 3.55694 13.9345 4.40921 14.0491C5.27587 14.1656 6.41468 14.1667 8.00016 14.1667C9.58564 14.1667 10.7245 14.1656 11.5911 14.0491C12.4434 13.9345 12.9572 13.7166 13.337 13.3368C13.7167 12.9571 13.9347 12.4433 14.0492 11.591C14.1658 10.7243 14.1668 9.58552 14.1668 8.00004V7.00004C14.1668 6.7239 14.3907 6.50004 14.6668 6.50004C14.943 6.50004 15.1668 6.7239 15.1668 7.00004V8.03829C15.1668 9.57722 15.1668 10.7832 15.0403 11.7242C14.9108 12.6874 14.6406 13.4474 14.0441 14.0439C13.4475 14.6405 12.6875 14.9107 11.7244 15.0402C10.7834 15.1667 9.57734 15.1667 8.03841 15.1667H7.96191C6.42298 15.1667 5.21696 15.1667 4.27597 15.0402C3.31281 14.9107 2.55279 14.6405 1.95625 14.0439C1.35971 13.4474 1.08949 12.6874 0.959994 11.7242C0.833481 10.7832 0.833488 9.57722 0.833496 8.03829V7.96179C0.833488 6.42286 0.833481 5.21684 0.959994 4.27584C1.08949 3.31269 1.35971 2.55267 1.95625 1.95613C2.55279 1.35959 3.31281 1.08936 4.27597 0.959872C5.21696 0.833359 6.42298 0.833366 7.96191 0.833374ZM11.1805 1.51732C12.0924 0.605393 13.571 0.605393 14.4829 1.51732C15.3948 2.42924 15.3948 3.90776 14.4829 4.81969L10.0508 9.25175C9.8033 9.49931 9.64825 9.65438 9.47521 9.78934C9.27142 9.9483 9.05091 10.0846 8.81759 10.1958C8.6195 10.2902 8.41146 10.3595 8.07935 10.4702L6.143 11.1156C5.78551 11.2348 5.39137 11.1418 5.1249 10.8753C4.85844 10.6088 4.7654 10.2147 4.88456 9.8572L5.53001 7.92086C5.64069 7.58874 5.71002 7.3807 5.80443 7.18261C5.91562 6.94929 6.0519 6.72878 6.21086 6.52499C6.34582 6.35195 6.5009 6.1969 6.74846 5.94937L11.1805 1.51732ZM13.7758 2.22442C13.2544 1.70302 12.409 1.70302 11.8876 2.22442L11.6365 2.4755C11.6517 2.53941 11.6729 2.61555 11.7023 2.70048C11.7979 2.97586 11.9786 3.33852 12.3202 3.68004C12.6617 4.02156 13.0243 4.20235 13.2997 4.29789C13.3846 4.32735 13.4608 4.34852 13.5247 4.36366L13.7758 4.11258C14.2972 3.59118 14.2972 2.74582 13.7758 2.22442ZM12.7369 5.15143C12.3929 5.0035 11.9923 4.76635 11.6131 4.38714C11.2339 4.00794 10.9967 3.60725 10.8488 3.26328L7.4785 6.63355C7.20082 6.91122 7.09192 7.02134 6.99937 7.14001C6.88508 7.28653 6.7871 7.44508 6.70715 7.61283C6.64241 7.74868 6.59261 7.89533 6.46843 8.26787L6.1805 9.13166L6.86854 9.8197L7.73233 9.53177C8.10487 9.40759 8.25152 9.35779 8.38737 9.29305C8.55513 9.2131 8.71367 9.11512 8.8602 9.00083C8.97886 8.90828 9.08898 8.79938 9.36666 8.5217L12.7369 5.15143Z" fill="#877EFF"/>
 4 |   </g>
 5 |   <defs>
 6 |     <clipPath id="clip0_993_5978">
 7 |       <rect width="16" height="16" fill="white"/>
 8 |     </clipPath>
 9 |   </defs>
10 | </svg>


--------------------------------------------------------------------------------
/public/assets/heart-filled.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path d="M3 9.09918C3 13.3364 6.50224 15.5943 9.06596 17.6154C9.97063 18.3285 10.842 19 11.7133 19C12.5846 19 13.4559 18.3285 14.3606 17.6154C16.9243 15.5943 20.4266 13.3364 20.4266 9.09918C20.4266 4.86196 15.6341 1.85701 11.7133 5.93062C7.79245 1.85701 3 4.86196 3 9.09918Z" fill="#F14D4D"/>
3 | </svg>


--------------------------------------------------------------------------------
/public/assets/heart-gray.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path d="M9.06596 17.6154L8.6945 18.0865V18.0865L9.06596 17.6154ZM11.7133 5.93062L11.281 6.3467C11.3941 6.46422 11.5502 6.53062 11.7133 6.53062C11.8764 6.53062 12.0325 6.46422 12.1456 6.3467L11.7133 5.93062ZM14.3606 17.6154L13.9892 17.1442L14.3606 17.6154ZM9.43741 17.1442C8.11995 16.1056 6.66995 15.0846 5.52021 13.7899C4.39105 12.5184 3.6 11.0305 3.6 9.09918H2.4C2.4 11.405 3.36007 13.1647 4.62296 14.5868C5.86527 15.9856 7.44825 17.1041 8.6945 18.0865L9.43741 17.1442ZM3.6 9.09918C3.6 7.20505 4.67037 5.61387 6.13577 4.94403C7.56333 4.29149 9.47413 4.46944 11.281 6.3467L12.1456 5.51454C10.0316 3.31819 7.58575 2.96182 5.63689 3.85265C3.72585 4.72619 2.4 6.75609 2.4 9.09918H3.6ZM8.6945 18.0865C9.14132 18.4388 9.61758 18.8116 10.0994 19.0932C10.581 19.3746 11.1253 19.6 11.7133 19.6V18.4C11.4299 18.4 11.1029 18.2897 10.7048 18.0571C10.307 17.8246 9.89526 17.5051 9.43741 17.1442L8.6945 18.0865ZM14.7321 18.0865C15.9783 17.1041 17.5613 15.9856 18.8036 14.5868C20.0665 13.1647 21.0266 11.405 21.0266 9.09918H19.8266C19.8266 11.0305 19.0355 12.5184 17.9064 13.7899C16.7566 15.0846 15.3066 16.1056 13.9892 17.1442L14.7321 18.0865ZM21.0266 9.09918C21.0266 6.75609 19.7007 4.72619 17.7897 3.85265C15.8408 2.96182 13.395 3.31819 11.281 5.51454L12.1456 6.3467C13.9524 4.46944 15.8632 4.29149 17.2908 4.94403C18.7562 5.61387 19.8266 7.20505 19.8266 9.09918H21.0266ZM13.9892 17.1442C13.5313 17.5051 13.1196 17.8246 12.7217 18.0571C12.3237 18.2897 11.9966 18.4 11.7133 18.4V19.6C12.3013 19.6 12.8455 19.3746 13.3272 19.0932C13.809 18.8116 14.2852 18.4388 14.7321 18.0865L13.9892 17.1442Z" fill="#5C5C7B"/>
3 | </svg>


--------------------------------------------------------------------------------
/public/assets/heart.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67452 4.01961C3.90169 4.82998 2.60293 6.75746 2.60293 9.05591C2.60293 11.4041 3.56385 13.2141 4.94137 14.7652C6.07672 16.0436 7.45108 17.1032 8.79144 18.1365C9.10979 18.382 9.42622 18.6259 9.73708 18.871C10.2992 19.3141 10.8006 19.703 11.284 19.9855C11.7676 20.268 12.1568 20.3971 12.4877 20.3971C12.8185 20.3971 13.2078 20.268 13.6913 19.9855C14.1747 19.703 14.6761 19.3141 15.2382 18.871C15.5491 18.6259 15.8655 18.382 16.1839 18.1365C17.5242 17.1032 18.8986 16.0436 20.0339 14.7652C21.4115 13.2141 22.3724 11.4041 22.3724 9.05591C22.3724 6.75746 21.0736 4.82998 19.3008 4.01961C17.5785 3.23234 15.2643 3.44083 13.0651 5.72571C12.914 5.88268 12.7055 5.97138 12.4877 5.97138C12.2698 5.97138 12.0613 5.88268 11.9102 5.72571C9.71102 3.44083 7.39683 3.23234 5.67452 4.01961ZM12.4877 4.05661C10.017 1.84609 7.25031 1.53686 5.00814 2.56177C2.64002 3.64424 1 6.15775 1 9.05591C1 11.9044 2.1867 14.0773 3.74284 15.8296C4.98902 17.2328 6.51431 18.4073 7.86142 19.4445C8.16679 19.6796 8.463 19.9077 8.74473 20.1298C9.29212 20.5613 9.87974 21.0214 10.4753 21.3694C11.0705 21.7173 11.7499 22 12.4877 22C13.2254 22 13.9048 21.7173 14.5001 21.3694C15.0956 21.0214 15.6832 20.5613 16.2306 20.1298C16.5123 19.9077 16.8085 19.6796 17.1139 19.4445C18.461 18.4073 19.9863 17.2328 21.2325 15.8296C22.7886 14.0773 23.9753 11.9044 23.9753 9.05591C23.9753 6.15775 22.3353 3.64424 19.9672 2.56177C17.725 1.53686 14.9584 1.84609 12.4877 4.05661Z" fill="#EFEFEF"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/assets/home.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9 17.25C8.58579 17.25 8.25 17.5858 8.25 18C8.25 18.4142 8.58579 18.75 9 18.75H15C15.4142 18.75 15.75 18.4142 15.75 18C15.75 17.5858 15.4142 17.25 15 17.25H9Z" fill="white"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C11.2919 1.25 10.6485 1.45282 9.95055 1.79224C9.27585 2.12035 8.49642 2.60409 7.52286 3.20832L5.45628 4.4909C4.53509 5.06261 3.79744 5.5204 3.2289 5.95581C2.64015 6.40669 2.18795 6.86589 1.86131 7.46263C1.53535 8.05812 1.38857 8.69174 1.31819 9.4407C1.24999 10.1665 1.24999 11.0541 1.25 12.1672V13.7799C1.24999 15.6837 1.24998 17.1866 1.4027 18.3616C1.55937 19.567 1.88856 20.5401 2.63236 21.3094C3.37958 22.0824 4.33046 22.4277 5.50761 22.5914C6.64849 22.75 8.10556 22.75 9.94185 22.75H14.0581C15.8944 22.75 17.3515 22.75 18.4924 22.5914C19.6695 22.4277 20.6204 22.0824 21.3676 21.3094C22.1114 20.5401 22.4406 19.567 22.5973 18.3616C22.75 17.1866 22.75 15.6838 22.75 13.7799V12.1672C22.75 11.0541 22.75 10.1665 22.6818 9.4407C22.6114 8.69174 22.4646 8.05812 22.1387 7.46263C21.8121 6.86589 21.3599 6.40669 20.7711 5.95581C20.2026 5.5204 19.4649 5.06262 18.5437 4.49091L16.4771 3.20831C15.5036 2.60409 14.7241 2.12034 14.0494 1.79224C13.3515 1.45282 12.7081 1.25 12 1.25ZM8.27953 4.50412C9.29529 3.87371 10.0095 3.43153 10.6065 3.1412C11.1882 2.85833 11.6002 2.75 12 2.75C12.3998 2.75 12.8118 2.85833 13.3935 3.14119C13.9905 3.43153 14.7047 3.87371 15.7205 4.50412L17.7205 5.74537C18.6813 6.34169 19.3559 6.76135 19.8591 7.1467C20.3487 7.52164 20.6303 7.83106 20.8229 8.18285C21.0162 8.53589 21.129 8.94865 21.1884 9.58104C21.2492 10.2286 21.25 11.0458 21.25 12.2039V13.725C21.25 15.6959 21.2485 17.1012 21.1098 18.1683C20.9736 19.2163 20.717 19.8244 20.2892 20.2669C19.8649 20.7058 19.2871 20.9664 18.2858 21.1057C17.2602 21.2483 15.9075 21.25 14 21.25H10C8.09247 21.25 6.73983 21.2483 5.71422 21.1057C4.71286 20.9664 4.13514 20.7058 3.71079 20.2669C3.28301 19.8244 3.02642 19.2163 2.89019 18.1683C2.75149 17.1012 2.75 15.6959 2.75 13.725V12.2039C2.75 11.0458 2.75076 10.2286 2.81161 9.58104C2.87103 8.94865 2.98385 8.53589 3.17709 8.18285C3.36965 7.83106 3.65133 7.52164 4.14092 7.1467C4.6441 6.76135 5.31869 6.34169 6.27953 5.74537L8.27953 4.50412Z" fill="white"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/assets/logout.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697L7.46967 9.46967C7.76257 9.17678 8.23744 9.17678 8.53033 9.46967C8.82323 9.76256 8.82323 10.2374 8.53033 10.5303L7.81066 11.25L15 11.25C15.4142 11.25 15.75 11.5858 15.75 12C15.75 12.4142 15.4142 12.75 15 12.75L7.81066 12.75L8.53033 13.4697C8.82323 13.7626 8.82323 14.2374 8.53033 14.5303C8.23744 14.8232 7.76257 14.8232 7.46967 14.5303L5.46967 12.5303Z" fill="#EFEFEF"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M13.9453 1.25H15.0551C16.4227 1.24998 17.525 1.24996 18.392 1.36652C19.2921 1.48754 20.05 1.74643 20.6519 2.34835C21.2538 2.95027 21.5127 3.70814 21.6337 4.60825C21.7503 5.47522 21.7502 6.57754 21.7502 7.94513V16.0549C21.7502 17.4225 21.7503 18.5248 21.6337 19.3918C21.5127 20.2919 21.2538 21.0497 20.6519 21.6517C20.05 22.2536 19.2921 22.5125 18.392 22.6335C17.525 22.75 16.4227 22.75 15.0551 22.75H13.9453C12.5778 22.75 11.4754 22.75 10.6085 22.6335C9.70836 22.5125 8.95048 22.2536 8.34857 21.6517C7.94963 21.2527 7.70068 20.7844 7.54305 20.2498C6.59168 20.2486 5.79906 20.2381 5.15689 20.1518C4.39294 20.0491 3.7306 19.8268 3.20191 19.2981C2.67321 18.7694 2.45093 18.1071 2.34822 17.3431C2.24996 16.6123 2.24998 15.6865 2.25 14.5537V9.44631C2.24998 8.31349 2.24996 7.38774 2.34822 6.65689C2.45093 5.89294 2.67321 5.2306 3.20191 4.7019C3.7306 4.17321 4.39294 3.95093 5.15689 3.84822C5.79906 3.76188 6.59168 3.75142 7.54305 3.75017C7.70068 3.21562 7.94963 2.74729 8.34857 2.34835C8.95048 1.74643 9.70836 1.48754 10.6085 1.36652C11.4754 1.24996 12.5778 1.24998 13.9453 1.25ZM7.25197 17.0042C7.25555 17.6487 7.2662 18.2293 7.30285 18.7491C6.46836 18.7459 5.848 18.7312 5.35676 18.6652C4.75914 18.5848 4.46611 18.441 4.26257 18.2374C4.05903 18.0339 3.91519 17.7409 3.83484 17.1432C3.7516 16.5241 3.75 15.6997 3.75 14.5V9.5C3.75 8.30029 3.7516 7.47595 3.83484 6.85676C3.91519 6.25914 4.05903 5.9661 4.26257 5.76256C4.46611 5.55902 4.75914 5.41519 5.35676 5.33484C5.848 5.2688 6.46836 5.25415 7.30285 5.25091C7.2662 5.77073 7.25555 6.35129 7.25197 6.99583C7.24966 7.41003 7.58357 7.74768 7.99778 7.74999C8.41199 7.7523 8.74964 7.41838 8.75194 7.00418C8.75803 5.91068 8.78643 5.1356 8.89448 4.54735C8.9986 3.98054 9.16577 3.65246 9.40923 3.40901C9.68599 3.13225 10.0746 2.9518 10.8083 2.85315C11.5637 2.75159 12.5648 2.75 14.0002 2.75H15.0002C16.4356 2.75 17.4367 2.75159 18.1921 2.85315C18.9259 2.9518 19.3144 3.13225 19.5912 3.40901C19.868 3.68577 20.0484 4.07435 20.1471 4.80812C20.2486 5.56347 20.2502 6.56459 20.2502 8V16C20.2502 17.4354 20.2486 18.4365 20.1471 19.1919C20.0484 19.9257 19.868 20.3142 19.5912 20.591C19.3144 20.8678 18.9259 21.0482 18.1921 21.1469C17.4367 21.2484 16.4356 21.25 15.0002 21.25H14.0002C12.5648 21.25 11.5637 21.2484 10.8083 21.1469C10.0746 21.0482 9.68599 20.8678 9.40923 20.591C9.16577 20.3475 8.9986 20.0195 8.89448 19.4527C8.78643 18.8644 8.75803 18.0893 8.75194 16.9958C8.74964 16.5816 8.41199 16.2477 7.99778 16.25C7.58357 16.2523 7.24966 16.59 7.25197 17.0042Z" fill="#EFEFEF"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/assets/members.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
2 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M7.50033 1.04169C5.3142 1.04169 3.54199 2.81389 3.54199 5.00002C3.54199 7.18615 5.3142 8.95835 7.50033 8.95835C9.68645 8.95835 11.4587 7.18615 11.4587 5.00002C11.4587 2.81389 9.68645 1.04169 7.50033 1.04169ZM4.79199 5.00002C4.79199 3.50425 6.00455 2.29169 7.50033 2.29169C8.9961 2.29169 10.2087 3.50425 10.2087 5.00002C10.2087 6.49579 8.9961 7.70835 7.50033 7.70835C6.00455 7.70835 4.79199 6.49579 4.79199 5.00002Z" fill="#5C5C7B"/>
3 |   <path d="M12.5003 1.87502C12.1551 1.87502 11.8753 2.15484 11.8753 2.50002C11.8753 2.8452 12.1551 3.12502 12.5003 3.12502C13.5359 3.12502 14.3753 3.96449 14.3753 5.00002C14.3753 6.03555 13.5359 6.87502 12.5003 6.87502C12.1551 6.87502 11.8753 7.15484 11.8753 7.50002C11.8753 7.8452 12.1551 8.12502 12.5003 8.12502C14.2262 8.12502 15.6253 6.72591 15.6253 5.00002C15.6253 3.27413 14.2262 1.87502 12.5003 1.87502Z" fill="#5C5C7B"/>
4 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M3.06545 11.267C4.23159 10.6006 5.80088 10.2084 7.50033 10.2084C9.19977 10.2084 10.7691 10.6006 11.9352 11.267C13.0837 11.9233 13.9587 12.9251 13.9587 14.1667C13.9587 15.4082 13.0837 16.4101 11.9352 17.0664C10.7691 17.7327 9.19977 18.125 7.50033 18.125C5.80088 18.125 4.23159 17.7327 3.06545 17.0664C1.91699 16.4101 1.04199 15.4082 1.04199 14.1667C1.04199 12.9251 1.91699 11.9233 3.06545 11.267ZM3.68562 12.3523C2.72283 12.9025 2.29199 13.5673 2.29199 14.1667C2.29199 14.7661 2.72283 15.4309 3.68562 15.9811C4.63073 16.5211 5.97811 16.875 7.50033 16.875C9.02254 16.875 10.3699 16.5211 11.315 15.9811C12.2778 15.4309 12.7087 14.7661 12.7087 14.1667C12.7087 13.5673 12.2778 12.9025 11.315 12.3523C10.3699 11.8123 9.02254 11.4584 7.50033 11.4584C5.97811 11.4584 4.63073 11.8123 3.68562 12.3523Z" fill="#5C5C7B"/>
5 |   <path d="M15.1342 11.0562C14.797 10.9823 14.4638 11.1956 14.3898 11.5328C14.3159 11.87 14.5293 12.2032 14.8664 12.2772C15.5268 12.422 16.0545 12.6707 16.4027 12.9557C16.7515 13.2411 16.8753 13.5198 16.8753 13.75C16.8753 13.9589 16.7748 14.2042 16.4977 14.4616C16.2187 14.7209 15.7899 14.9604 15.2368 15.1269C14.9063 15.2264 14.719 15.5751 14.8185 15.9056C14.9181 16.2361 15.2667 16.4234 15.5972 16.3238C16.2827 16.1174 16.8955 15.7982 17.3485 15.3774C17.8034 14.9548 18.1253 14.3989 18.1253 13.75C18.1253 13.0294 17.7301 12.4267 17.1943 11.9883C16.6581 11.5495 15.9358 11.232 15.1342 11.0562Z" fill="#5C5C7B"/>
6 | </svg>


--------------------------------------------------------------------------------
/public/assets/more.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path d="M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z" stroke="#5C5C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
3 |   <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#5C5C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
4 |   <path d="M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z" stroke="#5C5C7B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
5 | </svg>


--------------------------------------------------------------------------------
/public/assets/profile.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M16 6.75C15.3096 6.75 14.75 7.30964 14.75 8C14.75 8.69036 15.3096 9.25 16 9.25C16.6904 9.25 17.25 8.69036 17.25 8C17.25 7.30964 16.6904 6.75 16 6.75ZM13.25 8C13.25 6.48122 14.4812 5.25 16 5.25C17.5188 5.25 18.75 6.48122 18.75 8C18.75 9.51878 17.5188 10.75 16 10.75C14.4812 10.75 13.25 9.51878 13.25 8Z" fill="#697C89"/>
3 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9426 1.25H12.0574C14.3658 1.24999 16.1748 1.24998 17.5863 1.43975C19.031 1.63399 20.1711 2.03933 21.0659 2.93414C21.9607 3.82895 22.366 4.96897 22.5603 6.41371C22.75 7.82519 22.75 9.63423 22.75 11.9426V12.0574C22.75 14.3658 22.75 16.1748 22.5603 17.5863C22.366 19.031 21.9607 20.1711 21.0659 21.0659C20.1711 21.9607 19.031 22.366 17.5863 22.5603C16.1748 22.75 14.3658 22.75 12.0574 22.75H11.9426C9.63423 22.75 7.82519 22.75 6.41371 22.5603C4.96897 22.366 3.82895 21.9607 2.93414 21.0659C2.03933 20.1711 1.63399 19.031 1.43975 17.5863C1.24998 16.1748 1.24999 14.3658 1.25 12.0574V11.9426C1.24999 9.63423 1.24998 7.82519 1.43975 6.41371C1.63399 4.96897 2.03933 3.82895 2.93414 2.93414C3.82895 2.03933 4.96897 1.63399 6.41371 1.43975C7.82519 1.24998 9.63423 1.24999 11.9426 1.25ZM3.9948 20.0052C3.42514 19.4355 3.09825 18.6648 2.92637 17.3864C2.77289 16.2449 2.75296 14.7885 2.75038 12.8401L4.24546 11.5319C4.85958 10.9946 5.78515 11.0254 6.36216 11.6024L10.6519 15.8922C11.5968 16.8371 13.0843 16.9659 14.1776 16.1975L14.4758 15.988C15.334 15.3849 16.4951 15.4547 17.2747 16.1564L20.4983 19.0576C20.5334 19.0892 20.5706 19.1168 20.6095 19.1406C20.4478 19.4815 20.2487 19.7617 20.0052 20.0052C19.4355 20.5749 18.6648 20.9018 17.3864 21.0736C16.0864 21.2484 14.3782 21.25 12 21.25C9.62177 21.25 7.91356 21.2484 6.61358 21.0736C5.33517 20.9018 4.56445 20.5749 3.9948 20.0052ZM6.61358 2.92637C5.33517 3.09825 4.56445 3.42514 3.9948 3.9948C3.42514 4.56445 3.09825 5.33517 2.92637 6.61358C2.78124 7.69307 2.75552 9.05407 2.75098 10.8465L3.25771 10.4031C4.46613 9.34572 6.28741 9.40636 7.42282 10.5418L11.7125 14.8315C12.1421 15.261 12.8182 15.3196 13.3152 14.9703L13.6134 14.7607C15.0437 13.7555 16.9788 13.872 18.2782 15.0415L21.0522 17.5381C21.0596 17.4883 21.0667 17.4378 21.0736 17.3864C21.2484 16.0864 21.25 14.3782 21.25 12C21.25 9.62177 21.2484 7.91356 21.0736 6.61358C20.9018 5.33517 20.5749 4.56445 20.0052 3.9948C19.4355 3.42514 18.6648 3.09825 17.3864 2.92637C16.0864 2.75159 14.3782 2.75 12 2.75C9.62177 2.75 7.91356 2.75159 6.61358 2.92637Z" fill="#697C89"/>
4 | </svg>


--------------------------------------------------------------------------------
/public/assets/reply.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path d="M9.76744 12C9.76744 12.411 9.43426 12.7442 9.02326 12.7442C8.61225 12.7442 8.27907 12.411 8.27907 12C8.27907 11.589 8.61225 11.2558 9.02326 11.2558C9.43426 11.2558 9.76744 11.589 9.76744 12Z" fill="#5C5C7B"/>
3 |   <path d="M12.7442 12C12.7442 12.411 12.411 12.7442 12 12.7442C11.589 12.7442 11.2558 12.411 11.2558 12C11.2558 11.589 11.589 11.2558 12 11.2558C12.411 11.2558 12.7442 11.589 12.7442 12Z" fill="#5C5C7B"/>
4 |   <path d="M15.7209 12C15.7209 12.411 15.3877 12.7442 14.9767 12.7442C14.5657 12.7442 14.2326 12.411 14.2326 12C14.2326 11.589 14.5657 11.2558 14.9767 11.2558C15.3877 11.2558 15.7209 11.589 15.7209 12Z" fill="#5C5C7B"/>
5 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 13.2787 4.30043 14.4889 4.83507 15.5623C4.91485 15.7225 4.93178 15.886 4.89496 16.0236L4.45172 17.6802C4.1483 18.8142 5.18576 19.8517 6.31978 19.5483L7.97637 19.105C8.11396 19.0682 8.27751 19.0851 8.43769 19.1649C9.51109 19.6996 10.7213 20 12 20C16.4183 20 20 16.4183 20 12ZM12 5.11628C15.8018 5.11628 18.8837 8.19823 18.8837 12C18.8837 15.8018 15.8018 18.8837 12 18.8837C10.8978 18.8837 9.85764 18.6251 8.93537 18.1657C8.56521 17.9814 8.12259 17.9104 7.68784 18.0267L6.03125 18.4699C5.727 18.5513 5.44866 18.273 5.53006 17.9687L5.97331 16.3122C6.08963 15.8774 6.01864 15.4348 5.83427 15.0646C5.3749 14.1424 5.11628 13.1022 5.11628 12C5.11628 8.19823 8.19823 5.11628 12 5.11628Z" fill="#5C5C7B"/>
6 | </svg>


--------------------------------------------------------------------------------
/public/assets/repost.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5556 4.89609C14.567 4.90625 14.5784 4.91643 14.5899 4.92664L18.1581 8.09832C18.8238 8.69009 19.3758 9.18066 19.7547 9.62599C20.153 10.094 20.4366 10.5979 20.4366 11.2215C20.4366 11.8451 20.153 12.349 19.7547 12.817C19.3758 13.2623 18.8238 13.7529 18.1581 14.3447L14.5899 17.5164C14.5784 17.5266 14.567 17.5368 14.5555 17.5469C14.2671 17.8034 13.998 18.0427 13.7654 18.1962C13.5371 18.347 13.1218 18.566 12.6567 18.3571C12.1915 18.1482 12.0793 17.6924 12.0403 17.4215C12.0006 17.1457 12.0006 16.7855 12.0007 16.3996C12.0007 16.3843 12.0007 16.369 12.0007 16.3536V14.9593C10.7103 15.0482 9.40279 15.3909 8.25905 15.9482C6.91409 16.6035 5.83997 17.5328 5.25704 18.6431C5.11445 18.9147 4.80495 19.054 4.50713 18.9806C4.2093 18.9071 4 18.64 4 18.3332C4 14.1364 5.22799 11.4038 6.98381 9.72381C8.51425 8.25947 10.3795 7.65859 12.0007 7.53284V6.08937C12.0007 6.07401 12.0007 6.05868 12.0007 6.0434C12.0006 5.65747 12.0006 5.29728 12.0403 5.02148C12.0793 4.75064 12.1915 4.29479 12.6567 4.08589C13.1218 3.877 13.5371 4.09601 13.7654 4.24678C13.998 4.40031 14.2671 4.63965 14.5556 4.89609ZM13.3369 5.60055C13.4374 5.68668 13.5574 5.79292 13.704 5.92327L17.2352 9.06213C17.9474 9.69515 18.4279 10.1243 18.7392 10.4902C19.0381 10.8415 19.1031 11.0466 19.1031 11.2215C19.1031 11.3964 19.0381 11.6015 18.7392 11.9528C18.4279 12.3187 17.9474 12.7478 17.2352 13.3809L13.704 16.5197C13.5574 16.6501 13.4374 16.7563 13.3369 16.8425C13.3345 16.7101 13.3341 16.5498 13.3341 16.3536V14.2694C13.3341 13.9012 13.0356 13.6027 12.6674 13.6027C10.9672 13.6027 9.2004 14.0062 7.67496 14.7495C6.85816 15.1475 6.09778 15.6495 5.4525 16.2502C5.78032 13.5415 6.74905 11.7939 7.90566 10.6873C9.34583 9.30931 11.1654 8.84035 12.6674 8.84035C13.0356 8.84035 13.3341 8.54184 13.3341 8.17362V6.08937C13.3341 5.89318 13.3345 5.7329 13.3369 5.60055Z" fill="#5C5C7B"/>
3 | </svg>


--------------------------------------------------------------------------------
/public/assets/request.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
2 |   <path d="M15.7974 1.3451C15.975 1.04911 16.3589 0.953134 16.6549 1.13073L16.3333 1.66666C16.6549 1.13073 16.6546 1.13056 16.6549 1.13073L16.656 1.13142L16.6574 1.13221L16.6604 1.13409L16.6684 1.13902C16.6746 1.14284 16.6823 1.1477 16.6914 1.15363C16.7098 1.16549 16.734 1.18164 16.7634 1.20217C16.822 1.24318 16.9011 1.30193 16.9939 1.37923C17.179 1.53347 17.421 1.76388 17.6621 2.07726C18.1478 2.7087 18.625 3.67278 18.625 4.99999C18.625 6.3272 18.1478 7.29128 17.6621 7.92273C17.421 8.2361 17.179 8.46652 16.9939 8.62076C16.9011 8.69805 16.822 8.7568 16.7634 8.79782C16.734 8.81835 16.7098 8.83449 16.6914 8.84635C16.6823 8.85228 16.6746 8.85715 16.6684 8.86096L16.6604 8.86589L16.6574 8.86777L16.656 8.86856C16.6558 8.86873 16.6549 8.86926 16.3333 8.33333L16.6549 8.86926C16.3589 9.04685 15.975 8.95087 15.7974 8.65489C15.6206 8.36015 15.715 7.97822 16.008 7.79965L16.0127 7.7967C16.0187 7.79277 16.0303 7.78515 16.0465 7.77378C16.0791 7.75099 16.1301 7.71339 16.1936 7.66048C16.321 7.5543 16.4957 7.38888 16.6713 7.16059C17.0189 6.7087 17.375 6.00612 17.375 4.99999C17.375 3.99387 17.0189 3.29128 16.6713 2.8394C16.4957 2.6111 16.321 2.44568 16.1936 2.33951C16.1301 2.28659 16.0791 2.24899 16.0465 2.22621C16.0303 2.21483 16.0187 2.20721 16.0127 2.20328L16.0081 2.20034C15.715 2.02177 15.6206 1.63984 15.7974 1.3451Z" fill="#5C5C7B"/>
3 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M8.83333 1.04166C6.64721 1.04166 4.875 2.81387 4.875 4.99999C4.875 7.18612 6.64721 8.95833 8.83333 8.95833C11.0195 8.95833 12.7917 7.18612 12.7917 4.99999C12.7917 2.81387 11.0195 1.04166 8.83333 1.04166ZM6.125 4.99999C6.125 3.50422 7.33756 2.29166 8.83333 2.29166C10.3291 2.29166 11.5417 3.50422 11.5417 4.99999C11.5417 6.49576 10.3291 7.70833 8.83333 7.70833C7.33756 7.70833 6.125 6.49576 6.125 4.99999Z" fill="#5C5C7B"/>
4 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M8.83333 10.2083C7.13389 10.2083 5.5646 10.6006 4.39846 11.267C3.25 11.9232 2.375 12.9251 2.375 14.1667C2.375 15.4082 3.25 16.4101 4.39846 17.0663C5.5646 17.7327 7.13389 18.125 8.83333 18.125C10.5328 18.125 12.1021 17.7327 13.2682 17.0663C14.4167 16.4101 15.2917 15.4082 15.2917 14.1667C15.2917 12.9251 14.4167 11.9232 13.2682 11.267C12.1021 10.6006 10.5328 10.2083 8.83333 10.2083ZM3.625 14.1667C3.625 13.5673 4.05584 12.9025 5.01863 12.3523C5.96374 11.8122 7.31112 11.4583 8.83333 11.4583C10.3555 11.4583 11.7029 11.8122 12.648 12.3523C13.6108 12.9025 14.0417 13.5673 14.0417 14.1667C14.0417 14.7661 13.6108 15.4309 12.648 15.981C11.7029 16.5211 10.3555 16.875 8.83333 16.875C7.31112 16.875 5.96374 16.5211 5.01863 15.981C4.05584 15.4309 3.625 14.7661 3.625 14.1667Z" fill="#5C5C7B"/>
5 |   <path d="M14.9882 2.79739C14.6922 2.6198 14.3083 2.71578 14.1307 3.01177L14.3376 3.86468L14.3441 3.86911C14.3538 3.87594 14.3723 3.88946 14.3968 3.90982C14.446 3.95089 14.5165 4.01735 14.5879 4.11023C14.7272 4.29128 14.875 4.5772 14.875 4.99999C14.875 5.42278 14.7272 5.7087 14.5879 5.88976C14.5165 5.98263 14.446 6.04909 14.3968 6.09017C14.3723 6.11053 14.3538 6.12404 14.3441 6.13088L14.3376 6.13531C14.0475 6.31485 13.9547 6.69475 14.1307 6.98822C14.3083 7.28421 14.6922 7.38019 14.9882 7.20259L14.6667 6.66666C14.9882 7.20259 14.988 7.20276 14.9882 7.20259L14.9893 7.20192L14.9905 7.2012L14.9932 7.19959L14.9994 7.19576L15.0154 7.18559C15.0276 7.17767 15.043 7.16747 15.0609 7.15492C15.0967 7.12985 15.1433 7.09519 15.197 7.05044C15.304 6.96131 15.4418 6.82985 15.5787 6.6519C15.8561 6.29128 16.125 5.74387 16.125 4.99999C16.125 4.25611 15.8561 3.7087 15.5787 3.34809C15.4418 3.17013 15.304 3.03868 15.197 2.94954C15.1433 2.9048 15.0967 2.87014 15.0609 2.84507C15.043 2.83252 15.0276 2.82231 15.0154 2.8144L14.9994 2.80422L14.9932 2.80039L14.9905 2.79879L14.9893 2.79807C14.9891 2.7979 14.9882 2.79739 14.6667 3.33333L14.9882 2.79739Z" fill="#5C5C7B"/>
6 | </svg>


--------------------------------------------------------------------------------
/public/assets/search-gray.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.75C6.66751 2.75 2.75 6.66751 2.75 11.5C2.75 16.3325 6.66751 20.25 11.5 20.25C16.3325 20.25 20.25 16.3325 20.25 11.5C20.25 6.66751 16.3325 2.75 11.5 2.75ZM1.25 11.5C1.25 5.83908 5.83908 1.25 11.5 1.25C17.1609 1.25 21.75 5.83908 21.75 11.5C21.75 14.0605 20.8111 16.4017 19.2589 18.1982L22.5303 21.4697C22.8232 21.7626 22.8232 22.2374 22.5303 22.5303C22.2374 22.8232 21.7626 22.8232 21.4697 22.5303L18.1982 19.2589C16.4017 20.8111 14.0605 21.75 11.5 21.75C5.83908 21.75 1.25 17.1609 1.25 11.5Z" fill="#5C5C7B"/>
3 | </svg>


--------------------------------------------------------------------------------
/public/assets/search.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 2.75C6.66751 2.75 2.75 6.66751 2.75 11.5C2.75 16.3325 6.66751 20.25 11.5 20.25C16.3325 20.25 20.25 16.3325 20.25 11.5C20.25 6.66751 16.3325 2.75 11.5 2.75ZM1.25 11.5C1.25 5.83908 5.83908 1.25 11.5 1.25C17.1609 1.25 21.75 5.83908 21.75 11.5C21.75 14.0605 20.8111 16.4017 19.2589 18.1982L22.5303 21.4697C22.8232 21.7626 22.8232 22.2374 22.5303 22.5303C22.2374 22.8232 21.7626 22.8232 21.4697 22.5303L18.1982 19.2589C16.4017 20.8111 14.0605 21.75 11.5 21.75C5.83908 21.75 1.25 17.1609 1.25 11.5Z" fill="#EFEFEF"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/public/assets/share.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 |   <path fill-rule="evenodd" clip-rule="evenodd" d="M17.2455 5.16488C16.4098 5.31354 15.2831 5.68758 13.7019 6.21465L10.1224 7.40781C8.85099 7.83163 7.93007 8.13906 7.27962 8.41571C6.59957 8.70495 6.35765 8.90656 6.27908 9.04171C6.03708 9.45799 6.03708 9.97211 6.27908 10.3884C6.35765 10.5235 6.59957 10.7251 7.27961 11.0144C7.93007 11.291 8.85099 11.5985 10.1224 12.0223C10.1425 12.029 10.1623 12.0356 10.1819 12.0421C10.5292 12.1576 10.7992 12.2474 11.0314 12.4029C11.2551 12.5527 11.4473 12.7449 11.5971 12.9686C11.7526 13.2008 11.8424 13.4708 11.9579 13.8181C11.9644 13.8377 11.971 13.8575 11.9777 13.8776C12.4015 15.149 12.709 16.0699 12.9856 16.7204C13.2749 17.4004 13.4765 17.6423 13.6116 17.7209C14.0279 17.9629 14.542 17.9629 14.9583 17.7209C15.0934 17.6423 15.295 17.4004 15.5843 16.7204C15.8609 16.0699 16.1684 15.149 16.5922 13.8776L17.7853 10.2981C18.3124 8.71688 18.6865 7.59019 18.8351 6.75449C18.9845 5.91482 18.8703 5.55814 18.6561 5.3439C18.4419 5.12966 18.0852 5.01551 17.2455 5.16488ZM17.0533 4.08426C17.9834 3.9188 18.8211 3.95672 19.4322 4.56779C20.0433 5.17886 20.0812 6.01659 19.9157 6.94673C19.7513 7.87125 19.3502 9.07439 18.8424 10.5976L17.6246 14.251C17.2115 15.4906 16.8904 16.4538 16.5943 17.15C16.3087 17.8215 15.9916 18.3898 15.5099 18.6698C14.7526 19.1101 13.8173 19.1101 13.06 18.6698C12.5783 18.3898 12.2612 17.8215 11.9756 17.15C11.6795 16.4538 11.3585 15.4907 10.9453 14.2511L10.9365 14.2247C10.7917 13.7904 10.7476 13.6726 10.6851 13.5792C10.6151 13.4747 10.5253 13.3849 10.4208 13.3149C10.3274 13.2524 10.2096 13.2083 9.77535 13.0635L9.7489 13.0547C8.50933 12.6415 7.54616 12.3205 6.85003 12.0244C6.17855 11.7388 5.61022 11.4217 5.3302 10.94C4.88993 10.1827 4.88993 9.24739 5.3302 8.49008C5.61022 8.0084 6.17855 7.69129 6.85003 7.40569C7.54617 7.10961 8.50935 6.78855 9.74894 6.37536L13.4024 5.15755C14.9256 4.64979 16.1288 4.24873 17.0533 4.08426ZM16.9148 7.08951C17.1279 7.30501 17.126 7.65248 16.9105 7.86561L13.9836 10.7602C13.7681 10.9734 13.4206 10.9714 13.2075 10.7559C12.9944 10.5404 12.9963 10.193 13.2118 9.97983L16.1387 7.08521C16.3542 6.87209 16.7017 6.87401 16.9148 7.08951Z" fill="#5C5C7B"/>
3 | </svg>


--------------------------------------------------------------------------------
/public/assets/tag.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
2 |   <path d="M4.44024 13.4474C3.1523 12.1595 2.50832 11.5155 2.2687 10.68C2.02908 9.84449 2.23387 8.9571 2.64343 7.18231L2.87962 6.15883C3.22419 4.66569 3.39648 3.91912 3.90771 3.40789C4.41894 2.89666 5.16551 2.72437 6.65865 2.3798L7.68213 2.14361C9.45692 1.73405 10.3443 1.52927 11.1798 1.76889C12.0153 2.00851 12.6593 2.65248 13.9472 3.94042L15.4719 5.46512C17.7128 7.70594 18.8332 8.82635 18.8332 10.2186C18.8332 11.6109 17.7128 12.7313 15.4719 14.9721C13.2311 17.2129 12.1107 18.3334 10.7184 18.3334C9.32617 18.3334 8.20576 17.2129 5.96494 14.9721L4.44024 13.4474Z" stroke="#5C5C7B" stroke-width="1.5"/>
3 |   <circle cx="7.67245" cy="7.39917" r="1.66667" transform="rotate(-45 7.67245 7.39917)" stroke="#5C5C7B" stroke-width="1.5"/>
4 |   <path d="M10.1184 15.4164L15.9342 9.6004" stroke="#5C5C7B" stroke-width="1.5" stroke-linecap="round"/>
5 | </svg>


--------------------------------------------------------------------------------
/public/assets/user.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C9.37666 1.25 7.25001 3.37665 7.25001 6C7.25001 8.62335 9.37666 10.75 12 10.75C14.6234 10.75 16.75 8.62335 16.75 6C16.75 3.37665 14.6234 1.25 12 1.25ZM8.75001 6C8.75001 4.20507 10.2051 2.75 12 2.75C13.7949 2.75 15.25 4.20507 15.25 6C15.25 7.79493 13.7949 9.25 12 9.25C10.2051 9.25 8.75001 7.79493 8.75001 6Z" fill="#EFEFEF"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M12 12.25C9.68646 12.25 7.55494 12.7759 5.97546 13.6643C4.4195 14.5396 3.25001 15.8661 3.25001 17.5L3.24995 17.602C3.24882 18.7638 3.2474 20.222 4.52642 21.2635C5.15589 21.7761 6.03649 22.1406 7.22622 22.3815C8.41927 22.6229 9.97424 22.75 12 22.75C14.0258 22.75 15.5808 22.6229 16.7738 22.3815C17.9635 22.1406 18.8441 21.7761 19.4736 21.2635C20.7526 20.222 20.7512 18.7638 20.7501 17.602L20.75 17.5C20.75 15.8661 19.5805 14.5396 18.0246 13.6643C16.4451 12.7759 14.3136 12.25 12 12.25ZM4.75001 17.5C4.75001 16.6487 5.37139 15.7251 6.71085 14.9717C8.02681 14.2315 9.89529 13.75 12 13.75C14.1047 13.75 15.9732 14.2315 17.2892 14.9717C18.6286 15.7251 19.25 16.6487 19.25 17.5C19.25 18.8078 19.2097 19.544 18.5264 20.1004C18.1559 20.4022 17.5365 20.6967 16.4762 20.9113C15.4193 21.1252 13.9742 21.25 12 21.25C10.0258 21.25 8.58075 21.1252 7.5238 20.9113C6.46354 20.6967 5.84413 20.4022 5.4736 20.1004C4.79033 19.544 4.75001 18.8078 4.75001 17.5Z" fill="#EFEFEF"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M27.8333 15C27.8333 22.0877 22.0877 27.8333 15 27.8333C7.91234 27.8333 2.16666 22.0877 2.16666 15C2.16666 7.91234 7.91234 2.16666 15 2.16666C22.0877 2.16666 27.8333 7.91234 27.8333 15ZM30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15ZM23.2759 8.27591C23.2759 9.1329 22.5812 9.82763 21.7242 9.82763C20.8672 9.82763 20.1725 9.1329 20.1725 8.27591C20.1725 7.41891 20.8672 6.72418 21.7242 6.72418C22.5812 6.72418 23.2759 7.41891 23.2759 8.27591ZM15.1642 12.8396L15.3542 10.3423L15.5185 8.18184C14.7802 8.12567 14.0418 8.19007 13.3314 8.36882C12.7443 8.51654 12.1763 8.74235 11.6432 9.04275C10.4649 9.70664 9.51004 10.705 8.89922 11.9116C8.2884 13.1182 8.04909 14.4788 8.21156 15.8214C8.37403 17.164 8.93098 18.4283 9.81197 19.4544C10.693 20.4805 11.8585 21.2222 13.161 21.5859C14.4636 21.9496 15.8448 21.9189 17.1299 21.4976C18.415 21.0763 19.5463 20.2834 20.3808 19.2192C20.7584 18.7376 21.0675 18.2103 21.3023 17.6523C21.5864 16.9774 21.7617 16.2576 21.8179 15.5196L21.818 15.5186L19.6576 15.3543L17.1603 15.1643L14.9999 15L15.1642 12.8396ZM18.9619 17.4743L14.8355 17.1604L12.6751 16.996L12.8395 14.8356L13.1534 10.7092C13.0012 10.7747 12.8521 10.8485 12.7068 10.9304C11.9019 11.3839 11.2496 12.0659 10.8323 12.8902C10.415 13.7145 10.2515 14.644 10.3625 15.5611C10.4735 16.4783 10.854 17.342 11.4558 18.0429C12.0577 18.7439 12.8539 19.2506 13.7437 19.4991C14.6335 19.7475 15.5771 19.7265 16.455 19.4387C17.3329 19.151 18.1057 18.6093 18.6758 17.8823C18.7787 17.751 18.8742 17.6148 18.9619 17.4743Z" fill="url(#paint0_linear_883_4378)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear_883_4378" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse">
 5 | <stop stop-color="#DD7EFF"/>
 6 | <stop offset="0.461458" stop-color="#685DFF"/>
 7 | <stop offset="1" stop-color="#2152FF"/>
 8 | </linearGradient>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
  1 | /** @type {import('tailwindcss').Config} */
  2 | module.exports = {
  3 |   darkMode: ["class"],
  4 |   content: [
  5 |     "./pages/**/*.{ts,tsx}",
  6 |     "./components/**/*.{ts,tsx}",
  7 |     "./app/**/*.{ts,tsx}",
  8 |     "./src/**/*.{ts,tsx}",
  9 |   ],
 10 |   theme: {
 11 |     container: {
 12 |       center: true,
 13 |       padding: "2rem",
 14 |       screens: {
 15 |         "2xl": "1400px",
 16 |       },
 17 |     },
 18 |     fontSize: {
 19 |       "heading1-bold": [
 20 |         "36px",
 21 |         {
 22 |           lineHeight: "140%",
 23 |           fontWeight: "700",
 24 |         },
 25 |       ],
 26 |       "heading1-semibold": [
 27 |         "36px",
 28 |         {
 29 |           lineHeight: "140%",
 30 |           fontWeight: "600",
 31 |         },
 32 |       ],
 33 |       "heading2-bold": [
 34 |         "30px",
 35 |         {
 36 |           lineHeight: "140%",
 37 |           fontWeight: "700",
 38 |         },
 39 |       ],
 40 |       "heading2-semibold": [
 41 |         "30px",
 42 |         {
 43 |           lineHeight: "140%",
 44 |           fontWeight: "600",
 45 |         },
 46 |       ],
 47 |       "heading3-bold": [
 48 |         "24px",
 49 |         {
 50 |           lineHeight: "140%",
 51 |           fontWeight: "700",
 52 |         },
 53 |       ],
 54 |       "heading4-medium": [
 55 |         "20px",
 56 |         {
 57 |           lineHeight: "140%",
 58 |           fontWeight: "500",
 59 |         },
 60 |       ],
 61 |       "body-bold": [
 62 |         "18px",
 63 |         {
 64 |           lineHeight: "140%",
 65 |           fontWeight: "700",
 66 |         },
 67 |       ],
 68 |       "body-semibold": [
 69 |         "18px",
 70 |         {
 71 |           lineHeight: "140%",
 72 |           fontWeight: "600",
 73 |         },
 74 |       ],
 75 |       "body-medium": [
 76 |         "18px",
 77 |         {
 78 |           lineHeight: "140%",
 79 |           fontWeight: "500",
 80 |         },
 81 |       ],
 82 |       "body-normal": [
 83 |         "18px",
 84 |         {
 85 |           lineHeight: "140%",
 86 |           fontWeight: "400",
 87 |         },
 88 |       ],
 89 |       "body1-bold": [
 90 |         "18px",
 91 |         {
 92 |           lineHeight: "140%",
 93 |           fontWeight: "700",
 94 |         },
 95 |       ],
 96 |       "base-regular": [
 97 |         "16px",
 98 |         {
 99 |           lineHeight: "140%",
100 |           fontWeight: "400",
101 |         },
102 |       ],
103 |       "base-medium": [
104 |         "16px",
105 |         {
106 |           lineHeight: "140%",
107 |           fontWeight: "500",
108 |         },
109 |       ],
110 |       "base-semibold": [
111 |         "16px",
112 |         {
113 |           lineHeight: "140%",
114 |           fontWeight: "600",
115 |         },
116 |       ],
117 |       "base1-semibold": [
118 |         "16px",
119 |         {
120 |           lineHeight: "140%",
121 |           fontWeight: "600",
122 |         },
123 |       ],
124 |       "small-regular": [
125 |         "14px",
126 |         {
127 |           lineHeight: "140%",
128 |           fontWeight: "400",
129 |         },
130 |       ],
131 |       "small-medium": [
132 |         "14px",
133 |         {
134 |           lineHeight: "140%",
135 |           fontWeight: "500",
136 |         },
137 |       ],
138 |       "small-semibold": [
139 |         "14px",
140 |         {
141 |           lineHeight: "140%",
142 |           fontWeight: "600",
143 |         },
144 |       ],
145 |       "subtle-medium": [
146 |         "12px",
147 |         {
148 |           lineHeight: "16px",
149 |           fontWeight: "500",
150 |         },
151 |       ],
152 |       "subtle-semibold": [
153 |         "12px",
154 |         {
155 |           lineHeight: "16px",
156 |           fontWeight: "600",
157 |         },
158 |       ],
159 |       "tiny-medium": [
160 |         "10px",
161 |         {
162 |           lineHeight: "140%",
163 |           fontWeight: "500",
164 |         },
165 |       ],
166 |       "x-small-semibold": [
167 |         "7px",
168 |         {
169 |           lineHeight: "9.318px",
170 |           fontWeight: "600",
171 |         },
172 |       ],
173 |     },
174 |     extend: {
175 |       colors: {
176 |         "primary-500": "#877EFF",
177 |         "secondary-500": "#FFB620",
178 |         blue: "#0095F6",
179 |         "logout-btn": "#FF5A5A",
180 |         "navbar-menu": "rgba(16, 16, 18, 0.6)",
181 |         "dark-1": "#000000",
182 |         "dark-2": "#121417",
183 |         "dark-3": "#101012",
184 |         "dark-4": "#1F1F22",
185 |         "light-1": "#FFFFFF",
186 |         "light-2": "#EFEFEF",
187 |         "light-3": "#7878A3",
188 |         "light-4": "#5C5C7B",
189 |         "gray-1": "#697C89",
190 |         glassmorphism: "rgba(16, 16, 18, 0.60)",
191 |       },
192 |       boxShadow: {
193 |         "count-badge": "0px 0px 6px 2px rgba(219, 188, 159, 0.30)",
194 |         "groups-sidebar": "-30px 0px 60px 0px rgba(28, 28, 31, 0.50)",
195 |       },
196 |       screens: {
197 |         xs: "400px",
198 |       },
199 |       keyframes: {
200 |         "accordion-down": {
201 |           from: { height: 0 },
202 |           to: { height: "var(--radix-accordion-content-height)" },
203 |         },
204 |         "accordion-up": {
205 |           from: { height: "var(--radix-accordion-content-height)" },
206 |           to: { height: 0 },
207 |         },
208 |       },
209 |       animation: {
210 |         "accordion-down": "accordion-down 0.2s ease-out",
211 |         "accordion-up": "accordion-up 0.2s ease-out",
212 |       },
213 |     },
214 |   },
215 |   plugins: [require("tailwindcss-animate")],
216 | };
217 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------