refactor components

components/Announcement.tsx

@@ -5,7 +5,7 @@ type Props = {
   toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
 };
 
-export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
+export default function Announcement({ toggleAnnouncementBar }: Props) {
   const announcementId = localStorage.getItem("announcementId");
 
   return (

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -25,7 +25,7 @@ export default function LinkTypeBadge({
       onClick={(e) => {
         e.stopPropagation();
       }}
-      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100"
+      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
     >
       <i className="bi-link-45deg text-lg leading-none"></i>
       <p className="text-xs truncate">{shortendURL}</p>

components/LinkViews/LinkList.tsx

@@ -91,7 +91,7 @@ export default function LinkCardCompact({
       <div
         className={`${selectedStyle} border relative items-center flex ${
           !showInfo && !isPWA() ? "hover:bg-base-300 p-3" : "py-3"
-        } duration-200 rounded-lg`}
+        } duration-200 rounded-lg w-full`}
         onClick={() =>
           selectable
             ? handleCheckboxClick(link)
@@ -117,29 +117,32 @@ export default function LinkCardCompact({
             />
           )} */}
         <div
-          className="flex items-center cursor-pointer"
+          className="flex items-center cursor-pointer w-full"
           onClick={() =>
             !editMode && window.open(generateLinkHref(link, account), "_blank")
           }
         >
           <div className="shrink-0">
-            <LinkIcon
-              link={link}
-              className="mt-1 sm:mt-0 sm:w-12 w-8 sm:h-12 h-8 text-xl sm:text-4xl"
-            />
+            <LinkIcon link={link} className="w-12 h-12 text-4xl" />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
             <p className="line-clamp-1 mr-8 text-primary select-none">
-              {unescapeString(link.name || link.description) || link.url}
+              {link.name ? (
+                unescapeString(link.name)
+              ) : (
+                <div className="mt-2">
+                  <LinkTypeBadge link={link} />
+                </div>
+              )}
             </p>
 
             <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-x-3 w-fit text-neutral flex-wrap">
+              <div className="flex items-center gap-x-3 text-neutral flex-wrap">
                 {collection ? (
                   <LinkCollection link={link} collection={collection} />
                 ) : undefined}
-                <LinkTypeBadge link={link} />
+                {link.name && <LinkTypeBadge link={link} />}
                 <LinkDate link={link} />
               </div>
             </div>

components/ModalContent/BulkDeleteLinksModal.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import useLinkStore from "@/store/links";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -62,13 +63,10 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
           'Delete' to bypass this confirmation in the future.
         </p>
 
-        <button
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
-          onClick={deleteLink}
-        >
+        <Button className="ml-auto" intent="destructive" onClick={deleteLink}>
           <i className="bi-trash text-xl" />
           Delete
-        </button>
+        </Button>
       </div>
     </Modal>
   );

components/ModalContent/DeleteCollectionModal.tsx

@@ -6,6 +6,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
 import Modal from "../Modal";
+import Button from "../ui/Button";
 
 type Props = {
   onClose: Function;
@@ -96,20 +97,15 @@ export default function DeleteCollectionModal({
           <p>Click the button below to leave the current collection.</p>
         )}
 
-        <button
+        <Button
           disabled={permissions === true && inputField !== collection.name}
-          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 ${
-            permissions === true
-              ? inputField === collection.name
-                ? "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-                : "cursor-not-allowed bg-red-300 dark:bg-red-900"
-              : "bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer"
-          }`}
           onClick={submit}
+          intent="destructive"
+          className="ml-auto"
         >
           <i className="bi-trash text-xl"></i>
           {permissions === true ? "Delete" : "Leave"} Collection
-        </button>
+        </Button>
       </div>
     </Modal>
   );

components/ui/Button.tsx

@@ -22,6 +22,7 @@ const buttonVariants = cva(
       size: {
         small: "h-7 px-2",
         medium: "h-10 px-4 py-2",
+        large: "h-12 px-7 py-2",
         full: "px-4 py-2 w-full",
         icon: "h-10 w-10",
       },