chore: badge variants

src/components/RoadCard/LongBadge.tsx

@@ -22,13 +22,13 @@ 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"
-          href={badgeUrl + '?type=png'}
+          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 hover:opacity-75"
+          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"
           onClick={() => handleCopy(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}

src/components/RoadCard/RoadCardPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME, decodeToken } from '../../lib/jwt';
 import { WideBadge } from './WideBadge';
@@ -13,6 +13,9 @@ export type BadgeProps = {
 
 export function RoadCardPage() {
   const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
+  const [selectedVariant, setSelectedVariant] = useState<'dark' | 'light'>(
+    'dark'
+  );
   const { isCopied, handleCopy } = useIsCopied();
 
   const token = Cookies.get(TOKEN_COOKIE_NAME);
@@ -23,7 +26,7 @@ export function RoadCardPage() {
 
   const badgeUrl = `${
     import.meta.env.PUBLIC_API_URL
-  }/v1-badge/${selectedBadge}/${user.id}`;
+  }/v1-badge/${selectedBadge}/${user.id}?variant=${selectedVariant}`;
 
   const textareaContent = `
   <a
@@ -56,7 +59,10 @@ export function RoadCardPage() {
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
               }`}
-              onClick={() => setSelectedBadge('long')}
+              onClick={() => {
+                setSelectedBadge('long');
+                setSelectedVariant('dark');
+              }}
             >
               Long
             </button>
@@ -67,7 +73,10 @@ export function RoadCardPage() {
                   ? 'shadow-[inset_0_-1px_0_var(--tw-shadow-color)]'
                   : 'text-gray-600'
               }`}
-              onClick={() => setSelectedBadge('wide')}
+              onClick={() => {
+                setSelectedBadge('wide');
+                setSelectedVariant('dark');
+              }}
             >
               Wide
             </button>
@@ -85,22 +94,59 @@ export function RoadCardPage() {
         {selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />}
 
         <div className={`${selectedBadge === 'long' && 'sm:col-span-3'}`}>
-          <div className="flex items-center gap-2 text-xs uppercase leading-none text-gray-400">
+          <div>
-            Embed
+            <span className="text-xs uppercase leading-none text-gray-400">
-            <button
+              Variation
-              className="flex items-center"
+            </span>
-              onClick={() => handleCopy(textareaContent)}
+
+            <div className="mt-2 flex items-center gap-2">
+              <button
+                className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${
+                  selectedVariant === 'dark' && 'border-gray-300 bg-gray-100'
+                }`}
+                onClick={() => setSelectedVariant('dark')}
+              >
+                Dark
+              </button>
+
+              <button
+                className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${
+                  selectedVariant === 'light' && 'border-gray-300 bg-gray-100'
+                }`}
+                onClick={() => setSelectedVariant('light')}
+              >
+                Light
+              </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)}
+              >
+                {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-32 w-full bg-gray-200/70 p-3 text-gray-900"
+              readOnly
             >
-              <img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" />
+              {textareaContent}
-              {isCopied && <span className="ml-2 text-green-500">Copied!</span>}
+            </textarea>
-            </button>
           </div>
-          <textarea
-            className="no-scrollbar mt-3 h-32 w-full rounded-md border border-gray-300 bg-gray-50 p-3 text-gray-900"
-            readOnly
-          >
-            {textareaContent}
-          </textarea>
           <p className="mt-3">
             You can include it on your website or follow the instructions to{' '}
             <a

src/components/RoadCard/WideBadge.tsx

@@ -21,13 +21,13 @@ export function WideBadge({ 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"
-          href={badgeUrl + '?type=png'}
+          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 hover:opacity-75"
+          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"
           onClick={() => handleCopy(badgeUrl)}
         >
           {isCopied ? 'Copied!' : 'Copy Link'}