Merge pull request #96 from Ezekiel8807/dev

Author: antosan

public/img/logo.svg

@@ -0,0 +1,20 @@
+import React from 'react';
+import Image from 'next/image';
+import logo from '../../../public/img/logo.svg';
+
+type LogoType = {
+  size: number;
+};
+
+export default function Logo({ size }: LogoType) {
+  return (
+    <Image
+      src={logo}
+      alt="React developer community Kenya logo"
+      width={size}
+      height={size}
+      layout="fixed"
+      className="motion-safe:animate-spin"
+    />
+  );
+}

src/components/Logo/Logo.tsx

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

src/components/Logo/index.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
-import Image from 'next/image';
-import logo from '../../../public/reactdevske.svg';
+import Logo from '../Logo/Logo';
+
 import {
   ABOUT,
   CONTACT,
@@ -20,12 +20,7 @@ export default function Navbar() {
           <div>
             <Link href={HOME}>
               <a>
-                <Image
-                  src={logo}
-                  alt="reactdevske logo"
-                  width={137}
-                  height={60}
-                />
+                <Logo size={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'],
       },