examples.waku.org/examples/tictactoe/components/Header.js

import Link from 'next/link'
import React from 'react'

export default function Header() {
    return (
        <div className='flex p-5 justify-between items-center'>
            <Link href="/">
                <div id='logo'>
                    <svg width="60" height="60" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#ffffff" d="M169.344 35.844A9.5 9.5 0 0 0 160 45.47v117.343H45.5a9.5 9.5 0 1 0 0 19H160v151H45.5a9.5 9.5 0 1 0 0 19H160V466.5a9.5 9.5 0 1 0 19 0V351.812h151V466.5a9.5 9.5 0 1 0 19 0V351.812h117.406a9.5 9.5 0 1 0 0-19H349v-151h115.563a9.5 9.5 0 1 0 0-19H349V45.47a9.5 9.5 0 0 0-9.656-9.626A9.5 9.5 0 0 0 330 45.47v117.343H179V45.47a9.5 9.5 0 0 0-9.656-9.626zM86 35.97c-13.07 0-25.77 4.94-35.156 13.843C41.458 58.715 36 71.06 36 83.874s5.458 25.16 14.844 34.063C60.23 126.84 72.93 131.81 86 131.81s25.77-4.97 35.156-13.875C130.542 109.034 136 96.69 136 83.876c0-12.814-5.458-25.16-14.844-34.063C111.77 40.91 99.07 35.97 86 35.97zm170 0c-13.07 0-25.77 4.94-35.156 13.843C211.458 58.715 206 71.06 206 83.874s5.458 25.16 14.844 34.063C230.23 126.84 242.93 131.81 256 131.81s25.77-4.97 35.156-13.875C300.542 109.034 306 96.69 306 83.876c0-12.814-5.458-25.16-14.844-34.063C281.77 40.91 269.07 35.97 256 35.97zm138.844 9.218A9.5 9.5 0 0 0 388.25 61.5l22.375 22.375L389 105.5a9.502 9.502 0 1 0 13.438 13.438l21.625-21.626l22.375 22.407a9.502 9.502 0 1 0 13.437-13.44L437.5 83.876l21.625-21.625a9.5 9.5 0 0 0-6.906-16.313a9.5 9.5 0 0 0-6.533 2.876l-21.625 21.624l-22.375-22.374a9.5 9.5 0 0 0-6.843-2.876zM86 54.968c8.137 0 16.485 3.337 22.094 8.657c5.608 5.32 8.937 12.95 8.937 20.25c0 7.3-3.328 14.96-8.936 20.28c-5.61 5.32-13.957 8.626-22.094 8.626s-16.485-3.304-22.094-8.624c-5.608-5.32-8.937-12.98-8.937-20.28c0-7.302 3.328-14.93 8.936-20.25c5.61-5.32 13.957-8.657 22.094-8.657zm170 0c8.137 0 16.485 3.337 22.094 8.657c5.608 5.32 8.937 12.95 8.937 20.25c0 7.3-3.328 14.96-8.936 20.28c-5.61 5.32-13.957 8.626-22.094 8.626s-16.485-3.304-22.094-8.624c-5.608-5.32-8.937-12.98-8.937-20.28c0-7.302 3.328-14.93 8.936-20.25c5.61-5.32 13.957-8.657 22.094-8.657zm-77 126.844h151v151H179v-151zm245.063 26.282c-13.07 0-25.77 4.94-35.157 13.844c-9.386 8.903-14.844 21.248-14.844 34.062c0 12.814 5.458 25.16 14.844 34.063c9.386 8.903 22.087 13.875 35.156 13.875c13.07 0 25.77-4.972 35.157-13.875c9.385-8.904 14.842-21.25 14.842-34.063c0-12.814-5.457-25.16-14.843-34.063c-9.387-8.903-22.088-13.843-35.158-13.843zm-197.25 9.22a9.5 9.5 0 0 0-6.625 16.31L242.563 256l-21.625 21.625a9.502 9.502 0 1 0 13.437 13.438L256 269.438l22.375 22.375a9.502 9.502 0 1 0 13.438-13.438L269.438 256l21.625-21.625a9.5 9.5 0 0 0-6.907-16.313a9.5 9.5 0 0 0-6.53 2.875L256 242.563l-22.375-22.375a9.5 9.5 0 0 0-6.813-2.875zm197.25 9.78c8.136 0 16.485 3.305 22.093 8.625c5.61 5.32 8.938 12.98 8.938 20.28c0 7.3-3.33 14.93-8.938 20.25c-5.608 5.32-13.957 8.656-22.094 8.656c-8.136 0-16.485-3.336-22.093-8.656c-5.61-5.32-8.94-12.95-8.94-20.25c0-7.3 3.33-14.96 8.94-20.28c5.607-5.32 13.956-8.626 22.092-8.626zM256 380.156c-13.07 0-25.77 4.94-35.156 13.844c-9.386 8.903-14.844 21.25-14.844 34.063c0 12.813 5.458 25.19 14.844 34.093C230.23 471.06 242.93 476.03 256 476.03s25.77-4.97 35.156-13.874c9.386-8.903 14.844-21.28 14.844-34.094c0-12.813-5.458-25.16-14.844-34.062c-9.386-8.903-22.087-13.844-35.156-13.844zm-199.188 9.22a9.5 9.5 0 0 0-6.624 16.312l22.374 22.406L50.94 449.72a9.502 9.502 0 1 0 13.437 13.436L86 441.53l22.375 22.376a9.502 9.502 0 1 0 13.438-13.437l-22.376-22.376l21.626-21.625a9.5 9.5 0 0 0-6.907-16.314a9.5 9.5 0 0 0-6.53 2.875L86 414.657L63.625 392.25a9.5 9.5 0 0 0-6.813-2.875zM256 399.187c8.137 0 16.485 3.304 22.094 8.625c5.608 5.32 8.937 12.948 8.937 20.25c0 7.3-3.328 14.96-8.936 20.28c-5.61 5.32-13.957 8.626-22.094 8.626s-16.485-3.306-22.094-8.626c-5.608-5.32-8.937-12.98-8.937-20.28c0-7.303 3.328-14.93 8.936-20.252c5.61-5.32 13.957-8.625 22.094-8.625z" />
                    </svg>
                </div>
            </Link>
            <a href='https://github.com/hackyguru/tictactoe' className='text-white flex space-x-3 items-center cursor-pointer'>
                <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z" />
                </svg>
                <p>GitHub</p>
            </a>
        </div>
    )
}