chore: one line textarea

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'}

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
+  <a href="${badgeUrl}"><img src="${badgeUrl}" alt="${user?.name}${
-  href="${import.meta.env.PUBLIC_API_URL}/v1-badge/${selectedBadge}/${user.id}"
+    user?.name && "'s"
-  target="_blank"
+  } Road Card"/></a>
-  rel="noopener noreferrer"
+    `.trim();
->
+
-  <img
+  const markdownSnippet = `
-    src="${import.meta.env.PUBLIC_API_URL}/v1-badge/${selectedBadge}/${user.id}"
+[![${user?.name}${user?.name && "'s"} Road Card](${badgeUrl})](${badgeUrl})
-    alt="Road Card"
+    `.trim();
-  />
-</a>
-  `.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">
+          <div
-              <span className="text-xs uppercase leading-none text-gray-400">
+            className={`${
-                Embed
+              selectedBadge === 'wide' && 'grid grid-cols-2 gap-4'
-              </span>
+            }`}
-              <button
+          >
-                className="flex items-center"
+            <div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
-                onClick={() => handleCopy(textareaContent)}
+              <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 && (
+                {markdownSnippet}
-                  <span className="mr-2 text-xs leading-none text-green-500">
+              </textarea>
-                    Copied!
+            </div>
-                  </span>
+            <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">
-                <img
+                <span className="text-xs uppercase leading-none text-gray-400">
-                  src={CopyIcon}
+                  Embed
-                  alt="Copy"
+                </span>
-                  className="inline-block h-4 w-4"
+                <button
-                />
+                  className="flex items-center"
-              </button>
+                  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

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
+        <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 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>
   );