Update copy and badge images

src/components/AccountSidebar.astro

@@ -20,7 +20,7 @@ const sidebarLinks = [
     },
     {
         href: '/account/road-card',
-        title: 'Road Card',
+        title: 'Card',
         id: 'road-card',
         icon: {
             glyph: 'badge',

src/components/RoadCard/RoadCardPage.tsx

@@ -7,6 +7,42 @@ import { LongBadge } from './LongBadge';
 import CopyIcon from '../../icons/copy.svg';
 import { useCopyText } from '../../hooks/use-copy-text';
 
+type EditorProps = {
+  title: string;
+  text: string;
+};
+
+function Editor(props: EditorProps) {
+  const { text, title } = props;
+
+  const { isCopied, copyText } = useCopyText();
+
+  return (
+    <div className="flex flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50">
+      <div className="flex items-center justify-between gap-2 border-b border-gray-300 px-3 py-2">
+        <span className="text-xs uppercase leading-none text-gray-400">
+          {title}
+        </span>
+        <button className="flex items-center" onClick={() => copyText(text)}>
+          {isCopied && (
+            <span className="mr-1 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-sm text-gray-900"
+        readOnly
+      >
+        {text}
+      </textarea>
+    </div>
+  );
+}
+
 export type BadgeProps = {
   badgeUrl: string;
 };
@@ -31,9 +67,9 @@ export function RoadCardPage() {
   }/v1-badge/${selectedBadge}/${user.id}?variant=${selectedVariant}`;
 
   const textareaContent = `
-  <a href="${badgeUrl}"><img src="${badgeUrl}" alt="${user?.name}${
+<a href="${badgeUrl}">
-    user?.name && "'s"
+  <img src="${badgeUrl}" alt="${user?.name}${user?.name && "'s"} Road Card"/>
-  } Road Card"/></a>
+</a>
     `.trim();
 
   const markdownSnippet = `
@@ -50,7 +86,7 @@ export function RoadCardPage() {
       </div>
 
       <div>
-        <div className="mb-10 flex items-center border-b">
+        <div className="mb-6 flex items-center border-b">
           <div className="flex items-center">
             <button
               className={`relative top-px flex items-center justify-center px-3 py-2 leading-none shadow-gray-600 ${
@@ -120,77 +156,23 @@ export function RoadCardPage() {
           </div>
 
           <div
-            className={`${
+            className={`mt-4 flex gap-2 ${
-              selectedBadge === 'wide' && 'grid grid-cols-2 gap-4'
+              selectedBadge === 'long' && 'flex-col'
             }`}
           >
-            <div className="mt-6 overflow-hidden rounded border border-gray-300 bg-gray-50">
+            <Editor title={'HTML'} text={textareaContent} />
-              <div className="flex items-center justify-between gap-2 border-b border-gray-300 p-3">
+            <Editor title={'Markdown'} text={markdownSnippet} />
-                <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">
-                  Embed
-                </span>
-                <button
-                  className="flex items-center"
-                  onClick={() => copyText(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>
           </div>
 
-          <p className="mt-3">
+          <p className="mt-3 rounded-md border p-2 text-sm">
-            You can include it on your website or follow the instructions to{' '}
+            Add this badge to your{' '}
             <a
-              href="#"
+              href="https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-blue-600 underline hover:no-underline"
+              className="text-blue-600 underline hover:text-blue-800"
             >
-              include it on your GitHub profile.
+              GitHub profile readme.
             </a>
           </p>
         </div>

src/icons/badge.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 48V64c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H256zM0 64C0 28.7 28.7 0 64 0H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM160 320h64c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"></path></svg>
-  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
-</svg>

src/icons/copy.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg>
-  <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
-</svg>