feat: add favicon and add logo

package.json

@@ -15,6 +15,8 @@
  "@types/node": "20.2.3",
  "@types/react": "18.2.6",
  "@types/react-dom": "18.2.4",
+ "@zolplay/react": "^0.5.1",
+ "@zolplay/utils": "^1.3.4",
  "autoprefixer": "10.4.14",
  "eslint": "8.41.0",
  "eslint-config-next": "13.4.3",

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+ <msapplication>
+ <tile>
+ <square150x150logo src="/mstile-150x150.png"/>
+ <TileColor>#da532c</TileColor>
+ </tile>
+ </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+ "name": "",
+ "short_name": "",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}

src/app/layout.tsx

@@ -8,6 +8,7 @@ const inter = Inter({ subsets: ['latin'] })
 export const metadata = {
  title: 'Pong',
  description: '',
+ manifest: '/site.webmanifest',
 }
 
 export default function RootLayout({
@@ -29,10 +30,13 @@ export default function RootLayout({
  </Link>
  is an open source project by
  <Link
- className="ml-2 font-bold text-black/90 inline-flex items-center"
- href={'https://zolplay.com'}
+ className="ml-2 font-bold text-black/90 inline-flex items-center space-x-1"
+ href={
+ 'https://zolplay.com/?utm_source=pong&utm_medium=footer&utm_campaign=pong'
+ }
  >
- <LogoHelmet /> Zolplay
+ <LogoHelmet />
+ <span>Zolplay</span>
  </Link>
  .
  </div>

src/app/page.tsx

@@ -13,6 +13,8 @@ import {
 } from '@tremor/react'
 import { useState } from 'react'
 import { regions } from '~/helpers/regions'
+import Image from 'next/image'
+import pongLogo from './favicon.png'
 
 type JobDTO = { region: string; duration: number; statusCode: number }
 type Job = Omit<JobDTO, 'duration'> & { duration: number[]; avg: number }
@@ -93,7 +95,10 @@ export default function Home() {
  </div>
  </div> */}
  {/* <div className="h-96">map</div> */}
- <div className="mt-6 flex max-w-md justify-center mx-auto">
+ <div className="my-6 w-full flex justify-center items-center">
+ <Image src={pongLogo} alt="" className="w-16 h-16" />
+ </div>
+ <div className="flex max-w-md justify-center mx-auto">
  <TextInput
  type="text"
  required={false}

src/icons/index.tsx

@@ -1,71 +1,25 @@
-export function LogoHelmet() {
+import { clsxm } from '@zolplay/utils'
+
+export function LogoHelmet({ className }: { className?: string }) {
  return (
  <svg
- className={'h-4 w-4 stroke-current'}
- viewBox="0 0 26 26"
+ className={clsxm('h-4', className)}
+ viewBox="0 0 78 84"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  >
- <mask
- id="mask0_1409_2195"
- maskUnits="userSpaceOnUse"
- x="4"
- y="4"
- width="19"
- height="18"
- >
- <path
- d="M20.1033 9.05272C22.2817 12.826 20.9889 17.6508 17.2157 19.8293C13.4424 22.0078 8.61759 20.715 6.4391 16.9417C4.26062 13.1685 5.55343 8.34363 9.32668 6.16514C13.0999 3.98666 17.9248 5.27947 20.1033 9.05272Z"
- stroke="currentColor"
- strokeWidth="1.725"
- />
- </mask>
- <g mask="url(#mask0_1409_2195)">
- <mask id="path-2-inside-1_1409_2195" fill="currentColor">
- <path
- d="M9.58043 5.66662C7.46055 3.93262 4.52882 2.47148 1.14263 1.61466C-6.49301 -0.317652 -13.5547 1.56171 -14.6326 5.81259C-15.7067 10.0645 -10.3863 15.0764 -2.75069 17.0087C4.88495 18.941 11.9491 17.0602 13.0246 12.8108C13.6231 10.4435 12.2407 7.84218 9.58043 5.66662"
- fill="currentColor"
- />
- </mask>
- <path
- d="M9.58043 5.66662C7.46055 3.93262 4.52882 2.47148 1.14263 1.61466C-6.49301 -0.317652 -13.5547 1.56171 -14.6326 5.81259C-15.7067 10.0645 -10.3863 15.0764 -2.75069 17.0087C4.88495 18.941 11.9491 17.0602 13.0246 12.8108C13.6231 10.4435 12.2407 7.84218 9.58043 5.66662"
- fill="currentColor"
- />
- <path
- d="M1.14263 1.61466L1.07209 1.89337L1.0721 1.89338L1.14263 1.61466ZM-14.6326 5.81259L-14.9113 5.74192L-14.9114 5.74218L-14.6326 5.81259ZM13.0246 12.8108L13.3033 12.8813L13.3033 12.8813L13.0246 12.8108ZM9.76246 5.44408C7.6055 3.67976 4.63419 2.20158 1.21315 1.33594L1.0721 1.89338C4.42346 2.74138 7.31559 4.18548 9.3984 5.88915L9.76246 5.44408ZM1.21316 1.33595C-2.643 0.360088 -6.36784 0.342637 -9.27807 1.1171C-12.1777 1.88873 -14.3351 3.4697 -14.9113 5.74192L-14.354 5.88326C-13.8522 3.90459 -11.9398 2.42045 -9.1302 1.67276C-6.33119 0.927897 -2.70739 0.93692 1.07209 1.89337L1.21316 1.33595ZM-14.9114 5.74218C-15.4855 8.01502 -14.3391 10.4319 -12.155 12.4898C-9.9628 14.5552 -6.67737 16.3116 -2.82122 17.2874L-2.68016 16.73C-6.45965 15.7736 -9.65223 14.0578 -11.7606 12.0713C-13.8771 10.0772 -14.8538 7.86209 -14.3539 5.883L-14.9114 5.74218ZM-2.82122 17.2874C1.03496 18.2633 4.76042 18.2804 7.67094 17.5058C10.5708 16.734 12.7284 15.153 13.3033 12.8813L12.7459 12.7403C12.2453 14.7181 10.3331 16.2022 7.52305 16.9501C4.72372 17.6951 1.0993 17.6865 -2.68016 16.73L-2.82122 17.2874ZM13.3033 12.8813C13.9431 10.3508 12.4542 7.64535 9.76243 5.44406L9.39843 5.88918C12.0273 8.03901 13.3031 10.5362 12.7458 12.7403L13.3033 12.8813Z"
- fill="currentColor"
- mask="url(#path-2-inside-1_1409_2195)"
- />
- </g>
  <path
- d="M9.70811 8.60227C9.70811 8.60227 7.7954 9.59037 7.66961 12.1727"
+ d="M22.4523 24.335C22.4523 24.335 15.1706 28.932 15.5593 39.2664"
  stroke="currentColor"
- strokeWidth="0.575"
+ strokeWidth="2.3"
  strokeMiterlimit="10"
  strokeLinecap="round"
  />
  <path
- d="M11.6516 15.0446C9.60837 16.9912 6.31889 17.5034 6.31889 17.5034L6.32033 17.5059C6.09622 17.549 5.56552 17.6131 5.17811 17.6608C4.96711 17.6863 4.85656 17.9261 4.97289 18.1046C7.81582 22.5285 13.7945 23.8505 18.2785 20.8301C22.1734 18.2095 23.5625 13.0255 21.4997 8.80855C19.1356 3.97212 13.3365 2.12149 8.67263 4.4855C8.47019 4.5891 8.46003 4.87051 8.65134 4.98912C8.98568 5.19446 9.46143 5.52398 9.91298 5.94384C9.91298 5.94384 12.2543 7.9066 12.9744 10.3676"
- stroke="currentColor"
- strokeWidth="1.725"
- strokeMiterlimit="10"
- />
- <path
- d="M13.6645 10.7672C13.8607 9.94568 13.99 9.10488 14.0487 8.25294"
- stroke="currentColor"
- strokeWidth="0.8625"
- strokeMiterlimit="10"
- />
- <path
- d="M14.7514 6.95791C14.9602 7.31956 14.8363 7.782 14.4747 7.9908C14.113 8.1996 13.6506 8.07569 13.4418 7.71404C13.233 7.35239 13.3569 6.88995 13.7185 6.68115C14.0802 6.47236 14.5426 6.59627 14.7514 6.95791Z"
- stroke="currentColor"
- strokeWidth="0.8625"
- />
- <path
- d="M14.1462 15.0196C15.282 14.3638 15.6712 12.9114 15.0154 11.7756C14.3596 10.6398 12.9073 10.2506 11.7714 10.9064C10.6356 11.5621 10.2464 13.0145 10.9022 14.1503C11.558 15.2862 13.0104 15.6753 14.1462 15.0196Z"
- stroke="currentColor"
- strokeWidth="1.15"
- strokeMiterlimit="10"
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M17.3688 5.12085C14.2177 6.73344 14.0041 11.0951 16.8782 13.0357C4.19449 23.8143 -0.168096 41.7623 6.37291 57.2418C5.85324 57.3075 5.31064 57.3743 4.79115 57.4383L4.54768 57.4682L4.54051 57.4691C1.13838 57.8861 -0.585701 61.7156 1.24343 64.5403C13.6504 83.8386 39.734 89.6055 59.2913 76.4318C76.2993 64.9875 82.3557 42.383 73.3476 23.9682C63.0358 2.87356 37.7325 -5.20115 17.3806 5.11477L17.3688 5.12085ZM16.0021 55.0043C15.0408 55.3356 14.1335 55.6152 13.3098 55.8487C6.92036 42.426 10.8389 26.3816 22.4761 17.3787C22.6361 17.5274 22.817 17.6981 23.0157 17.8896C23.8726 18.7158 25.0499 19.9194 26.3106 21.4096C28.5197 24.021 30.8435 27.3479 32.2408 30.9436C31.5406 31.1859 30.8532 31.4979 30.1877 31.8822C24.5443 35.1404 22.6107 42.3565 25.8689 47.9999C26.1508 48.4881 26.4623 48.9485 26.7998 49.3802C23.4842 51.9905 19.4877 53.8032 16.0021 55.0043ZM32.718 53.4082C28.2025 57.5047 22.6065 60.0267 18.25 61.5279C17.0231 61.9506 15.8742 62.2992 14.8484 62.5834L13.9622 62.8016L10.1824 63.6618C9.92622 63.711 9.59494 63.7647 9.21928 63.8204C20.2093 77.4528 40.1931 80.9769 55.4365 70.709L55.438 70.7079C69.5882 61.1875 74.6437 42.3202 67.1495 27.0002L67.149 26.9993C59.1515 10.638 40.357 3.67133 24.1255 9.68459C24.8049 10.2187 25.5035 10.8071 26.1932 11.4451L26.264 11.506C26.347 11.5778 26.4633 11.6795 26.6089 11.8096C26.9 12.0698 27.3091 12.4445 27.8047 12.9222C28.7938 13.8758 30.1378 15.2502 31.5785 16.9532C33.8436 19.6308 36.4685 23.2613 38.2677 27.4555C38.4346 26.2828 38.567 25.1027 38.6641 23.9167C37.7951 23.521 37.0367 22.8603 36.5229 21.9703C35.2114 19.6986 35.9897 16.7939 38.2613 15.4824C40.533 14.1708 43.4377 14.9491 44.7493 17.2208C46.0608 19.4924 45.2825 22.3972 43.0108 23.7087C42.7193 23.8771 42.4173 24.0109 42.1096 24.1117C41.9114 26.5734 41.5697 29.0113 41.0902 31.4135C43.2055 32.4015 45.0495 34.0256 46.3054 36.2009C49.5636 41.8443 47.6301 49.0604 41.9867 52.3186C39.0629 54.0067 35.717 54.3012 32.718 53.4082ZM41.2858 20.7209C41.9074 20.3621 42.1203 19.5673 41.7615 18.9458C41.4027 18.3242 40.6079 18.1113 39.9863 18.4701C39.3648 18.829 39.1518 19.6237 39.5107 20.2453C39.8695 20.8668 40.6643 21.0798 41.2858 20.7209ZM29.8527 45.6999C27.8647 42.2567 29.0445 37.8538 32.4877 35.8659C35.9309 33.8779 40.3337 35.0577 42.3217 38.5009C44.3096 41.9441 43.1299 46.347 39.6867 48.3349C36.2435 50.3229 31.8406 49.1431 29.8527 45.6999Z"
+ fill="currentColor"
  />
  </svg>
  )