From 9d6e441692fe81b317c05d4e9374fef632357f67 Mon Sep 17 00:00:00 2001
From: Brandon Saldan <26472557+brandonsaldan@users.noreply.github.com>
Date: Thu, 26 Dec 2024 03:35:31 -0500
Subject: [PATCH] feat(ui): add transition to tab text

---
 src/components/left-code-tabs.tsx  | 4 ++--
 src/components/right-code-tabs.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/left-code-tabs.tsx b/src/components/left-code-tabs.tsx
index f59a373..ba5b474 100644
--- a/src/components/left-code-tabs.tsx
+++ b/src/components/left-code-tabs.tsx
@@ -122,7 +122,7 @@ const LeftCodeTabs = () => {
                   className={
                     activeTab === 'playlist'
                       ? 'rounded-tl-xl border-l-4 border-r border-t-4 border-l-gray-50 border-r-gray-200 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 py-2 pl-5 pr-4 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 py-2 pl-5 pr-4 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">
@@ -144,7 +144,7 @@ const LeftCodeTabs = () => {
                   className={
                     activeTab === 'artist'
                       ? 'rounded-tr-xl border-t-4 border-l-gray-200 border-r-gray-50 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">
diff --git a/src/components/right-code-tabs.tsx b/src/components/right-code-tabs.tsx
index 4abdb6f..d77e8a8 100644
--- a/src/components/right-code-tabs.tsx
+++ b/src/components/right-code-tabs.tsx
@@ -114,7 +114,7 @@ const RightCodeTabs = () => {
                   className={
                     activeTab === 'setup'
                       ? 'rounded-tl-xl border-r border-t-4 border-l-gray-50 border-r-gray-200 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">
@@ -136,7 +136,7 @@ const RightCodeTabs = () => {
                   className={
                     activeTab === 'readme'
                       ? 'rounded-tr-xl border-t-4 border-l-gray-200 border-r-gray-50 border-t-gray-50 bg-white px-4 py-2 text-blue-600'
-                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 hover:text-gray-900'
+                      : 'border-r border-t-4 border-gray-200 border-t-gray-50 px-4 py-2 transition duration-150 ease-in-out hover:text-gray-900'
                   }
                 >
                   <div className="flex items-center gap-2">