From bb9bc3607868b726d56ebf94674082d18674ead1 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 13 Jun 2023 17:40:38 +0600
Subject: [PATCH] chore: one line textarea

---
 src/components/RoadCard/LongBadge.tsx    |   4 +-
 src/components/RoadCard/RoadCardPage.tsx | 107 +++++++++++++++--------
 src/components/RoadCard/WideBadge.tsx    |  10 +--
 3 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/src/components/RoadCard/LongBadge.tsx b/src/components/RoadCard/LongBadge.tsx
index 36cd3a398..000acf7d9 100644
--- a/src/components/RoadCard/LongBadge.tsx
+++ b/src/components/RoadCard/LongBadge.tsx
@@ -21,14 +21,14 @@ export function LongBadge({ badgeUrl }: BadgeProps) {
 
       <div className="mt-3 grid grid-cols-2 gap-2">
         <a
-          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
+          className="flex h-8 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none hover:opacity-75"
           href={badgeUrl + '&type=png'}
           download
         >
           Download
         </a>
         <button
-          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none cursor-pointer hover:opacity-75"
+          className="flex h-8 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none cursor-pointer hover:opacity-75"
           onClick={() => handleCopy(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}
diff --git a/src/components/RoadCard/RoadCardPage.tsx b/src/components/RoadCard/RoadCardPage.tsx
index b393299de..9947ebcf1 100644
--- a/src/components/RoadCard/RoadCardPage.tsx
+++ b/src/components/RoadCard/RoadCardPage.tsx
@@ -17,6 +17,8 @@ export function RoadCardPage() {
     'dark'
   );
   const { isCopied, handleCopy } = useIsCopied();
+  const { isCopied: isMarkdownCopied, handleCopy: handleMarkdownCopy } =
+    useIsCopied();
 
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   if (!token) {
@@ -29,17 +31,14 @@ export function RoadCardPage() {
   }/v1-badge/${selectedBadge}/${user.id}?variant=${selectedVariant}`;
 
   const textareaContent = `
-  <a
-  href="${import.meta.env.PUBLIC_API_URL}/v1-badge/${selectedBadge}/${user.id}"
-  target="_blank"
-  rel="noopener noreferrer"
->
-  <img
-    src="${import.meta.env.PUBLIC_API_URL}/v1-badge/${selectedBadge}/${user.id}"
-    alt="Road Card"
-  />
-</a>
-  `.trim();
+  <a href="${badgeUrl}"><img src="${badgeUrl}" alt="${user?.name}${
+    user?.name && "'s"
+  } Road Card"/></a>
+    `.trim();
+
+  const markdownSnippet = `
+[![${user?.name}${user?.name && "'s"} Road Card](${badgeUrl})](${badgeUrl})
+    `.trim();
 
   return (
     <>
@@ -119,34 +118,70 @@ export function RoadCardPage() {
               </button>
             </div>
           </div>
-          <div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
-            <div className="flex items-center justify-between gap-2 border-b border-gray-300 p-3">
-              <span className="text-xs uppercase leading-none text-gray-400">
-                Embed
-              </span>
-              <button
-                className="flex items-center"
-                onClick={() => handleCopy(textareaContent)}
+
+          <div
+            className={`${
+              selectedBadge === 'wide' && 'grid grid-cols-2 gap-4'
+            }`}
+          >
+            <div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
+              <div className="flex items-center justify-between gap-2 border-b border-gray-300 p-3">
+                <span className="text-xs uppercase leading-none text-gray-400">
+                  Markdown
+                </span>
+                <button
+                  className="flex items-center"
+                  onClick={() => handleMarkdownCopy(markdownSnippet)}
+                >
+                  {isMarkdownCopied && (
+                    <span className="mr-2 text-xs leading-none text-green-500">
+                      Copied!
+                    </span>
+                  )}
+                  <img
+                    src={CopyIcon}
+                    alt="Copy"
+                    className="inline-block h-4 w-4"
+                  />
+                </button>
+              </div>
+              <textarea
+                className="no-scrollbar block h-12 w-full overflow-x-auto whitespace-nowrap bg-gray-200/70 p-3 text-gray-900"
+                readOnly
               >
-                {isCopied && (
-                  <span className="mr-2 text-xs leading-none text-green-500">
-                    Copied!
-                  </span>
-                )}
-                <img
-                  src={CopyIcon}
-                  alt="Copy"
-                  className="inline-block h-4 w-4"
-                />
-              </button>
+                {markdownSnippet}
+              </textarea>
+            </div>
+            <div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
+              <div className="flex items-center justify-between gap-2 border-b border-gray-300 p-3">
+                <span className="text-xs uppercase leading-none text-gray-400">
+                  Embed
+                </span>
+                <button
+                  className="flex items-center"
+                  onClick={() => handleCopy(textareaContent)}
+                >
+                  {isCopied && (
+                    <span className="mr-2 text-xs leading-none text-green-500">
+                      Copied!
+                    </span>
+                  )}
+                  <img
+                    src={CopyIcon}
+                    alt="Copy"
+                    className="inline-block h-4 w-4"
+                  />
+                </button>
+              </div>
+              <textarea
+                className="no-scrollbar block h-12 w-full overflow-x-auto whitespace-nowrap bg-gray-200/70 p-3 text-gray-900"
+                readOnly
+              >
+                {textareaContent}
+              </textarea>
             </div>
-            <textarea
-              className="no-scrollbar block h-32 w-full bg-gray-200/70 p-3 text-gray-900"
-              readOnly
-            >
-              {textareaContent}
-            </textarea>
           </div>
+
           <p className="mt-3">
             You can include it on your website or follow the instructions to{' '}
             <a
diff --git a/src/components/RoadCard/WideBadge.tsx b/src/components/RoadCard/WideBadge.tsx
index 0c6b7fa64..619deba88 100644
--- a/src/components/RoadCard/WideBadge.tsx
+++ b/src/components/RoadCard/WideBadge.tsx
@@ -18,20 +18,20 @@ export function WideBadge({ badgeUrl }: BadgeProps) {
         />
       </a>
 
-      <div className="mt-3 grid grid-cols-2 gap-2">
+      <div className="mt-3 grid grid-cols-2 gap-4">
         <a
-          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
+          className="flex h-8 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none hover:opacity-75"
           href={badgeUrl + '&type=png'}
           download
         >
           Download
         </a>
-        <a
-          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none cursor-pointer hover:opacity-75"
+        <button
+          className="flex h-8 cursor-pointer items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-sm font-medium leading-none hover:opacity-75"
           onClick={() => handleCopy(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}
-        </a>
+        </button>
       </div>
     </div>
   );