added logo component and make logo spin

Author: Ezekiel8807

public/img/logo.png

@@ -0,0 +1,16 @@
+import React from 'react';
+import Image from 'next/image';
+import logo from '../../../public/img/logo.png';
+
+type logoType = {
+    logoSize: number;
+}
+
+export default function Logo({logoSize}:logoType ) {
+
+    return (
+        <div className='animate-spin'>
+            <Image src={logo} alt="logo" width ={logoSize} />
+        </div>
+    );
+}

src/components/Logo/Logo.tsx

@@ -0,0 +1 @@
+export { default } from './Logo';

src/components/Logo/index.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
-import Image from 'next/image';
-import logo from '../../../public/reactdevske.svg';
+// import Image from 'next/image';
+// import logo from '../../../public/reactdevske.svg';
+import Logo from '../Logo/Logo';
+
 import {
   ABOUT,
   CONTACT,
@@ -13,19 +15,22 @@ import {
 } from '../../util/routeConstants';
 
 export default function Navbar() {
+ 
   return (
     <>
       <header className="px-[181px] w-full shadow-md bg-white">
         <nav className="nav py-4 flex flex-col lg:flex-row justify-between items-center">
           <div>
             <Link href={HOME}>
               <a>
-                <Image
+                {/* <Image
                   src={logo}
                   alt="reactdevske logo"
                   width={137}
                   height={60}
-                />
+                /> */}
+
+                <Logo logoSize= {60} />
               </a>
             </Link>
           </div>

src/components/Navbar/Navbar.tsx

@@ -3,6 +3,9 @@ module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      animation: {
+        'spin': 'spin 10s linear infinite',
+      },
       fontFamily: {
         montserrat: ['Montserrat', 'sans-serif'],
       },