From 2b1ef7be3e2e8f040d4c2b7db6774eeb220b568e Mon Sep 17 00:00:00 2001
From: Awesh Choudhary <66569398+aweshchoudhary@users.noreply.github.com>
Date: Thu, 23 Mar 2023 20:01:45 +0530
Subject: [PATCH] SEO Fixed and Added Semantic Html Tags (#98)

---
 components/Mobile/Navbar.tsx   | 4 ++--
 components/Sidebar/Sidebar.tsx | 8 ++++----
 pages/index.tsx                | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/Mobile/Navbar.tsx b/components/Mobile/Navbar.tsx
index 8728476..f9ff9c7 100644
--- a/components/Mobile/Navbar.tsx
+++ b/components/Mobile/Navbar.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 export const Navbar: FC<Props> = ({ selectedConversation, onNewConversation }) => {
   return (
-    <div className="flex justify-between bg-[#202123] py-3 px-4 w-full">
+    <nav className="flex justify-between bg-[#202123] py-3 px-4 w-full">
       <div className="mr-4"></div>
 
       <div className="max-w-[240px] whitespace-nowrap overflow-hidden text-ellipsis">{selectedConversation.name}</div>
@@ -18,6 +18,6 @@ export const Navbar: FC<Props> = ({ selectedConversation, onNewConversation }) =
         className="cursor-pointer hover:text-neutral-400"
         onClick={onNewConversation}
       />
-    </div>
+    </nav>
   );
 };
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index 5f6d298..03fc41c 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -40,8 +40,8 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
   }, [searchTerm, conversations]);
 
   return (
-    <div className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
-      <div className="flex items-center">
+    <aside className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}>
+      <header className="flex items-center">
         <button
           className="flex gap-3 p-3 items-center w-full sm:w-[200px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"
           onClick={() => {
@@ -61,7 +61,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
           size={32}
           onClick={onToggleSidebar}
         />
-      </div>
+      </header>
 
       {conversations.length > 1 && (
         <Search
@@ -96,6 +96,6 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
         onExportConversations={onExportConversations}
         onImportConversations={onImportConversations}
       />
-    </div>
+    </aside>
   );
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index b57eeea..5af5df4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -352,7 +352,7 @@ export default function Home() {
         />
       </Head>
       {selectedConversation && (
-        <div className={`flex flex-col h-screen w-screen text-white dark:text-white text-sm ${lightMode}`}>
+        <main className={`flex flex-col h-screen w-screen text-white dark:text-white text-sm ${lightMode}`}>
           <div className="sm:hidden w-full fixed top-0">
             <Navbar
               selectedConversation={selectedConversation}
@@ -360,7 +360,7 @@ export default function Home() {
             />
           </div>
 
-          <div className="flex h-full w-full pt-[48px] sm:pt-0">
+          <article className="flex h-full w-full pt-[48px] sm:pt-0">
             {showSidebar ? (
               <>
                 <Sidebar
@@ -405,8 +405,8 @@ export default function Home() {
               onUpdateConversation={handleUpdateConversation}
               stopConversationRef={stopConversationRef}
             />
-          </div>
-        </div>
+          </article>
+        </main>
       )}
     </>
   );