From 33c34f878e10994f99110af82a43d7486cb40c6c Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 13 Jun 2023 21:56:38 +0600
Subject: [PATCH] chore: variation to variant

---
 src/components/RoadCard/TallBadgeTab.tsx |  2 +-
 src/components/RoadCard/WideBadgeTab.tsx | 54 ++++++++++++------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/RoadCard/TallBadgeTab.tsx b/src/components/RoadCard/TallBadgeTab.tsx
index ac6d37fa7..901fe9063 100644
--- a/src/components/RoadCard/TallBadgeTab.tsx
+++ b/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">
diff --git a/src/components/RoadCard/WideBadgeTab.tsx b/src/components/RoadCard/WideBadgeTab.tsx
index 611ac304d..05477f65c 100644
--- a/src/components/RoadCard/WideBadgeTab.tsx
+++ b/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">
-            Variation
-          </span>
-
-          <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>
+        <span className="text-xs uppercase leading-none text-gray-400">
+          Variant
+        </span>
+
+        <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-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>