From 01602bafecd8fdddb00bfd880f5b2c9a0f15bf04 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 16 Nov 2023 06:51:28 -0500
Subject: [PATCH] improved public page [WIP]

---
 .../PublicPage/{LinkCard.tsx => PublicLinkCard.tsx}  |  0
 components/{ => PublicPage}/PublicSearchBar.tsx      |  9 ++-------
 pages/public/collections/[id].tsx                    | 12 ++++++------
 3 files changed, 8 insertions(+), 13 deletions(-)
 rename components/PublicPage/{LinkCard.tsx => PublicLinkCard.tsx} (100%)
 rename components/{ => PublicPage}/PublicSearchBar.tsx (86%)

diff --git a/components/PublicPage/LinkCard.tsx b/components/PublicPage/PublicLinkCard.tsx
similarity index 100%
rename from components/PublicPage/LinkCard.tsx
rename to components/PublicPage/PublicLinkCard.tsx
diff --git a/components/PublicSearchBar.tsx b/components/PublicPage/PublicSearchBar.tsx
similarity index 86%
rename from components/PublicSearchBar.tsx
rename to components/PublicPage/PublicSearchBar.tsx
index b1b929a..b890e83 100644
--- a/components/PublicSearchBar.tsx
+++ b/components/PublicPage/PublicSearchBar.tsx
@@ -6,17 +6,12 @@ import { toast } from "react-hot-toast";
 
 type Props = {
   placeHolder?: string;
-  className?: string;
 };
 
-export default function PublicSearchBar({ placeHolder, className }: Props) {
+export default function PublicSearchBar({ placeHolder }: Props) {
   const router = useRouter();
 
-  const routeQuery = router.query.q;
-
-  const [searchQuery, setSearchQuery] = useState(
-    routeQuery ? decodeURIComponent(routeQuery as string) : ""
-  );
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     console.log(router);
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx
index ab31b87..b1e94cc 100644
--- a/pages/public/collections/[id].tsx
+++ b/pages/public/collections/[id].tsx
@@ -1,5 +1,5 @@
 "use client";
-import LinkCard from "@/components/PublicPage/LinkCard";
+import PublicLinkCard from "@/components/PublicPage/PublicLinkCard";
 import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
 import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
 import { useRouter } from "next/router";
@@ -16,7 +16,7 @@ import { useTheme } from "next-themes";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import Image from "next/image";
 import Link from "next/link";
-import PublicSearchBar from "@/components/PublicSearchBar";
+import PublicSearchBar from "@/components/PublicPage/PublicSearchBar";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFilter, faSort } from "@fortawesome/free-solid-svg-icons";
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
@@ -129,7 +129,7 @@ export default function PublicCollections() {
           <p className="text-4xl font-thin mb-2 capitalize mt-10">
             {collection.name}
           </p>
-          <div className="flex gap-2 items-center mt-8">
+          <div className="flex gap-2 items-center mt-8 min-w-fit">
             <ToggleDarkMode className="w-8 h-8 flex" />
             <Link href="https://linkwarden.app/" target="_blank">
               <Image
@@ -157,7 +157,7 @@ export default function PublicCollections() {
                   defaultIndex: 0,
                 })
               }
-              className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-center w-fit cursor-pointer"
+              className="hover:opacity-80 duration-100 flex justify-center sm:justify-end items-start w-fit cursor-pointer"
             >
               {collectionOwner.id ? (
                 <ProfilePhoto
@@ -181,7 +181,7 @@ export default function PublicCollections() {
                 .slice(0, 3)}
               {collection?.members.length &&
               collection.members.length - 3 > 0 ? (
-                <div className="w-8 h-8 text-white flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700">
+                <div className="w-8 h-8 min-w-[2rem] text-white text-sm flex items-center justify-center rounded-full border-2 bg-sky-600 dark:bg-sky-600 border-slate-200 dark:border-neutral-700">
                   +{collection?.members?.length - 3}
                 </div>
               ) : null}
@@ -263,7 +263,7 @@ export default function PublicCollections() {
                     viewport={{ once: true, amount: 0.8 }}
                   >
                     <motion.div variants={cardVariants}>
-                      <LinkCard link={e as any} count={i} />
+                      <PublicLinkCard link={e as any} count={i} />
                     </motion.div>
                   </motion.div>
                 );