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,14 +55,25 @@ 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>
         )}
-        <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 !== "VIEW_TEAM" && (
-          {method === "UPDATE" && (
+          <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" && (
-              {isOwner && (
+              <>
+                {isOwner && (
+                  <Tab
+                    className={({ selected }) =>
+                      selected
+                        ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                        : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                    }
+                  >
+                    Collection Info
+                  </Tab>
+                )}
                 <Tab
                   className={({ selected }) =>
                     selected
@@ -61,30 +81,21 @@ export default function CollectionModal({
                       : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
                   }
                 >
-                  Collection Info
+                  {isOwner ? "Share & Collaborate" : "View Team"}
                 </Tab>
-              )}
+                <Tab
-              <Tab
+                  className={({ selected }) =>
-                className={({ selected }) =>
+                    selected
-                  selected
+                      ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
+                      : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
+                  }
-                }
+                >
-              >
+                  {isOwner ? "Delete Collection" : "Leave Collection"}
-                {isOwner ? "Share & Collaborate" : "View Team"}
+                </Tab>
-              </Tab>
+              </>
-              <Tab
+            )}
-                className={({ selected }) =>
+          </Tab.List>
-                  selected
+        )}
-                    ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                    : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 hover:dark:text-white rounded-md duration-100 outline-none"
-                }
-              >
-                {isOwner ? "Delete Collection" : "Leave Collection"}
-              </Tab>
-            </>
-          )}
-        </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,41 +94,80 @@ 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>
+          <div className="text-black">[Logo]</div>
+        </div>
 
-        {collection.description && (
+        <div>
-          <>
+          <div className={`min-w-[15rem] ${collection.members[1] && "mr-3"}`}>
-            <hr className="mt-5 max-w-[30rem] mx-auto border-1 border-slate-400" />
+            <div
-            <p className="mt-2 text-gray-500">{collection.description}</p>
+              onClick={() =>
-          </>
+                setModal({
-        )}
+                  modal: "COLLECTION",
-      </div>
+                  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>
 
-      <div className="flex flex-col gap-5 my-8">
+        <p className="mt-2 text-black">{collection.description}</p>
-        {links
+
-          ?.filter((e) => e.collectionId === Number(router.query.id))
+        <hr className="mt-5 border-1 border-slate-400" />
-          .map((e, i) => {
+
-            return (
+        <div className="flex flex-col gap-5 my-8">
-              <motion.div
+          {links
-                key={i}
+            ?.filter((e) => e.collectionId === Number(router.query.id))
-                initial="offscreen"
+            .map((e, i) => {
-                whileInView="onscreen"
+              return (
-                viewport={{ once: true, amount: 0.8 }}
+                <motion.div
-              >
+                  key={i}
-                <motion.div variants={cardVariants}>
+                  initial="offscreen"
-                  <LinkCard link={e as any} count={i} />
+                  whileInView="onscreen"
+                  viewport={{ once: true, amount: 0.8 }}
+                >
+                  <motion.div variants={cardVariants}>
+                    <LinkCard link={e as any} count={i} />
+                  </motion.div>
                 </motion.div>
-              </motion.div>
+              );
-            );
+            })}
-          })}
+        </div>
-      </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>
+      List created with <span className="text-black">Linkwarden.</span>
-      </p> */}
+    </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;