Created seperate logo component

client/components/common/Logo.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react"
+
+interface LogoProps {
+  className?: string
+}
+
+const Logo: FC<LogoProps> = ({ className }) => {
+  return <img src="./assets/images/logo.png" className={className} alt="logo" />
+}
+
+export default Logo

client/components/login/LoginModal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Tab } from "@headlessui/react"
 import { FC } from "react"
+import Logo from "../common/Logo"
 
 import LoginForm from "./LoginForm"
 import LoginModalTab from "./LoginModalTab"
@@ -18,12 +19,7 @@ const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
         <Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
           <div className="flex flex-row items-center justify-center">
             <Dialog.Title className="text-xl">
-              <img
+              <Logo className="inline w-12 h-12" /> Log in to twitch-clone
-                src="./assets/images/logo.png"
-                className="inline w-12 h-12"
-                alt="logo"
-              />{" "}
-              Log in to twitch-clone
             </Dialog.Title>
           </div>
           <Tab.Group defaultIndex={defaultPage}>

client/components/nav/NavBar.tsx

@@ -2,6 +2,7 @@ import { UserIcon } from "@heroicons/react/24/outline"
 import { FC, useState } from "react"
 
 import Button from "../common/Button"
+import Logo from "../common/Logo"
 import LoginModal from "../login/LoginModal"
 
 const NavBar: FC = () => {
@@ -24,11 +25,7 @@ const NavBar: FC = () => {
         <div>
           <ul className="flex flex-row space-x-8 items-center">
             <li>
-              <img
+              <Logo className="w-8 h-8" />
-                src="./assets/images/logo.png"
-                className="w-8 h-8"
-                alt="logo"
-              />
             </li>
           </ul>
         </div>