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,16 +31,13 @@ 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"
-  />
-</a>
     `.trim();
 
   return (
@@ -119,6 +118,40 @@ export function RoadCardPage() {
               </button>
             </div>
           </div>
+
+          <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
+              >
+                {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">
@@ -141,12 +174,14 @@ export function RoadCardPage() {
                 </button>
               </div>
               <textarea
-              className="no-scrollbar block h-32 w-full bg-gray-200/70 p-3 text-gray-900"
+                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>
+          </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>
   );