
# Error: listen EADDRINUSE: address already in use 0.0.0.0:XXXX

<Date date="01-02-2023" />

<GoogleAdsense />

When you try to start a server on a port that is already being used by another program, you will get the following error:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ yarn start
yarn run v1.22.19
$ next start
Error: listen EADDRINUSE: address already in use 0.0.0.0:3000
    at Server.setupListenHandle [as _listen2] (node:net:1432:16)
    at listenInCluster (node:net:1480:12)
    at doListen (node:net:1629:7)
    at processTicksAndRejections (node:internal/process/task_queues:84:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '0.0.0.0',
  port: 3000
}
```

</CH.Code>

## Find the process that is using the port

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ lsof -i :3000
COMMAND   PID                 USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    38091 xabier.lameirocardam   24u  IPv6 0xee02297dd086ebc1      0t0  TCP *:hbci (LISTEN)
```

</CH.Code>

## Kill the process

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ kill -9 38091
```

</CH.Code>



# Lighthouse report automation

<Date date="01-24-2023" />

<GoogleAdsense />

An easy way to have automated Lighthouse reports is using the Google tool called [Lighthouse CI](https://github.com/GoogleChrome/lighthouse 'Ligthouse repository') that allows us to pass the ligthouse test to a website and save the results on a server to compare them with the results of other executions.

You can see the improvements in performance, accessibility, SEO, etc. of your website. You can even add new rules with custom plugins, for example, to check that no html has been added that does not comply with the accessibility rules.

In a future post the idea is to create a lighthouse plugin from scratch to check some unwritten SEO "rules" in each of my posts.

To always have a current snapshot of the sitemap of my site I use playwright to check the sitemap, have the link tree and create a flowchart using Treant.js as you can see here [lighthouse report](https://lighthouse.xabierlameiro.com 'Lighthouse report example').

## How did I do it?

## 1. Get all urls from your sitemap

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript main.js
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://xabierlameiro.com/sitemap.xml');
// get site map inside a body
const sitemap = await page.$eval('body', (el) => el.innerHTML);
// get all urls inside sitemap
const urls = sitemap.match(/<loc>(.*?)<\/loc>/g).map((url) => url.replace(/<\/?loc>/g, ''));
// split urls in locales bearing in mind that 'en' is the default locale and it's not included in the url
let locales = urls.reduce((acc, url) => {
    let locale = url.split('/')[3];
    if (locale !== 'gl' && locale !== 'es') {
        locale = 'en';
    }
    if (!acc[locale]) {
        acc[locale] = [];
    }
    acc[locale].push(url);
    return acc;
}, {});

const index = locales.en.indexOf('https://xabierlameiro.com');
locales.en[index] = 'https://xabierlameiro.com/home';

await browser.close();
```

</CH.Code>

## 2. Run lighthouse on each of the urls and save the report.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript main.js
for (const url of locales[lang]) {
    // Report
    const result = await launchChromeAndRunLighthouse(
        url === 'https://xabierlameiro.com/home' ? 'https://xabierlameiro.com' : url,
        options
    );
    let fileName = url.split('/').pop();

    if (fileName === 'es' || fileName === 'gl') {
        fileName = 'home';
    }
    // write report in output folder
    fs.writeFileSync(lang === 'en' ? `output/${fileName}.html` : `output/${lang}/${fileName}.html`, result.report);
}
```

</CH.Code>

## 3. Create an organisation chart using Treant.js

> Example of the first level of the tree only

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript main.js
const chart = {
    chart: {
        container: '#OrganiseChart-big-commpany',
        levelSeparation: 40,
        siblingSeparation: 20,
        subTeeSeparation: 30,
        rootOrientation: 'NORTH',
        nodeAlign: 'BOTTOM',

        connectors: {
            type: 'step',
            style: {
                'stroke-width': 2,
            },
        },
        node: {
            HTMLclass: 'big-commpany',
        },
    },
};
```

</CH.Code>

> All the code is available in my [github](https://github.com/xabierlameiro/lighthouse-report/blob/master/main.js 'Link to github repository') repository

## Run your script and deploy the files to a static server like Vercel.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

node main.js

```

</CH.Code>

If you want to see the results just click on "Lightouse" in the top navigation bar.



# How document my react components with JSDoc

<Date date="01-16-2023" />

<GoogleAdsense />

## Introduction

It is necessary to have a good documentation about our components, so that other developers can understand how it works and how to use it. In this article we are going to see how we can document our react components with JSDoc and how to publish the documentation in our static site.

With a few simple steps, the jsdoc library and the use of good programming practices when working with react, we will be able to have a documentation of our components automatically. There are different plugins to upgrade our jsdoc and support react, but as React is still javascript and the components functions the default lib is more than enough.

The report we are going to generate is still an html file, so you can deploy it in any static site.

> If you use typescript you will need to install jsdoc-babel

## 1. Installation

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

yarn add jsdoc-babel -D

```

</CH.Code>

## 2. Configuration

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```json jsdoc.json
{
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc", "closure"]
    },
    "source": {
        "include": ["src/components/"],
        "includePattern": ".+\\.tsx$",
        "excludePattern": "(node_modules/|docs)"
    },
    "plugins": ["plugins/markdown", "node_modules/jsdoc-babel"],
    "templates": {
        "cleverLinks": false,
        "monospaceLinks": false
    },
    "babel": {
        "extensions": ["tsx"],
        "ignore": ["**/*.(test|spec).ts"],
        "babelrc": false,
        "presets": [["@babel/preset-env", { "targets": { "node": true } }], "@babel/preset-typescript"],
        "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
    },
    "opts": {
        "encoding": "utf8",
        "destination": "./public/docs/",
        "recurse": true,
        "verbose": true
    }
}
```

</CH.Code>

## 3. Customise your report

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript custom-docs.js mark=13

import { readFile, writeFile } from 'fs';
import glob from 'glob';

glob('public/docs/**/*.?(html|css)', function (err, files) {
    if (err) {
        console.log('err', err);
        return;
    }

    files.forEach((path) => {
        readFile(path, 'utf8', (err, data) => {
            ...code
        });
    });
});


```

</CH.Code>

> There you should find the code you need to modify your report and overwrite it.

## 4. Generate your report

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

yarn jsdoc -c jsdoc.json

```

</CH.Code>

To see an example of the output you can click above where it says Docs or via this [link](https://docs.xabierlameiro.com 'Link to my docs')



# Filter for positions, survey to check compatibility

<Date date="03-07-2023" />

<GoogleAdsense slot="6618374506" horizontal />

## Motivation

Believe it or not, due to the high demand for developers of all kinds in the market by companies, many recruiters and headhunters have become copy paste machines. I don't know the number or the daily amount of messages they send to all the profiles in their network that match the new position they have available, but I would bet they are not few. And it's not that I don't like them sending me messages, but I would like them to send me messages that really interest me and make me think that they have seen my profile, my code or some of my work and that they really want to hire me for my skills.

This is not usually the case, many people use programs to automate the process of searching for profiles such as [Hiretual](https://hiretual.com/ 'Hiretual') or [Jobvite](https://www.jobvite.com/ 'Jobvite'), they send messages to all users "that match" and sometimes this does not work very well. Since your profile clearly says Frontend Developer, your experience says the same... but, they have a Java position with awesome microservices for you.

Other times they screw up and send you a message with the name of your teammate:

<Image src="/coincidence.png" alt="Coincidence" width="1024" height="726" layout="responsive" />

## The idea

How many times have you had a call with questions like:

-   Why are you looking for a change?
-   Do you know the SOLID principles?
-   How many years would you say you've been working with React ? How about Typescript ?
-   Do you know what continuous integration is?

> To be offered a lower salary than you have, or to be asked for your CV and never be told anything again.

How many times bro ?

**_The idea is to screen you before you get screened._**

## Solution

10 simple questions about points that you consider important, requirements, values... or basically whatever you want and if they are fulfilled, the recruiter will get contact information to be able to go into detail about the whole process.

It's a win win, we both save time, don't we?

## Code

With a container or page component, a couple of buttons, radiobuttons and an array of objects you have more than enough, in my case:

I have my page:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx survey.tsx
import Dialog from '@/components/Dialog';
import styles from '@/styles/survey.module.css';
import ControlButtons from '@/components/ControlButtons';
import Confetti from 'react-confetti';
import SEO from '@/components/SEO';
import useWindowResize from '@/hooks/useWidowResize';
import useSurvey from '@/hooks/useSurvey';
import NavigationArrows from '@/components/NavigationArrows';

const Survey = () => {
    const { width, height } = useWindowResize();
    const {
        questions,
        answers,
        surveySuccess,
        totalQuestions,
        currentQuestionNum,
        questionsDoneNum,
        handleNextQuestion,
        handlePreviousQuestion,
        handleAnswerOptionClick,
    } = useSurvey();

    return (
        <>
            <Confetti width={width} height={height} numberOfPieces={100} run={surveySuccess} />
            <SEO
                noimage={false}
                meta={{
                    title: 'Find out if I match the position in 1 minute',
                    description: 'Click to continue',
                    noindex: true,
                }}
            />
            <Dialog
                open
                modalMode
                withPadding
                header={
                    <div className={styles.header}>
                        <ControlButtons />
                        <span>
                            {currentQuestionNum > 0 && currentQuestionNum < 11 && (
                                <span>
                                    {currentQuestionNum} / {totalQuestions - 2}
                                </span>
                            )}
                        </span>
                    </div>
                }
                body={
                    // TODO: Move to a component
                    <div className={styles.container}>
                        {questions.map(
                            (question: any, index: number) =>
                                currentQuestionNum === index && (
                                    <div key={index} className={styles.question}>
                                        <div
                                            dangerouslySetInnerHTML={{ __html: question.questionHtml }}
                                            className={styles.questionHtml}
                                        />
                                        {question.answerOptions?.map((answerOption: any) => (
                                            <label htmlFor={answerOption.answerText} key={answerOption.answerText}>
                                                <input
                                                    onChange={(e) =>
                                                        handleAnswerOptionClick({
                                                            question: question.questionText,
                                                            answer: e.target.value,
                                                            isCorrect: answerOption.isCorrect,
                                                            questionNum: index,
                                                        })
                                                    }
                                                    type="radio"
                                                    id={answerOption.answerText}
                                                    name={String(index)}
                                                    value={answerOption.answerText}
                                                    checked={answers[index]?.answer === answerOption.answerText}
                                                />
                                                {answerOption.answerText}
                                            </label>
                                        ))}
                                    </div>
                                )
                        )}
                    </div>
                }
                footer={
                    <div className={styles.buttons}>
                        <NavigationArrows
                            hidden={currentQuestionNum < 1 || currentQuestionNum > 10}
                            disabledLeft={currentQuestionNum < 2}
                            disabledRight={questionsDoneNum < currentQuestionNum}
                            onClickLeft={handlePreviousQuestion}
                            onClickRight={handleNextQuestion}
                        />
                    </div>
                }
            />
        </>
    );
};

export default Survey;
```

</CH.Code>

My hook with logic

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts useSurvey.ts
import { useRouter } from 'next/router';
import { useReducer, useEffect, useRef } from 'react';

const initialState = {
    currentQuestion: 0,
    questionsDone: 0,
    success: false,
    answers: [],
};

const reducer = (state: any, action: any) => {
    ...ya sabes como funciona un switch no?
};

const useSurvey = () => {
    const { query } = useRouter();
    const { name = '&#128075;' } = query;
    const emailRef = useRef<boolean>(false);

    const [state, dispatch] = useReducer(reducer, initialState);

    // Prepotency here!
    const questions = [
        {
            questionText: 'Which came first, the chicken or the egg?
            questionHtml: `<h2>Which came first the chicken or the egg?</h2>`,
            answerOptions: [{ answerText: 'Egg', isCorrect: true, }, { answerText: 'Chicken', isCorrect: false }],
        },
    ];

    useEffect(() => {
        if (state.currentQuestion === questions.length - 1 && !emailRef.current) {
            (async () => {
                try {
                    await fetch('/api/email', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            subject: `Job survey from ${name} - ${new Date().toLocaleString()}`,
                            message: `
                                    <h1> ${name} </h1>
                                    <code> ${navigator.userAgent} </code>
                                    <ol>
                                        ${state.answers.map(
                                            (answer: any) =>
                                                `<li> ${answer.question} : ${answer.answer} - ${
                                                    answer.isCorrect ? '✅' : '🚫'
                                                } </li>`
                                        )}
                                    </ol>
                                    `.replace(/,/g, ''),
                        }),
                    });
                    emailRef.current = true;
                } catch (e) {
                    console.log(e);
                }
            })();
        }
    }, [state, name, questions.length]);

    const handlePreviousQuestion = () => {
        if (state.currentQuestion > 1) dispatch({ type: 'PREVIOUS_QUESTION' });
    };

    const handleNextQuestion = () => {
        if (state.currentQuestion != 0 && state.questionsDone >= state.currentQuestion)
            dispatch({ type: 'NEXT_QUESTION' });
    };

    const handleAnswerOptionClick = (payload: {
        question: string;
        answer: string;
        isCorrect: boolean;
        questionNum: number;
    }) => dispatch({ type: 'ADD_ANSWER', payload });

    return {
        questions,
        answers: state.answers,
        surveySuccess: state.success,
        currentQuestionNum: state.currentQuestion,
        questionsDoneNum: state.questionsDone,
        totalQuestions: questions.length,
        handleAnswerOptionClick,
        handleNextQuestion,
        handlePreviousQuestion,
    };
};

export default useSurvey;
```

</CH.Code>

My endpoint

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts email.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import nodemailer from 'nodemailer';

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
    const transporter = nodemailer.createTransport({
        service: process.env.EMAIL_HOST,
        auth: {
            user: process.env.EMAIL,
            pass: process.env.EMAIL_PASSWORD,
        },
    });

    const { subject, message } = req.body;

    const mailOptions = {
        from: process.env.EMAIL,
        to: process.env.EMAIL,
        subject: subject,
        html: message,
    };

    try {
        await transporter.sendMail(mailOptions);
        res.status(200).json({ success: true });
    } catch (error) {
        res.status(500).json({ success: error });
    }
}
```

</CH.Code>

## Result

<Image src="/survey-success.png" alt="Success case" width="544" height="452" />
<Image src="/survey-email.png" alt="Mail with answers" width="822" height="491" />

Try it yourself: [Link to result](https://xabierlameiro.com/survey?name=Lector/a 'Link to survey')



# Counter for github stars repository

<Date date="01-11-2023" />

<GoogleAdsense />

This is a simple counter for github stars repository. You can use it in your website or blog.

How to use it? Just fetch the api and you will get the number of stars.

## 1. Create a github token

> Please use the environment variable to store the token.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts github.ts
const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
```

</CH.Code>

## 2. Write the GET method

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts github.ts
const REPOSITORY = {
    owner: 'xabierlameiro',
    repo: 'the-last-dance',
};

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    try {
        const {
            data: { stargazers_count },
        } = await octokit.rest.repos.get(REPOSITORY);
        res.status(200).json(stargazers_count);
    } catch (err: Error) {
        res.status(500).json({ statusCode: 500, message: err.message });
    }
}
```

</CH.Code>

## 3. Use it in your component

Not is necessary to use the `useEffect` hook for fetch information. You can use the `getStaticProps` or `getServerSideProps` hooks.
In my case, I use this hook because the blog is a static site and the endpoint is not available in the build time.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx StarCounter.tsx
const StarCounter = () => {
    const [stars, setStars] = React.useState(0);

    React.useEffect(() => {
        (async () => {
            try {
                const stars = await fetch('/api/github').then((res) => res.json());
                setStars(stars);
            } catch (e) {
                setStars(-1);
            }
        })();
    }, []);

    if (stars === -2)
        return (
            <Container>
                <AiFillStar className={styles.starred} title="Starred" />
            </Container>
        );

    if (stars === -1)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error endpoint" />
            </Container>
        );

    if (stars === 0)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading stars" />
            </Container>
        );

    return (
        <Container>
            <span>{stars}</span>
        </Container>
    );
};

export default StarCounter;
```

</CH.Code>

Right now you only have to look up to see the result, the counter is highlighted with a yellow star.

Please if you think this content has helped you or you like it, please give me your star. <span className="emoji">🤩</span>



# Make a views counter with google analytics

<Date date="01-10-2023" />

<GoogleAdsense />

Is not necessary make a complex system to count the views of your blog. You can use google analytics to do it, you dont need persiste the data in a database.

Here we dont explain how to create a Google analytics account, you can follow this [tutorial](https://support.google.com/analytics/answer/1008015?hl=en 'Google analytics link') to do it.

## 1. Create a endpoint to get the data using the class BetaAnalyticsDataClient

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts .analytics.ts
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
    const { query } = req;
    const { slug = '/' } = query;

    const analyticsDataClient = new BetaAnalyticsDataClient({
        credentials: {
            client_email: process.env.ANALYTICS_CLIENT_EMAIL,
            private_key: process.env.ANALYTICS_PRIVATE_KEY?.replace(/\\n/g, '\n'),
        },
        projectId: process.env.ANALYTICS_PROJECT_ID,
    });

    const [response] = await analyticsDataClient.runReport({
        property: `properties/348472560`,
        dateRanges: [
            {
                startDate: '2023-01-01',
                endDate: 'today',
            },
        ],
        dimensions: [
            {
                name: 'date',
            },
            {
                name: 'pagePath',
            },
        ],
        metrics: [
            {
                name: 'screenPageViews',
            },
        ],
        dimensionFilter: {
            filter: {
                fieldName: 'pagePath',
                stringFilter: {
                    matchType: 'EXACT',
                    value: slug.toString(),
                },
            },
        },
        orderBys: [
            {
                dimension: {
                    dimensionName: 'date',
                },
            },
        ],
    });

    if (!response || !response.rows) {
        res.status(500).json({ error: 'Error while parsing analytics data' });
        return;
    }

    let total = response.rows.reduce((prev: Object, curr: Object) => {
        return prev + parseInt(curr.metricValues[0].value, 0);
    }, 0);

    try {
        res.status(200).json({ total });
    } catch (err: Error) {
        res.status(500).json({ error: err });
    }
}
```

</CH.Code>

## 2. Create a component to show the data

> You can create a component to consume the api from the client using useEffect or from a page retrieving the data from the server. It is your choice

In my case I am going to make 3 different renderings, one for when it is loading, one for the error and the last one for the information.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx ViewCounter.tsx mark=29,36,43
type Props = {
    children?: React.ReactNode;
};

const Container = ({ children }: Props) => {
    return (
        <div className={styles.views} title="Number of views in this post from Google analytics">
            <BsBook />
            {children}
        </div>
    );
};

const StarCounter = () => {
    const [views, setViews] = React.useState(-1);
    const { asPath } = useRouter();

    React.useEffect(() => {
        (async () => {
            try {
                const { total } = await fetch(`/api/analytics?slug=${asPath}`).then((res) => res.json());
                setViews(total);
            } catch (e) {
                setViews(-2);
            }
        })();
    }, [asPath]);

    if (views === -2)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error on endpoint" />
            </Container>
        );

    if (views === -1)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading views" />
            </Container>
        );

    return (
        <Container>
            <span>{views}</span>
        </Container>
    );
};

export default StarCounter;
```

</CH.Code>

## 3. Include your component wherever you want to display it

To see the result of the above code just look at the top of the page and you will see a book icon with a counter on the right hand side.

You can see the complete code in my repository if you need it, and if you find it useful or like it you can give me a star



# Uncaught Error: Minified React error

<Date date="01-05-2023" />

<GoogleAdsense />

When using React, you may encounter the following error: `Uncaught Error: Minified React error visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`
This error is caused by the use of dates in the application. The error appears when the browser date and time are not in the same format as the date and time of the server.

How I solved the problem?

## Code with the error

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx DateAndHour.tsx mark=18,19,20,21
const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });

    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className={styles.dateAndHour}>
            <span>{day}</span>
            <span>{dayNumber}</span>
            <span>{month}</span>
            <span>{hour}</span>
        </div>
    );
};
```

</CH.Code>

## Code without the error

Use the `suppressHydrationWarning` attribute to avoid the error. This attribute is used to avoid the error when the server and the client render different content.
More information about this attribute can be found in the [React documentation](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning 'React Documentation').

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx DateAndHour.tsx mark=18,19,20,21
const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });

    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className={styles.dateAndHour}>
            <span suppressHydrationWarning>{day}</span>
            <span suppressHydrationWarning>{dayNumber}</span>
            <span suppressHydrationWarning>{month}</span>
            <span suppressHydrationWarning>{hour}</span>
        </div>
    );
};
```

</CH.Code>
