From 33e732edaddd62159ecabf99471265fcf6bdda33 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 14 Jun 2023 00:38:12 +0600
Subject: [PATCH] chore: variant at top

---
 src/components/RoadCard/TallBadgeTab.tsx | 27 ++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/RoadCard/TallBadgeTab.tsx b/src/components/RoadCard/TallBadgeTab.tsx
index 3d41806e6..7b0221c26 100644
--- a/src/components/RoadCard/TallBadgeTab.tsx
+++ b/src/components/RoadCard/TallBadgeTab.tsx
@@ -28,10 +28,33 @@ export function TallBadgeTab({
 
   return (
     <div className="sm:grid sm:grid-cols-5 sm:gap-6">
+      <div className="block sm:hidden mb-6">
+          <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>
       <LongBadge badgeUrl={badgeUrl} />
 
       <div className="mt-6 sm:col-span-3 sm:mt-0">
-        <div>
+        <div className="hidden sm:block">
           <span className="text-xs uppercase leading-none text-gray-400">
             Variant
           </span>
@@ -55,7 +78,7 @@ export function TallBadgeTab({
           </div>
         </div>
 
-        <div className="mt-4 flex flex-col gap-3">
+        <div className="sm:mt-4 flex flex-col gap-3">
           <Editor title={'HTML'} text={textareaContent} />
           <Editor title={'Markdown'} text={markdownSnippet} />
         </div>