From 203320c9593cf74a85b23af68ced4f917099b251 Mon Sep 17 00:00:00 2001
From: Eddie Jaoude <eddie@jaoudestudios.com>
Date: Wed, 29 Nov 2023 07:40:00 +0000
Subject: [PATCH] fix: simplified external embed links

---
 components/embeds/external/Profile.js | 45 ++++++++++++++++-------
 components/user/UserProfile.js        | 53 +++++++++++----------------
 2 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/components/embeds/external/Profile.js b/components/embeds/external/Profile.js
index f08dd4796ad..2d7e5683dee 100644
--- a/components/embeds/external/Profile.js
+++ b/components/embeds/external/Profile.js
@@ -3,21 +3,27 @@ export default function Profile({ data }) {
   return (
     <div tw="flex flex-col w-[320px] border-[10px] border-white text-center rounded-3xl shadow-lg shadow-black/25 bg-[#122640] m-3 px-5 py-10">
       <img
-        tw="mx-auto h-48 w-48 rounded-full" 
+        tw="mx-auto h-48 w-48 rounded-full"
         width={460}
-        height={460} 
-        src={`https://github.com/${data.username}.png?size=460`} 
-        alt={ data.name } 
+        height={460}
+        src={`https://github.com/${data.username}.png?size=460`}
+        alt={data.name}
       />
-      
+
       <div tw="flex justify-center mt-6 text-lg font-semibold leading-7 tracking-tight text-white">
-        <div tw="flex">{ data.name.slice(0, 49) }{ data.name.length > 49 && "..." }</div>
+        <div tw="flex">
+          {data.name.slice(0, 49)}
+          {data.name.length > 49 && "..."}
+        </div>
       </div>
 
       <div tw="flex justify-center text-sm leading-6 text-gray-400">
-        <div tw="flex">{ data.bio.slice(0, 59) }{ data.bio.length > 59 && "..." }</div>
+        <div tw="flex">
+          {data.bio.slice(0, 59)}
+          {data.bio.length > 59 && "..."}
+        </div>
       </div>
-      
+
       <div tw="mt-6 flex justify-center">
         <div tw="flex text-gray-400 mx-2">
           <svg tw="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
@@ -36,12 +42,25 @@ export default function Profile({ data }) {
       </div>
 
       <div tw="flex justify-center mt-6">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307.38 75.51" width="128">
-          <path fill="#ee626c" d="M51.7 6.51C51.7 2.77 54.39 0 58.13 0s6.43 2.77 6.43 6.51-2.69 6.43-6.43 6.43-6.43-2.69-6.43-6.43Zm1.54 11.64h9.68v40.2h-9.68v-40.2ZM70.66 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16S104.99 59.4 92.3 59.4s-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12Z"></path>
-          <path fill="#fff" d="M121.77 5.13h18.88c18.63 0 28.4 10.66 28.4 26.61s-9.76 26.61-28.4 26.61h-18.88V5.13Zm18.88 43.61c12.29 0 17.82-6.67 17.82-17.01s-5.53-16.92-17.82-16.92h-8.46v33.93h8.46ZM175.8 34.99c0-12.12 7.16-17.9 17.66-17.9s17.57 5.78 17.57 18.06v.25h-9.6v-.41c0-6.51-3.25-8.87-7.97-8.87s-7.98 2.36-7.98 8.87v23.35h-9.68V34.99ZM214.62 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16-8.95 21.16-21.64 21.16-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12ZM264.26 38.57c0-13.02 8.79-21.48 21.4-21.48s21.73 8.79 21.73 21.56c0 13.75-10.25 20.75-20.02 20.75-5.78 0-10.58-2.44-13.43-6.92v23.03h-9.68V38.57Zm33.36-.33c0-7.08-4.8-12.12-11.88-12.12s-11.8 5.05-11.8 12.12 4.72 12.12 11.8 12.12 11.88-5.04 11.88-12.12Z"></path>
-          <path fill="#ee626c" d="M32.3 27.82a15.14 15.14 0 0 0 6.82-12.66C39.12 6.79 32.34 0 23.96 0H.04v27.72H0v30.33h21.96v-8.46H10.04V34.46h15.65c4.1 0 7.42 3.32 7.42 7.42v.29c0 .69-.2 1.38-.42 2.03-.21.61-.45 1.2-.72 1.79-.34.72-.75 1.41-1.14 2.11-.47.85-.95 1.69-1.42 2.54-.54.97-1.09 1.95-1.63 2.92-.49.87-.98 1.75-1.47 2.62-.3.54-.61 1.09-.91 1.63l-.13.23h5.39c8.21 0 14.87-6.66 14.87-14.87v-.59c0-7.65-5.78-13.95-13.21-14.77ZM10.08 8.44h9.2c4.61 0 8.34 3.73 8.34 8.34s-3.73 8.34-8.34 8.34h-9.2V8.44Z"></path>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 307.38 75.51"
+          width="128"
+        >
+          <path
+            fill="#ee626c"
+            d="M51.7 6.51C51.7 2.77 54.39 0 58.13 0s6.43 2.77 6.43 6.51-2.69 6.43-6.43 6.43-6.43-2.69-6.43-6.43Zm1.54 11.64h9.68v40.2h-9.68v-40.2ZM70.66 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16S104.99 59.4 92.3 59.4s-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12Z"
+          ></path>
+          <path
+            fill="#fff"
+            d="M121.77 5.13h18.88c18.63 0 28.4 10.66 28.4 26.61s-9.76 26.61-28.4 26.61h-18.88V5.13Zm18.88 43.61c12.29 0 17.82-6.67 17.82-17.01s-5.53-16.92-17.82-16.92h-8.46v33.93h8.46ZM175.8 34.99c0-12.12 7.16-17.9 17.66-17.9s17.57 5.78 17.57 18.06v.25h-9.6v-.41c0-6.51-3.25-8.87-7.97-8.87s-7.98 2.36-7.98 8.87v23.35h-9.68V34.99ZM214.62 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16-8.95 21.16-21.64 21.16-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12ZM264.26 38.57c0-13.02 8.79-21.48 21.4-21.48s21.73 8.79 21.73 21.56c0 13.75-10.25 20.75-20.02 20.75-5.78 0-10.58-2.44-13.43-6.92v23.03h-9.68V38.57Zm33.36-.33c0-7.08-4.8-12.12-11.88-12.12s-11.8 5.05-11.8 12.12 4.72 12.12 11.8 12.12 11.88-5.04 11.88-12.12Z"
+          ></path>
+          <path
+            fill="#ee626c"
+            d="M32.3 27.82a15.14 15.14 0 0 0 6.82-12.66C39.12 6.79 32.34 0 23.96 0H.04v27.72H0v30.33h21.96v-8.46H10.04V34.46h15.65c4.1 0 7.42 3.32 7.42 7.42v.29c0 .69-.2 1.38-.42 2.03-.21.61-.45 1.2-.72 1.79-.34.72-.75 1.41-1.14 2.11-.47.85-.95 1.69-1.42 2.54-.54.97-1.09 1.95-1.63 2.92-.49.87-.98 1.75-1.47 2.62-.3.54-.61 1.09-.91 1.63l-.13.23h5.39c8.21 0 14.87-6.66 14.87-14.87v-.59c0-7.65-5.78-13.95-13.21-14.77ZM10.08 8.44h9.2c4.61 0 8.34 3.73 8.34 8.34s-3.73 8.34-8.34 8.34h-9.2V8.44Z"
+          ></path>
         </svg>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
index 79ccd0ee98e..aa6e5339f61 100644
--- a/components/user/UserProfile.js
+++ b/components/user/UserProfile.js
@@ -17,7 +17,6 @@ import Markdown from "@components/Markdown";
 
 function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
-  const [embedFormat, setEmbedFormat] = useState("md");
   const [premiumShow, setPremiumShow] = useState(false);
   const router = useRouter();
   const fallbackImageSize = 120;
@@ -150,36 +149,28 @@ function UserProfile({ BASE_URL, data }) {
                   </Link>
                 ))}
               </div>
-              <div className=" flex items-center justify-center w-full overflow-hidden">
-                <ClipboardCopy>
-                  <p className="dark:text-gray-300 border p-3 rounded-md">
-                    {`${BASE_URL}/${data.username}`}
-                  </p>
-                </ClipboardCopy>
-              </div>
-              <div className="mt-5 space-y-4 items-center justify-center w-full overflow-hidden">
-                <h5 className="font-medium text-lg">Embed Profile</h5>
-                <div className="flex">
-                  <select 
-                    className="w-fit flex-none dark:text-gray-300 border-white pr-8 focus:border-white focus:ring-0 bg-transparent border p-3 rounded-l-md"
-                    onChange={e => setEmbedFormat(e.currentTarget.value)}
-                  >
-                    <option value="md">Markdown</option>
-                    <option value="html">HTML</option>
-                  </select>
-                  <div className="flex flex-auto">
-<ClipboardCopy>
-  <div className="dark:text-gray-300 border p-3 rounded-r-md h-full">
-    <p className="truncate absolute max-w-[80%]">
-      {embedFormat === "md" 
-        ? `[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`
-        : `<a href="${BASE_URL}/${data.username}"><img src="${BASE_URL}/${data.username}?embed" alt="${data.username} | BioDrop" /></a>`
-      }
-    </p>
-  </div>
-</ClipboardCopy>
-                  </div>
-                </div> 
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`${BASE_URL}/${data.username}`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`<a href="${BASE_URL}/${data.username}"><img src="${BASE_URL}/${data.username}?embed" alt="${data.username} | BioDrop" /></a>`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
               </div>
             </>
           )}