feat: add logo image instead of string logo

components/Navbar.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { useEffect, useState } from 'react'
-import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
+import Logo from 'public/logo-transparent.png'
+import { useEffect, useState } from 'react'
 
-import { redirectTo } from '@utils/Tools'
-import Fetch from '@utils/Fetch'
 import { Nullable, User, UserCache } from '@types'
+import Fetch from '@utils/Fetch'
+import { redirectTo } from '@utils/Tools'
 
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 
@@ -60,13 +62,19 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 								dev ? 'dark:text-koreanbots-blue ' : ''
 							}logofont text-large whitespace-no-wrap mr-4 inline-block py-2 font-semibold uppercase leading-relaxed hover:text-gray-300 sm:text-2xl`}
 						>
-							{dev ? (
+              {dev ? (
-								<>
+              <>
-									<i className='fas fa-tools mr-1' /> DEVELOPERS
+                <i className='fas fa-tools mr-1' /> DEVELOPERS
-								</>
+              </>
-							) : (
+              ) : (
-								'KOREANLIST'
+                <Image
-							)}
+                  src={Logo}
+                  alt='Koreanbots'
+                  width={100}
+                  height={100}
+                  className='h-10 w-10'
+                />
+              )}
 						</Link>
 						<button
 							className='block cursor-pointer rounded border border-solid border-transparent bg-transparent px-3 py-1 text-xl leading-none outline-none focus:outline-none dark:text-gray-200 lg:hidden'

pages/_app.tsx

@@ -1,28 +1,28 @@
-import Head from 'next/head'
+import { DefaultSeo } from 'next-seo'
 import App, { AppContext, AppProps } from 'next/app'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
 import { Router, useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { DefaultSeo } from 'next-seo'
-import { GlobalHotKeys } from 'react-hotkeys'
 import NProgress from 'nprogress'
-import Package from '../package.json'
+import { useEffect, useState } from 'react'
 import ReactGA from 'react-ga'
+import { GlobalHotKeys } from 'react-hotkeys'
+import Package from '../package.json'
 
+import { Theme } from '@types'
+import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
 import Logger from '@utils/Logger'
 import { handlePWA, parseCookie, parseDockerhubTag, systemTheme } from '@utils/Tools'
-import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
-import { Theme } from '@types'
 
 const Footer = dynamic(() => import('@components/Footer'))
 const Navbar = dynamic(() => import('@components/Navbar'))
 const Modal = dynamic(() => import('@components/Modal'))
 
+import PlatformDisplay from '@components/PlatformDisplay'
+import '@fortawesome/fontawesome-free/css/all.css'
+import 'rc-tooltip/assets/bootstrap_white.css'
 import '../app.css'
 import '../github-markdown.css'
-import 'rc-tooltip/assets/bootstrap_white.css'
-import '@fortawesome/fontawesome-free/css/all.css'
-import PlatformDisplay from '@components/PlatformDisplay'
 
 // Progress Bar
 NProgress.configure({ showSpinner: false })