Close warning message from gibberish search

[palina-pauliuchenka]

edit warning message

[palina-pauliuchenka]

here is the design I came up with you can change it if you want, I forgot to commit it. Leaving here so it makes sense what I mean by closing warning message

if (articles === undefined || articles.length === 0)
    return (
      <div className={'mt-12 w-full text-center'}>
        {/*  WARNING MESSAGE  */}
        <div
          className="relative mx-auto max-w-3xl rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
          role="alert"
        >
          <p className="block sm:inline">
            <strong className="font-bold">Holy smokes!</strong> Something
            seriously bad happened.
          </p>
          <p>
            Unfortunately we were not able to find anything regarding your
            search!
          </p>
          <span className="absolute bottom-0 right-0 top-0 px-4 py-3">
            <svg
              className="h-6 w-6 fill-current text-red-500"
              role="button"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
            >
              <title>Close</title>
              <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
          </span>
        </div>
        <h2 className={'my-6 font-gruppo text-2xl font-black capitalize'}>
          Try searching again!
        </h2>
        <Search />
      </div>
    )

[SamridhyaM]

Hey I just had a question is the "gibberish" like any special characters or hits that dont return any news articles?

[palina-pauliuchenka]

thats gibberish gdfljhatoyureqwbdahgfpyurewbgfwvpuyeorwbgf

all the functionality for that is done.

I even provided the code how you must modify a warning message up here so you can complete your task that states - "Close warning message from gibberish search"