node js timed out after 30000 ms while waiting for the WS endpoint URL to appear in stdout

I am using handlebars and puppeteer lib for generating pdfs . For handlebar input i am creating a array of data. Now i am looping through that data array and passing each record to puppeteer lib to generate pdf. I have large set of data . When loop is running entire application is hanging and it gives me the below error

How to loop data with puppeeteer so tht i can generate multiple pdf file base64 string

timed out after 30000 ms while waiting for the WS endpoint URL to appear in stdout! at ChromeLauncher.launch

below is the code

async function createPDF() {
    const insertquery = ('INSERT INTO base64staging(filename, base64str,testid) VALUES($1, $2, $3)');
    const queryPrommises1 = [];
    // const client = await pool.connect()
    const result = await testres1(pool) // This returns large set of data (10k to 20k records)
    console.log('result ' + result)
    var promiseresult = []
    if (result !== null && result !== undefined) {
        JSON.parse(result).forEach(async res => {
            const res1 = await pdfrouter(res)
            queryPrommises1.push(pool.query(insertquery, [res.employeeid.toString(), res1, res.testid]))
            const result1 = await Promise.allSettled(queryPrommises1);
            console.log(result1.length)
             result1.forEach(res => {
                 if (res.status === 'fulfilled') {
                     promiseresult.push(res.value)
                 }
            })
        })
        return promiseresult
    }
}

pdf file creation function

const pdfrouter = async (data) => {
    process.setMaxListeners(Infinity)
    try {
        const templateHtml = fs.readFileSync(
            join(process.cwd(), "./index.html"),
            "utf8"
        );

        var template = Handlebars.compile(templateHtml);
        var html = encodeURIComponent(template(data));
        var milis = new Date();
        milis = milis.getTime();

        const options = {
            width: '1230px',
            headerTemplate: "<p></p>",
            footerTemplate: "<p></p>",
            displayHeaderFooter: false,
            margin: {
                top: "10px",
                bottom: "30px"
            },
            printBackground: true,
        };

        const browser = await launch({
            args: ['--no-sandbox'],
            headless: "new"
        });
        var page = await browser.newPage();
        console.log('Page opened')
        await page.goto(`data:text/html;charset=UTF-8,${html}`, {
            waitUntil: 'networkidle0'
        });
        let pdfBuffer = await page.pdf(options);
        await browser.close();
        console.log("Done: invoice.pdf is created!");
        return pdfBuffer.toString('base64')

    } catch (err) {
        console.log("ERROR:", err);
        return err
    }

}

export { pdfrouter }

Set timeout on npm clickhouse query

In the following code, how to set timeout to query execution?
I’ve tried this timeout property but it’s not working.

const results = await clickhouse.query(query, {
  timeout: 50,
}).toPromise();

i’ve tried config timeout in this .query function.
in the connection configuration i’ve tried session_timeout in the config object and timeout in the reqParams object but my in the query i can’t make configuration works.

React Native: Issue with FlatList – renderItem Not Updating Correctly

I’m currently working on a React Native project and facing a new issue with the FlatList component. Despite updating the data and state correctly, the renderItem function does not seem to be updating the items as expected. Here’s a simplified version of my code:

import React, { useState } from 'react';
import { View, FlatList, Text, Button } from 'react-native';

export default function MyComponent() {
  const [data, setData] = useState([1, 2, 3]);

  const handleAddItem = () => {
    const newItem = Math.floor(Math.random() * 100);
    setData([...data, newItem]);
  };

  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={(item) => item.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item}</Text>
          </View>
        )}
      />
      <Button title="Add Item" onPress={handleAddItem} />
    </View>
  );
}

Even though the state updates correctly with a new item, the FlatList does not seem to render the added item. I’ve tried using the forceUpdate method, but it doesn’t resolve the issue.

Can someone please provide fresh insights or alternative approaches to troubleshoot and resolve this new problem with the FlatList not updating items correctly when the data changes? Any help would be greatly appreciated. Thank you!

Request from another origin blocked policy prevents reading remote resource reason missing CORS header ‘Access-Control-Allow-Origin’. Status code: 204 [duplicate]

I have a problem with a request in mockAPI and i cannot get the response of the server.

const ShowMovies = () => {
  const url = fetch('https://mockapi.io/movies', {
    method: 'GET',
    headers: {
      'content-type':'application/json'},
    }).then(res => {
    if (res.ok) {
      return res.json();
    }
    }).then(tasks => {
      tasks.map((key,value) =>{
        return(
          <div>
            <ul>
              <li key={key.id}>{value}</li>
            </ul>
          </div>
        )

      })

    }).catch(error => {
      return(
        <div>
          <h2>{error}</h2>
        </div>
      )

    });
  url.headers.push()
}    

export default ShowMovies

the page give me this message:

Request from another origin blocked policy prevents reading remote resource reason missing CORS header ‘Access-Control-Allow-Origin’. Status code: 204

What is the problem and how can i resolve this?

Nuxt 3 App Freezes Windows on 429 Response from Server – Need Help Resolving

I’m encountering a critical issue with my Nuxt 3 application that has been causing my Windows environment to freeze whenever the server responds with a 429 status code. To elaborate, when the server returns a 429 (Too Many Requests) response, the entire window becomes unresponsive, and I have to force-close it. Subsequently, reopening a new tab seems to be the only way to resume normal functioning.

Here are some additional details about my setup:

Nuxt 3 version: ^3.9.1
Server response code causing the issue: 429 (Too Many Requests)

I’ve been able to replicate this bug in both windows and macos, also it happens in any browser.

I have this Middleware for auth and this other function is my error handler

export default defineNuxtRouteMiddleware(to => {
   const codeKey: string = to.query.codeKey?.toString().trim() ?? ''
   const is_codekey_in_url: boolean = codeKey !== ''

   const store_user = useStoreUser(useNuxtApp().$pinia)
   const is_codekey_not_setted: boolean = store_user.auth_header.codeKey === ''
   const is_not_logging_in: boolean = to.path !== '/login'

   if (is_codekey_in_url) {
      const is_impersonate: boolean = Boolean(to.query.impersonate)
      store_user.setCodekey(codeKey, is_impersonate)
      return navigateTo(to.path)
   } else if (is_codekey_not_setted && is_not_logging_in) {
      return store_user.navigateLogin()
   }
})
function handleRequestError(
      error: Error | unknown,
      message: string,
      is_toast_enabled: boolean = true,
   ): void {
      if (error instanceof Error) {
         if ('statusCode' in error) {
            if (error.statusCode !== 401) {
               if (is_toast_enabled) {
                  toast.add({
                     detail: `${message} Try again or contact support.`,
                     life: 3000,
                     severity: 'error',
                     summary: 'Error',
                  })
               } else {
                  console.log('error', error, ' ', message)
               }
            } else {
               store_user.clearCodekey()
               if (is_toast_enabled) {
                  toast.add({
                     detail: 'Autentication failed. Redirecting to login...',
                     life: 3000,
                     severity: 'error',
                     summary: 'Error',
                  })
                  setTimeout(() => store_user.navigateLogin(), 4000)
               } else {
                  store_user.navigateLogin()
               }
            }
         }
      }

Transitioning form Rollup to Vite

I have the following rollup config:

export default {
  input: 'src/index.ts',
  output: [
    {
      file: path.resolve(__dirname, main),
      format: 'cjs',
      sourcemap: true,
      interop: 'auto',
    },
    {
      file: path.resolve(__dirname, module),
      format: 'es',
      sourcemap: true,
      interop: 'auto',
    },
  ],
  plugins: [
    peerDepsExternal(),
    url(),
    svgr({
      exclude: ['**/spinner.svg', '**/unmissable_spinner.svg'],
    }),
    resolve({ extensions }),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      extensions,
    }),
    postcss(),
    sizes(),
    copy({
      targets: [
        { src: './register.css', dest: './build' },
        { src: './fonts/**/*', dest: './build' },
      ],
      flatten: false,
    }),
  ],
};

and I am trying to transition to Vite, so far I have :

const config = {
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'YourLibraryName', // Replace with your library name
      fileName: (format) => `your-library-name.${format}.js`, // Replace with your library name
    },
    rollupOptions: {
      external: [],
      output: {
        sourcemap: true,
        interop: 'auto',
      },
    },
  },
  plugins: [
    peerDepsExternal(),
    url(),
    svgr({
      exclude: ['**/spinner.svg', '**/unmissable_spinner.svg'],
    }),
    resolve({ extensions }),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**',
      extensions,
    }),
    postcss(),
    sizes(),
    copy({
      targets: [
        { src: './register.css', dest: './build' },
        { src: './fonts/**/*', dest: './build' },
      ],
      flatten: false,
    }),
  ],
};

export default defineConfig(async (): Promise<any> => {
  return config;
});

the build works:

enter image description here

but the generated js files are being added in the src folder:

enter image description here

and they should go inside the generated build folder which has only ts files:

enter image description here

JsPsych add a button to back to the previous trials

I want to add a “back to instruction” button in my ‘preTrial_questions’trial page so participants can go back to the ‘instructions’ trials and re-read them again.
I tried to add a on_finish: function but doesn’t seem to work, so any other work around?

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- head and script code are ommitted for simplicity -->
</head>

<body></body>

<script>
  
    /* initialize jsPsych */
    var jsPsych = initJsPsych({
      show_progress_bar: true,
      override_safe_mode: true,
  });
    
    /* create timeline */
    var timeline = [];

    /** some trials are ommited for simplicity **/
    /* define preload */
    /* define subject ID */
    /* define welcome and instruction page */

    /* pre-trial understanding test */
    var preTrial_questions = {
        type: jsPsychSurveyMultiChoice,
        preamble:`
        <h3>check your understanding</h3>
        <p>To check your understanding of the task, please indicate for each of these statements whether they are correct or incorrect.。` ,
        questions: [
          {
            prompt: "q1", 
            name: 'pr_q1', 
            options: ['correct', 'wrong'], 
            required: true
          }, 
          {
            prompt: "q2", 
            name: 'pr_q2', 
            options: ['correct', 'wrong'], 
            required: true
          },
          {
            prompt: "q3", 
            name: 'pr_q3', 
            options: ['correct', 'wrong'], 
            required: true
          }
        ],
        button_label:['continue'],
      };
      timeline.push(preTrial_questions) 

    /* if(conditional) node */
    // only if the participant understand all the parts of the rules, then trials shall preceed.
    
    // screen tell participants they should re-read the instruction
    var reread_instruction = {
      type: jsPsychHtmlButtonResponse,
      stimulus: `
      <h2>Re-read the rules </h2>
      <p>Sorry, please re-read the rules to ensure you understand them correctly。</p>`,
      choices: ['continue'],
    };

    var checkResponses_preTrial = function(){
      // Retrieve the responses
      var responses = jsPsych.data.get().last(1).values()[0].response;

      console.log("Responses from preTrial questions:", responses);

      // Check if all responses are "correct"
      return Object.values(responses).every(response => response === 'correct');

      console.log("All responses are 'correct':", allYes);
    };
    
    var checkUnderstanding = {
      timeline: [reread_instruction, instructions, preTrial_questions], // Replace with the trial that should be repeated
      conditional_function:function(){
        return !checkResponses_preTrial(); // enter the 'checkUnderstanding' timeline if not all the "correct" in 'preTrial_questions' are selected
      },
      loop_function: function(){
        return !checkResponses_preTrial(); // repeat the 'checkUnderstanding' timeline if not all the "correct" in 'preTrial_questions' are selected
      }
    };
    timeline.push(checkUnderstanding)

    /* trials */
    timeline.push(trial);

    /* run the experiment */
    jsPsych.run(timeline);

</script>

</html>

A button in ‘jsPsychSurveyMultiChoice’ trial page that take participants back to previous ‘jsPsychInstructions’ trials.

How can I change the MUI Badge component and add text inside?

I’d like to add a label next to my new row after adding it to the table. I found MUI Badge. How could I change the number and replace it with the word New?
Something like this
enter image description here
This is the component:

export default function SimpleBadge() {
  return (
    <Badge badgeContent={4} color="primary">
      <MailIcon color="action" />
    </Badge>
  );
}

Do you know if that’s possible? or do you know any alternative?

How to Detect Dynamically Added or Removed Sources with Electron DesktopCapturer?

I am working on an Electron app that utilizes the desktopCapturer module to fetch sources (both windows and screens), I now need assistance in detecting when new sources are added or existing ones are removed dynamically.

Here’s a snippet of my current implementation:

app.on('ready', async () => {
  createWindow()

  win?.webContents.on('did-finish-load', () => {
    try {
      desktopCapturer.getSources({ types: ['window', 'screen'] }).then(async sources => {
        win?.webContents.send('sources', sources);
      })
    } catch (error) {
      console.log('error getting sources', error);
    }
  });

});

Any help or code examples would be immensely beneficial. Thanks in advance!

appendChild is not working with mutilple onclick buttons [closed]

I am trying to append div elements through multiple click buttons but when i run code its not working?

When we click on “REPLY” button the contact us form is not a appending to their parent elemnts.

Here is the code I tried: [JsFiddle Code](https://jsfiddle.net/manudhimann123/cj36f8u5/1/)

I have tried using multiple append functions along with item selection, but it’s not working. is there any solution available to nest multiple click buttons.

How to get json data via comma? Js

When trying to filter location data using comma but I get the error [object Object],[object Object],[object Object Object],[object Object]
Data json:

{
  "command": "lok",
  "params": {
    "action": "test",
  },
  "response": {
    "skc": "D400",
    "location": [
      {
        "city": "Lond.",
        "location": "1m23"
      },
      {
        "city": "Lond.",
        "location": "2df65"
      },
      {
        "city": "Lond.",
        "location": "3sk56"
      }
    ]
  }
}

The js code looks like this:

var lk = data.response.location;
console.log(lk);
var ghlok = lk.filter(function (item) {
        return item.location;
      }).join(",");
      console.log(ghlok);

console.log(lk); gives location in {"city": "Lond.", "location": "1m23"}...

console.log(ghlok); outputs [object Object Object],[object Object],...

I added var par = JSON.parse(lk); but I get the error

Unexpected token ‘o’, “[object Object Object”…. is not valid JSON

Preloader mp4 video is not responsive on my html page

I am trying to set mp4 video in my pre-loader of my web page but I am facing two issues to achieve this target.
[1:My video is not responsive and behave as its behave without html page, I mean by default video is responsive when I shrink or expand video size it occupy all space according to screen variation but when I load this video on my html page it is not responsive.

1:My video is not responsive and behave as its behave without html page, I mean by default video is responsive when I shrink or expand video size it occupy all space according to screen variation but when I load this video on my html page it is not responsive.
2:It does not run another header element or show header after playing the video.
Expectations:
I want to play the the video first when the page load then show other content on the page.
Secondly video should behave as original.
Here is my code
//index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Your Page Title</title>
</head>
<body>
  <!-- Preloader Container -->
  <div id="preloader-container">
    <video autoplay muted loop id="preloader-video">
      <source src="preloader.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>

  <header>Hello World</header>

  <script src="script.js"></script>
</body>
</html>

//styles.css

/* styles.css */
body {
  margin: 0;
  overflow: hidden; /* Prevent scrolling during preloading */
}

#preloader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff; /* Background color for the preloader */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure the preloader is on top of other elements */
}

#preloader-container video {
  width: 100%; /* Make the video width cover the container */
  height: 100%; /* Make the video height cover the container */
  object-fit: cover; /* Maintain the video aspect ratio while covering the entire container */
  

}

script.js

// script.js
document.addEventListener("DOMContentLoaded", function() {
  var preloaderVideo = document.getElementById("preloader-video");

  if (preloaderVideo) {
    // Reset video playback to the beginning when the page is loaded or refreshed
    preloaderVideo.currentTime = 0;

    // Hide the preloader container after the video has played
    preloaderVideo.addEventListener("ended", function() {
      document.getElementById("preloader-container").style.display = "none";
    });
  }
});

Image Tracking Through WordPress

I am trying to track users who click or engage with Images listed on my Website, I have tried to use Js to accomplish this but it works well on my Local Computer but won’t work on WordPress when i insert my Code, Now i am using a plugin to add custom code to my site

Here’s my JavaScript to view users whom engage with my Images.

window.onload = function() {
  const imageLinks = document.querySelectorAll('a img'); // Select all images 
  
  imageLinks.forEach(link => {
    const uniqueID = generateUniqueID(); // Generate a unique ID
    link.parentElement.href += (link.parentElement.href.includes('?') ? '&' : '?') + `utm_source=ImageInteraction&click_id=${uniqueID}`;
  });
  
  // Google Analytics tracking code
  function trackImageLinkClick(event) {
    const link = event.target.closest('a');
    if (link) {
      const linkPath = link.href;
      
      // Google Analytics tracking code for image link clicks
      gtag('event', 'click', {
        'event_category': 'Image Link Click',
        'event_label': linkPath,
        'event_callback': function() {
          console.log('Google Analytics: Image link click tracked');
        }
      });
    }
  }
  
  document.body.addEventListener('click', function(event) {
    if (event.target.tagName === 'IMG' && event.target.parentElement.tagName === 'A') {
      trackImageLinkClick(event);
    }
  });
  
  // Function to generate a unique ID (can be improved for better uniqueness)
  function generateUniqueID() {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
  }
};

// Google Analytics initialization
const googleAnalyticsScript = document.createElement('script');
googleAnalyticsScript.async = true;
googleAnalyticsScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-MFW1KVZZDQ';

const googleAnalyticsConfig = document.createElement('script');
googleAnalyticsConfig.innerHTML = `
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-MFW1KVZZDQ');
`;

document.head.appendChild(googleAnalyticsScript);
document.head.appendChild(googleAnalyticsConfig);

I tried WordPress because that’s where i need my code to be executed, In my site. But it wont work yet everything is fine when i try using my Local Computer

Unable to Handle Unbalanced Groups with pivotMode=True in Ag-Grid react

I want to pivot table on “__time_period” with grouped on “_company” and “Assigned To”
such that the company name drop down is by default open and for the companies where the assigned to is blank it should not be a drop down, instead the data should be in the same row

currently I’m are getting this when the pivotMode={true}
Current state with pivot

what I’m expecting is that when there is no assigned to, then there should not be the (blank) row instead the data should be on the company name row itself

without pivotMode={true} I’m able to get the correct format for Unbalanced Groups but I also need the pivot.
Shows that unbalanced group is working without pivot

here is the link for sandbox : https://codesandbox.io/p/sandbox/ag-grid-unbalanced-columns-mantysdata-dvm9p9

Links for Related documentation : https://www.ag-grid.com/react-data-grid/grouping-unbalanced-groups/#handling-unbalanced-groups

Tailwind problem with horizontal scroll outside screen (overflow)

I have a React-based NextJS application using Tailwind CSS. There is a page component that shows a list of people sorted from A to Ö (Swedish aplhabet). When using mobile view, the UX states that the list of aphabetical letters should be visible on a single row and be scollable with arrows or finger on screen.

Problem: When in mobile view, the list starts at letter J, rather than letter A. Probably because it spans or overflows outside screen. User is unable to scroll to to the letter A (see pic).

Question: How can I fit the alphabet into the scrolling distance, how to get it to scroll further back to the first letter, or better yet, have it start at the letter A?

enter image description here

My current code for the LetterMeny component.

'use client';

import Link from 'next/link';
import React, { useEffect, useRef, useState } from 'react';
import { cn } from '@/utils/classnames';
import NavigateIcon from './icons/NavigateIcon';

const Letters = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z',
  'å',
  'ä',
  'ö',
];

type Props = {
  currentElementIndexInViewport: number;
  activeLetters: string[];
};

const LetterMenu: React.FC<Props> = ({ currentElementIndexInViewport, activeLetters }) => {
  const carousel = useRef<HTMLUListElement>(null);
  const letterMenuRef = useRef<HTMLDivElement>(null);
  const [isSticky, setIsSticky] = useState(false);
  const [isAtStart, setIsAtStart] = useState(true);
  const [isAtEnd, setIsAtEnd] = useState(false);

  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    const targetId = event.currentTarget.getAttribute('href')?.substring(1);
    const targetElement = targetId ? document.getElementById(targetId) : null;

    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth',
      });
    }
  };

  const updateButtonVisibility = () => {
    if (carousel.current) {
      const isStart = carousel.current.scrollLeft === 0;
      const isEnd =
        carousel.current.scrollLeft + carousel.current.offsetWidth === carousel.current.scrollWidth;
      setIsAtStart(isStart);
      setIsAtEnd(isEnd);
    }
  };

  const handleClickNext = () => {
    carousel.current?.scrollBy(300, 0);
    updateButtonVisibility();
  };

  const handleClickPrev = () => {
    carousel.current?.scrollBy(-300, 0);
    updateButtonVisibility();
  };

  useEffect(() => {
    updateButtonVisibility(); // Kollar startposition
    const handleScroll = () => {
      if (letterMenuRef.current) {
        setIsSticky(window.scrollY >= letterMenuRef.current.offsetTop);
      }
    };

    const handleCarouselScroll = () => {
      updateButtonVisibility();
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div
      ref={letterMenuRef}
      className={cn('sticky top-0 z-10 w-screen bg-white', {
        'shadow-custom': isSticky,
      })}
    >
      {!isAtStart && (
        <button
          className="prev space-between absolute left-0 top-1/2 -translate-y-1/2 cursor-pointer content-center rounded-full px-2"
          onClick={handleClickPrev}
          aria-label="vänster"
        >
          <div className="inline-flex items-center justify-center rounded-full border border-transparent bg-black bg-opacity-20 px-4 shadow-lg">
            <NavigateIcon direction="left" variant="secondary" />
          </div>
        </button>
      )}
      {/* Vi har här valt att ha skräddarsydd inline-styling i CSS då det endast gäller denna komponenten */}
      <ul
        ref={carousel}
        className="carousel flex justify-center gap-[0.624rem] overflow-x-auto scroll-smooth py-4"
      >
        {Letters.filter((letter) => activeLetters.includes(letter)).map((letter, letterIndex) => (
          <li key={`nav_${letter}`}>
            <Link
              href={`#${letter}`}
              onClick={handleClick}
              className={`focus:ring-blue-500 rounded-full font-livvic text-xl font-bold uppercase underline focus:outline-none focus:ring-2 focus:ring-greenblue-primary sm:p-4 ${
                activeLetters[currentElementIndexInViewport] === letter
                  ? 'active bg-greenblue-1.45 p-2 no-underline'
                  : ''
              }`}
              style={{
                width: '2.1rem',
                height: '2.1rem',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
              tabIndex={0}
            >
              {letter}
            </Link>
          </li>
        ))}
      </ul>

      {!isAtEnd && (
        <button
          className="next absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer content-center justify-center rounded-full px-4 shadow"
          onClick={handleClickNext}
          aria-label="höger"
        >
          <NavigateIcon direction="right" variant="secondary" />
        </button>
      )}
    </div>
  );
};

export default LetterMenu;