added view team modal

components/Modal/Collection/CollectionInfo.tsx

@@ -18,7 +18,7 @@ type Props = {
     SetStateAction<CollectionIncludingMembersAndLinkCount>
   >;
   collection: CollectionIncludingMembersAndLinkCount;
-  method: "CREATE" | "UPDATE";
+  method: "CREATE" | "UPDATE" | "VIEW_TEAM";
 };
 
 export default function CollectionInfo({

components/Modal/Collection/ViewTeam.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCrown } from "@fortawesome/free-solid-svg-icons";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import { toast } from "react-hot-toast";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+
+type Props = {
+  collection: CollectionIncludingMembersAndLinkCount;
+};
+
+export default function ViewTeam({ collection }: Props) {
+  const currentURL = new URL(document.URL);
+
+  const publicCollectionURL = `${currentURL.origin}/public/collections/${collection.id}`;
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null,
+    name: "",
+    username: "",
+    image: "",
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      const owner = await getPublicUserData(collection.ownerId as number);
+      setCollectionOwner(owner);
+    };
+
+    fetchOwner();
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
+      <p className="ml-10 text-xl font-thin">Team</p>
+
+      <p>Here's all the members that are collaborating in this collection.</p>
+
+      <div
+        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[4rem] gap-2 justify-between"
+        title={`'@${collectionOwner.username}' is the owner of this collection.`}
+      >
+        <div className="flex items-center gap-2 w-full">
+          <ProfilePhoto
+            src={collectionOwner.image ? collectionOwner.image : undefined}
+            className="border-[3px]"
+          />
+          <div className="w-full">
+            <div className="flex items-center gap-1 w-full justify-between">
+              <p className="text-sm font-bold text-black dark:text-white">
+                {collectionOwner.name}
+              </p>
+              <div className="flex text-xs gap-1 items-center">
+                <FontAwesomeIcon
+                  icon={faCrown}
+                  className="w-3 h-3 text-yellow-500"
+                />
+                Admin
+              </div>
+            </div>
+            <p className="text-gray-500 dark:text-gray-300">
+              @{collectionOwner.username}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {collection?.members[0]?.user && (
+        <>
+          <div className="flex flex-col gap-3 rounded-md">
+            {collection.members
+              .sort((a, b) => (a.userId as number) - (b.userId as number))
+              .map((e, i) => {
+                return (
+                  <div
+                    key={i}
+                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <ProfilePhoto
+                        src={e.user.image ? e.user.image : undefined}
+                        className="border-[3px]"
+                      />
+                      <div>
+                        <p className="text-sm font-bold text-black dark:text-white">
+                          {e.user.name}
+                        </p>
+                        <p className="text-gray-500 dark:text-gray-300">
+                          @{e.user.username}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

components/Modal/Collection/index.tsx

@@ -4,6 +4,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import TeamManagement from "./TeamManagement";
 import { useState } from "react";
 import DeleteCollection from "./DeleteCollection";
+import ViewTeam from "./ViewTeam";
 
 type Props =
   | {
@@ -21,6 +22,14 @@ type Props =
       isOwner: boolean;
       className?: string;
       defaultIndex?: number;
+    }
+  | {
+      toggleCollectionModal: Function;
+      activeCollection: CollectionIncludingMembersAndLinkCount;
+      method: "VIEW_TEAM";
+      isOwner: boolean;
+      className?: string;
+      defaultIndex?: number;
     };
 
 export default function CollectionModal({
@@ -46,10 +55,11 @@ export default function CollectionModal({
     <div className={className}>
       <Tab.Group defaultIndex={defaultIndex}>
         {method === "CREATE" && (
-          <p className="text-xl text-black dark:text-white text-center">
+          <p className="ml-10 mt-[0.1rem] text-xl mb-3 font-thin">
             New Collection
           </p>
         )}
+        {method !== "VIEW_TEAM" && (
           <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
             {method === "UPDATE" && (
               <>
@@ -85,6 +95,7 @@ export default function CollectionModal({
               </>
             )}
           </Tab.List>
+        )}
         <Tab.Panels>
           {(isOwner || method === "CREATE") && (
             <Tab.Panel>
@@ -115,6 +126,14 @@ export default function CollectionModal({
               </Tab.Panel>
             </>
           )}
+
+          {method === "VIEW_TEAM" && (
+            <>
+              <Tab.Panel>
+                <ViewTeam collection={collection} />
+              </Tab.Panel>
+            </>
+          )}
         </Tab.Panels>
       </Tab.Group>
     </div>

docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3.5"
 services:
   postgres:
-    image: postgres
+    image: postgres:16-alpine
     env_file: .env
     restart: always
     volumes:

pages/public/collections/[id].tsx

@@ -8,6 +8,9 @@ import { motion, Variants } from "framer-motion";
 import Head from "next/head";
 import useLinks from "@/hooks/useLinks";
 import useLinkStore from "@/store/links";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import useModalStore from "@/store/modals";
+import ModalManagement from "@/components/ModalManagement";
 
 const cardVariants: Variants = {
   offscreen: {
@@ -25,6 +28,7 @@ const cardVariants: Variants = {
 
 export default function PublicCollections() {
   const { links } = useLinkStore();
+  const { setModal } = useModalStore();
 
   const router = useRouter();
 
@@ -73,7 +77,13 @@ export default function PublicCollections() {
   }, []);
 
   return collection ? (
-    <div className="max-w-4xl mx-auto p-5 bg">
+    <div
+      className="h-screen"
+      style={{
+        backgroundImage: `linear-gradient(${collection?.color}30 10%, #f3f4f6 30%, #f9fafb 100%)`,
+      }}
+    >
+      <ModalManagement />
       {collection ? (
         <Head>
           <title>{collection.name} | Linkwarden</title>
@@ -84,19 +94,57 @@ export default function PublicCollections() {
           />
         </Head>
       ) : undefined}
-      <div
+      <div className="max-w-4xl mx-auto p-5 bg">
-        className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
+        <div className="flex items-center justify-between">
-      >
+          <p className="text-4xl text-black font-thin mb-5 capitalize mt-10">
-        <p className="text-5xl text-black mb-5 capitalize">{collection.name}</p>
+            {collection.name}
-
+          </p>
-        {collection.description && (
+          <div className="text-black">[Logo]</div>
-          <>
-            <hr className="mt-5 max-w-[30rem] mx-auto border-1 border-slate-400" />
-            <p className="mt-2 text-gray-500">{collection.description}</p>
-          </>
-        )}
         </div>
 
+        <div>
+          <div className={`min-w-[15rem] ${collection.members[1] && "mr-3"}`}>
+            <div
+              onClick={() =>
+                setModal({
+                  modal: "COLLECTION",
+                  state: true,
+                  method: "VIEW_TEAM",
+                  isOwner: false,
+                  active: collection,
+                  defaultIndex: 0,
+                })
+              }
+              className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit sm:mr-0 sm:ml-auto cursor-pointer"
+            >
+              {collection.members
+                .sort((a, b) => (a.userId as number) - (b.userId as number))
+                .map((e, i) => {
+                  return (
+                    <ProfilePhoto
+                      key={i}
+                      src={e.user.image ? e.user.image : undefined}
+                      className={`${
+                        collection.members[1] && "-mr-3"
+                      } border-[3px]`}
+                    />
+                  );
+                })
+                .slice(0, 4)}
+              {collection?.members.length &&
+              collection.members.length - 4 > 0 ? (
+                <div className="h-10 w-10 text-white flex items-center justify-center rounded-full border-[3px] bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700 -mr-3">
+                  +{collection?.members?.length - 4}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        </div>
+
+        <p className="mt-2 text-black">{collection.description}</p>
+
+        <hr className="mt-5 border-1 border-slate-400" />
+
         <div className="flex flex-col gap-5 my-8">
           {links
             ?.filter((e) => e.collectionId === Number(router.query.id))
@@ -116,10 +164,11 @@ export default function PublicCollections() {
             })}
         </div>
 
-      {/* <p className="text-center font-bold text-gray-500">
+        {/* <p className="text-center text-gray-500">
       List created with <span className="text-black">Linkwarden.</span>
     </p> */}
       </div>
+    </div>
   ) : (
     <></>
   );

store/modals.ts

@@ -39,6 +39,14 @@ type Modal =
       active?: CollectionIncludingMembersAndLinkCount;
       defaultIndex?: number;
     }
+  | {
+      modal: "COLLECTION";
+      state: boolean;
+      method: "VIEW_TEAM";
+      isOwner?: boolean;
+      active?: CollectionIncludingMembersAndLinkCount;
+      defaultIndex?: number;
+    }
   | null;
 
 type ModalsStore = {
@@ -46,11 +54,11 @@ type ModalsStore = {
   setModal: (modal: Modal) => void;
 };
 
-const useLocalSettingsStore = create<ModalsStore>((set) => ({
+const useModalStore = create<ModalsStore>((set) => ({
   modal: null,
   setModal: (modal: Modal) => {
     set({ modal });
   },
 }));
 
-export default useLocalSettingsStore;
+export default useModalStore;