chore: variation to variant

src/components/RoadCard/TallBadgeTab.tsx

@@ -26,7 +26,7 @@ export function TallBadgeTab() {
       <div className="sm:col-span-3 mt-6 sm:mt-0">
         <div>
           <span className="text-xs uppercase leading-none text-gray-400">
-            Variation
+            Variant
           </span>
 
           <div className="mt-2 flex items-center gap-2">

src/components/RoadCard/WideBadgeTab.tsx

@@ -21,36 +21,36 @@ export default function WideBadgeTab() {
 
   return (
     <div className="flex flex-col gap-6">
-      <WideBadge badgeUrl={badgeUrl} />
-
       <div>
-        <div>
+        <span className="text-xs uppercase leading-none text-gray-400">
-          <span className="text-xs uppercase leading-none text-gray-400">
+          Variant
-            Variation
+        </span>
-          </span>
+
-
+        <div className="mt-2 flex items-center gap-2">
-          <div className="mt-2 flex items-center gap-2">
+          <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 ${
-              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'
-                selectedVariant === 'dark' && 'border-gray-300 bg-gray-100'
+            }`}
-              }`}
+            onClick={() => setSelectedVariant('dark')}
-              onClick={() => setSelectedVariant('dark')}
+          >
-            >
+            Dark
-              Dark
+          </button>
-            </button>
+
-
+          <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 ${
-              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'
-                selectedVariant === 'light' && 'border-gray-300 bg-gray-100'
+            }`}
-              }`}
+            onClick={() => setSelectedVariant('light')}
-              onClick={() => setSelectedVariant('light')}
+          >
-            >
+            Light
-              Light
+          </button>
-            </button>
-          </div>
         </div>
+      </div>
 
-        <div className={`mt-4 flex flex-col gap-3 sm:flex-row`}>
+      <WideBadge badgeUrl={badgeUrl} />
+
+      <div>
+        <div className={`flex flex-col gap-3 sm:flex-row`}>
           <Editor title={'HTML'} text={textareaContent} />
           <Editor title={'Markdown'} text={markdownSnippet} />
         </div>