updated public page

components/LinkViews/LinkList.tsx

@@ -50,7 +50,11 @@ export default function LinkCardCompact({ link, count, className }: Props) {
 
   return (
     <>
-      <div className="border-neutral-content relative hover:bg-base-300 duration-200 rounded-lg">
+      <div
+        className={`border-neutral-content relative ${
+          !showInfo ? "hover:bg-base-300" : ""
+        } duration-200 rounded-lg`}
+      >
         <div
           onClick={() => link.url && window.open(link.url || "", "_blank")}
           className="flex items-center cursor-pointer py-3 px-3"
@@ -66,8 +70,12 @@ export default function LinkCardCompact({ link, count, className }: Props) {
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
               <div className="flex items-center gap-2">
-                <LinkCollection link={link} collection={collection} />
-                &middot;
+                {collection ? (
+                  <>
+                    <LinkCollection link={link} collection={collection} />
+                    &middot;
+                  </>
+                ) : undefined}
                 {link.url ? (
                   <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
                     <i className="bi-link-45deg text-base" />
@@ -93,26 +101,45 @@ export default function LinkCardCompact({ link, count, className }: Props) {
           linkInfo={showInfo}
         />
         {showInfo ? (
-          <div className="pl-10">
-            <div className="pb-3 mt-1">
-              <p>{unescapeString(link.description)}</p>
+          <div>
+            <div className="pb-3 mt-1 px-3">
+              <p className="text-neutral text-lg font-semibold">Description</p>
+
+              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+              <p>
+                {link.description ? (
+                  unescapeString(link.description)
+                ) : (
+                  <span className="text-neutral text-sm">
+                    No description provided.
+                  </span>
+                )}
+              </p>
               {link.tags[0] ? (
-                <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                  <div className="flex gap-1 items-center flex-wrap">
-                    {link.tags.map((e, i) => (
-                      <Link
-                        href={"/tags/" + e.id}
-                        key={i}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                        }}
-                        className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                      >
-                        #{e.name}
-                      </Link>
-                    ))}
+                <>
+                  <p className="text-neutral text-lg mt-3 font-semibold">
+                    Tags
+                  </p>
+
+                  <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
+
+                  <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
+                    <div className="flex gap-1 items-center flex-wrap">
+                      {link.tags.map((e, i) => (
+                        <Link
+                          href={"/tags/" + e.id}
+                          key={i}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                        >
+                          #{e.name}
+                        </Link>
+                      ))}
+                    </div>
                   </div>
-                </div>
+                </>
               ) : undefined}
             </div>
           </div>