Snippets Collections
.center-five-columns,
.center-seven-columns {
    display: flex;
    column-gap: 30px;
    row-gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
}

.center-five-columns .flex_column,
.center-seven-columns .flex_column {
    width: 100% !important;
}

@media (min-width: 641px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 800px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .center-seven-columns .flex_column {
        width: calc(14.28% - 25.72px) !important;
    }

    .center-five-columns .flex_column {
        width: calc(20% - 24px) !important;
    }
}

@media (max-width: 640px) {
    .center-seven-columns .flex_column,
    .center-five-columns .flex_column {
        width: 380px !important;
    }
}
const header = document.querySelector('header');
let lastScroll = 0;
const scrollThreshold = 10; 

window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        header.classList.add('small');
    } else if (currentScroll === 0) {
        header.classList.remove('small');
    }

    lastScroll = currentScroll;
});

const hamburger = document.querySelector(".hamburger");
const navmenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navmenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navmenu.classList.remove("active");
}));
<!-- This tells you if your device is dark mode enabled or not. -->
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>
<style type=”text/css”>
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
</style>

/* Here you can adjust the colors of your brand’s preferred dark mode theme. */
@media (prefers-color-scheme: dark ) {
.body {
      background-color: #CCCCCC !important;
}
h1, h2, h3, td {
      color: #9ea1f9 !important;
      padding: 0px 0px 0px 0px !important;
}
}
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}
/* General Styles */
body {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

/* Carousel */
#carousel-container {
    width: 100%;
    overflow-x: hidden;
    background-color: rgba(255, 255, 255, 0);
    z-index: 920;
}

#carousel {
    white-space: nowrap;
    animation: scroll 40s linear infinite;
    margin-bottom: 20px;
    z-index: 921;
}

#carousel img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin-right: -5px;
}

/* Home Services */
.home-services {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    background-color: #515151;
    text-align: center;
    padding: 0;
}

.home-services a h2 {
    font-size: 15px;
    color: #ffffff;
    background-color: #515151;
    transition: color .5s ease, background-color .5s ease;
    padding: 20px 30px;
    border-radius: 200px;
    margin: 10px;
    border: 0;
}

.home-services a h2:hover {
    color: #ffffff;
    background-color: #4A1621;
}

/* Home Content */
.home-content {
    line-height: 25px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-item {
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    align-items: center;
    transition: background-color 1s ease;
    border-radius: 200px;
    margin: 20px;
    cursor: pointer;
}

.home-item:hover {
    background-color: #515151;
}

.home-text {
    margin: 0 4vw 0 4vw;
    font-size: 16px;
}

.home-img img {
    width: 20vw;
    height: 100%;
}

.home-item ul {
    font-family: nunito;
    text-indent: 10px;
    color: white;
    line-height: 2vw;
    display: none;
}

.arrow img {
    width: 4vw;
    margin: 0 10vw;
    transform: translateX(0);
    transition: 2s ease;
}

.home-item:hover .arrow img {
    transform: translateX(30px);
}

.home-content h1,
.home-content h2 {
    color: white;
    white-space: nowrap;
}

/* Hero */
.hero-image img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 2;
    opacity: .4;
    transition: opacity 1s ease-in-out;
}

/* Hero Mobile */
@media (max-width: 900px) {
    .home-title h1 {
        display: none;
    }

    .hero-buttons {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 10px 0;
    }

    .hero-image {
        position: relative;
        width: 100%;
        height: auto;
    }

    .hero-image img {
        width: 100%;
        height: 500px;
        display: block;
        object-fit: cover;
    }

    .hero-content {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 20vh;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        z-index: 1;
        width: 100%;
        justify-content: center;
    }

    .hero-content button {
        border-radius: 200px;
        border: none;
        padding: 15px;
        font-family: Montserrat;
        cursor: pointer;
        margin: 5px;
        background-color: #fff;
        transition: .5s ease;
        width: 60vw;
        font-size: 15px;
        line-height: 14px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .hero-content button:hover {
        background-color: black;
        color: white;
    }
}
<body>
    <div class="hero-image slider">
        <img id="heroBackground" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg" alt="Hero Image">
    </div>

    <div class="hero-content">
        <div class="home-title">
            <h1>Danny Holman Media</h1>
        </div>

        <div class="hero-menu">
            <div class="hero-buttons">
                <a href="#web">
                    <button>Web Design & Development</button>
                </a>
                <a href="https://dannyholmanmedia.com/portfolio/">
                    <h2>View Portfolio >>></h2>
                </a>
            </div>

            <div class="hero-buttons">
                <a href="https://dannyholmanmedia.com/photo-portfolio/">
                    <button>Landscape & Travel Photography</button>
                </a>
                <a href="https://dannyholmanmedia.com/order-prints/">
                    <h2>Order Prints >>></h2>
                </a>
            </div>
        </div>
    </div>

    <div id="carousel-container">
        <div id="carousel">
            <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png" alt="Digital Media Service Icon">
        </div>
    </div>

    <div class="home-services" id="web">
        <a href="https://dannyholmanmedia.com/ux-portfolio/">
            <h2>UX / UI Design</h2>
        </a>
        <a href="https://dannyholmanmedia.com/webdev-portfolio/">
            <h2>Web Development</h2>
        </a>
        <a href="https://dannyholmanmedia.com/media-portfolio/#media">
            <h2>Media</h2>
        </a>
        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <h2>Photography</h2>
        </a>
    </div>

    <div class="home-content">
        <a href="https://dannyholmanmedia.com/ux-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>UX / UI Design</h1>
                    <h2>Concept to Design</h2>
                    <ul>
                        <li>• Case Studies</li>
                        <li>• Design Approach</li>
                        <li>• User Research</li>
                        <li>• Information Architecture</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/1.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/webdev-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Web Development</h1>
                    <h2>Design to Function</h2>
                    <ul>
                        <li>• HTML</li>
                        <li>• CSS</li>
                        <li>• JavaScript</li>
                        <li>• PHP</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/2.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/media-portfolio">
            <div class="home-item">
                <div class="home-text">
                    <h1>Media</h1>
                    <h2>Digital Assets</h2>
                    <ul>
                        <li>• Video Production</li>
                        <li>• Graphic Design</li>
                        <li>• Document Design</li>
                        <li>• Data Visualization</li>
                    </ul>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/3.png" alt="Description of the image">
                </div>
            </div>
        </a>

        <a href="https://dannyholmanmedia.com/photo-portfolio/">
            <div class="home-item">
                <div class="home-text">
                    <h1>Photography</h1>
                    <h2>Landscape & Travel</h2>
                </div>
                <div class="arrow">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Icons-1.png" alt="image">
                </div>
                <div class="home-img">
                    <img src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/home-photo.png" alt="Description of the image">
                </div>
            </div>
        </a>
    </div>
</body>
*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #9600ff;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 20px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 952px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a{
    font-size: 16px;
  }
}
@media (max-width: 858px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #20124d;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #fff100;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}
color: hsl(50deg, 100%, 50%);

/* Same */
color: hsla(50deg, 100%, 50% / 1)

color: hsl(50deg 100% 50% / .5);
.parent {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .child {
    align-self: center;
  }
}
<span class="counter-value active" data-count="100">100</span>+
if(SDB.App.exists('.sg-counter-ready')){
					$(document).ready(startCounterReady);
					flag = 1;

					function startCounterReady() {
						if ($('.sg-counter-ready').length > 0) {
							$('.sg-counter-ready').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 1500,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
				if(SDB.App.exists('.sg-counter')){
					$(window).scroll(startCounter);
					flag = 1;

					function startCounter() {
						if ($('.sg-counter').length > 0) {
							$('.sg-counter').each(function () {
								var _current = $(this);
								var countDuration = 0;
								var toTop = _current.offset().top - window.innerHeight;
								if (countDuration == 0 && $(window).scrollTop() > toTop && _current.find('.counter-value').hasClass('active')) {
									_current.find('.counter-value').each(function () {
										var $this = $(this),
											countTo = $this.attr('data-count');
											countNum: $this.text();
										$({
										}).animate({
											countNum: countTo
										}, {
											duration: 3000,
											easing: 'swing',
											step: function (now) {
												$this.text(Math.ceil(now).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
											},
											complete: function () {
												$this.stop();
											}
										});

										$this.removeClass('active');
									});
									countDuration = 1;
								}
							});
						}
					}
				}
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function helloworld(){
            document.write("hello world");
        }
    </script>
    <form>
        <input type="submit" onclick = helloworld()>
    </form>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function validateform(){
            var name=document.getElementById("name").value;
            var roll=document.getElementById("roll").value;
            if(name==="" || roll===""){
                alert("name and roll required");
                return false
            }
            return true;
            
        }
    </script>

</head>
<body>
    <form >
        <label for ="name">Name</label>
        <input type="txt" id="name">
        <label for ="roll" >roll</label>
        <input type="number" id ="roll">
        <input type="submit"onclick=validateform());
    </form>
    
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    body {
      background-color: #b0ca9e;
      font-size: 16px;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script>
    function validateForm() {
      var name = document.forms["registrationForm"]["name"].value;
      var username = document.forms["registrationForm"]["username"].value;
      var password = document.forms["registrationForm"]["password"].value;
      var confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;

      if (name === "" || username === "" || password === "" || confirmPassword === "") {
        alert("All fields must be filled out");
        return false;
      }

      if (username.length < 6) {
        alert("Username should be at least 6 characters");
        return false;
      }

      if (password !== confirmPassword) {
        alert("Passwords do not match");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
  <form name="registrationForm" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <label for="confirmPassword">Confirm Password:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required>

    <input type="submit" value="Register">
  </form>
</body>
</html>
const photos = document.querySelectorAll('.photo');

function enlargeImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.add('enlarged');
    portfolioText.style.display = 'none';
}

function resetImg(element) {
    const imgElement = element.querySelector('img');
    const portfolioText = element.querySelector('.portfolio-text');

    imgElement.classList.remove('enlarged');
    portfolioText.style.display = 'block';
}

photos.forEach(photo => {
    photo.addEventListener('click', () => {
        enlargeImg(photo);
    });

    document.addEventListener('click', event => {
        if (!photo.contains(event.target)) {
            resetImg(photo);
        }
    });
});
* {
    padding: 0;
    margin: 0;
}

.portfolio-grid-container {
    max-width: 90vw;
    width: 95%;
    margin: auto;
    padding: 30px;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo {
    position: relative;
    cursor: pointer;
}

.photo img {
    width: 100%;
    height: 100%;
    border-radius: 1px;
    filter: brightness(100%);
    border: none;
    animation: fadeIn 1s;
    transition: filter 0.5s ease, border 1s ease, width 0.5s ease, height 0.5s ease, animation 0.8s ease-in-out;
}

.photo img.enlarged {
    max-width: 90vw;
    max-height: 700px;
    margin-top: 60px !important;
    margin-bottom: 90px;
    width: auto;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 995;
    filter: brightness(100%) !important;
    background-color: rgba(255, 255, 255, 0.482);
    border: 30px solid rgba(255, 255, 255, 0.363);
    animation: fadeIn 1s;
}

.photo.enlarged:hover .portfolio-text {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.photo:hover .portfolio-text {
    opacity: 1;
    cursor: pointer;
}

.photo:hover img {
    filter: brightness(80%);
}

.portfolio-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: 994 !important;
}

.portfolio-text h2 {
    font-family: 'Julius Sans One';
    color: white;
    font-size: 30px;
    font-weight: 700;
}

.portfolio-text h3 {
    font-family: 'Nunito';
    color: white;
    font-weight: light;
    font-size: 15px;
}

@media (max-width: 1380px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 965px) {
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
    }
}
<?php get_header(); ?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/portfolio.css">
    <?php wp_head(); ?>
</head>

<body>
    <div class="overlay"></div>
    <h1 class="page-title">Photography Portfolio</h1>
    <div class="portfolio-grid-container">
        <div class="photo-gallery">
            <?php
            $portfolio_query = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => -1));

            if ($portfolio_query->have_posts()) :
                $count = 0;

                while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    $location = get_the_content();

                    if ($count % 7 === 0) {
                        echo '<div class="column">';
                    }
                    ?>
                    <div class="photo">
                        <img src="<?php echo esc_url($image_url); ?>" onclick="enlargeImg(this)" alt="">
                        <div class="portfolio-text">
                            <?php echo wp_kses_post($location); ?>
                        </div>
                    </div>
                    <?php
                    $count++;

                    if ($count % 7 === 0) {
                        echo '</div>';
                    }
                endwhile;

                if ($count % 7 !== 0) {
                    echo '</div>';
                }

                wp_reset_postdata();
            else :
                echo 'No portfolio items found.';
            endif;
            ?>
        </div>
    </div>
</body>

<?php
/*
Template Name: Photography Portfolio
*/
$portfolio_query = new WP_Query(array(
    'post_type' => 'portfolio',
    'posts_per_page' => -1,
));

if ($portfolio_query->have_posts()) :
    while ($portfolio_query->have_posts()) :
        $portfolio_query->the_post();
    endwhile;
    wp_reset_postdata();
else :
    echo 'No portfolio items found.';
endif;

get_footer(); ?>
    const images = [
        "https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH_Carousel.png",
    
    ];

    const carousel = document.getElementById("carousel");

    images.forEach((imageUrl) => {
        const img = document.createElement("img");
        img.src = imageUrl;
        carousel.appendChild(img.cloneNode(true));
    });


 const slideshowImages = [
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-8.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-12.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-5.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio_2023-2.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-21.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/09/Portfolio-16.jpg",
    "https://dannyholmanmedia.com/wp-content/uploads/2023/11/Home-Background-scaled.jpg",


];

const heroBackground = document.getElementById("heroBackground");
let currentImageIndex = 0;

function updateHeroBackground() {
    heroBackground.style.opacity = .0;

    // After a short delay, update the image source and fade in
    setTimeout(() => {
        heroBackground.src = slideshowImages[currentImageIndex];
        heroBackground.style.opacity = .4;
    }, 1000);

    currentImageIndex = (currentImageIndex + 1) % slideshowImages.length;
}

setInterval(updateHeroBackground, 5000);
body {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.nav-menu .cart-icon {
    display: inline-block;
    background: url('https://dannyholmanmedia.com/wp-content/uploads/2023/11/Icons-1.png') no-repeat;
    width: 30px;
    height: 30px;
    background-size: contain;
    text-indent: 35px;
    font-family: 'montserrat';
    font-weight: 700;
}

header {
    position: fixed;
    height: 140px;
    transition: 0.5s ease;
    width: 100%;
    top: 0px;
    background-color: black;
    padding-top: 0px;
    z-index: 999;
    padding-bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
}

header #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header #header-logo {
    max-width: 100%;
    width: 150px;
    height: auto;
    padding-left: 0px;
    transition: width 0.5s ease;
    padding-top: 10px;
}

header.small {
    height: 50px;
    background-color: #515151;
}

header.small img {
    width: 10vw;
}

header.small #site-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

header.small #header-logo {
    max-width: 100%;
    width: 60px;
    height: auto;
    padding-left: 0px;
}

@media (max-width: 900px) {
    header {
        position: fixed;
        top: 0px;
        height: 130px;
        transition: 0.5s ease;
    }

    header.small {
        position: fixed;
        top: 0px;
        height: 90px;
    }

    header.small #site-logo {
        display: flex;
        align-items: center;
        height: 100%;
    }

    header.small #header-logo {
        max-width: 100%;
        width: 90px;
        height: auto;
        padding-left: 0px;
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: white;
    text-decoration: none;
    position: center;
}

.navbar {
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
}

#site-menu {
    justify-content: center;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
    white-space: nowrap;
    align-items: center;
}

.nav-menu li {
    position: relative;
    margin: 5px 3vw;
    font-size: 15px;
}

.nav-menu a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 4px;
    background-color: transparent;
    bottom: -6px;
    left: 0;
    transform-origin: left;
    transition: width 0.6s ease;
}

.nav-menu a:hover::before {
    width: 100%;
    transform: translateX(0);
    background-color: #4A1521;
}

.nav-link {
    transition: 0.3s ease;
}

.nav-link.hover {
    text-decoration: underline;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    align-items: center;
    padding-bottom: 30px;
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

@media (max-width: 900px) {
    .hamburger {
        display: block;
        right: 20px;
        top: 20px;
    }
}

.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    background-color: white;
    border-radius: 300px;
}

.page-title {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    animation: fadeIn 4s ease-out;
    display: flex;
    justify-content: center;
    font-size: 60px;
    padding-bottom: 60px;
}

.contact-content {
    padding-left: 300px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    #header-logo {
        position: sticky;
        margin: 0;
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 999;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(315deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-315deg);
    }

    .nav-menu a {
        position: relative;
        padding: 20px;
        text-decoration: none !important;
        transition: color 0.3s ease;
        font-size: 35px;
    }

    .nav-menu a::before {
        content: "";
        position: absolute;
        width: 0;
        height: 4px;
        background-color: transparent;
        bottom: -6px;
        transform: translateX(-50%) translateY(50%);
        transform-origin: left;
        transition: width 0.3s ease;
    }

    .nav-menu a:hover {
        color: #000000 !important;
    }

    .nav-menu a:hover::before {
        width: 100%;
        transform: translateX(-50%) translateY(50%);
        background-color: transparent;
    }

    .nav-menu {
        position: fixed;
        right: -200%;
        top: 0;
        gap: 0;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        color: black;
        transition: right 0.5s ease-in-out;
        background: #4a1521
<header>
    <div id="site-logo">
        <a href="<?php echo esc_url(home_url('/')); ?>">
            <img id="header-logo" src="https://dannyholmanmedia.com/wp-content/uploads/2023/11/DGH-Media-Logo_2024.png" alt="Turn this into a logo">
        </a>
    </div>

    <div id="site-menu">
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="https://dannyholmanmedia.com/about" class="nav-link">About</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/portfolio" class="nav-link">Portfolio</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/photo-portfolio" class="nav-link">Photography</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/order-prints" class="nav-link">Order Prints</a></li>
                <li class="nav-item"><a href="https://dannyholmanmedia.com/contact" class="nav-link">Contact</a></li>

                <li class="nav-item">
                    <a href="<?php echo esc_url(wc_get_cart_url()); ?>" class="nav-link cart-icon">
                        <?php
                        $cart_count = WC()->cart->get_cart_contents_count();
                        if ($cart_count > 0) {
                            echo '(' . esc_html($cart_count) . ')';
                        }
                        ?>
                    </a>
                </li>
            </ul>
        </nav>

        <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
    </div>
</header>
<!DOCTYPE html>
<html>
<head>
    <title>Table with Flip Cards</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div class="cards">
        <table id="SDGtop">
            <tr>
                <td>
                    <a href="#SDG3">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-3.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG7">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG7-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-7.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG8">
                        <div id="flipcard" class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG8-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-8.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG10">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG10-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-10.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#SDG11">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG11-ICON.svg" width="300" height="300">
                                </div>
                                <div class "flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-11.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG12">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG12-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-12.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG13">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG13-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-13.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="#SDG14">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <div class="flip-card-front">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG14-ICON.svg" width="300" height="300">
                                </div>
                                <div class="flip-card-back">
                                    <img src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG-14.svg" width="300" height="300">
                                </div>
                            </div>
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>SDG 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="SDG3">
        <img class="img3" src="https://cleanlightingcoalition.org/wp-content/uploads/sites/96/SDG3-ICON.svg" width="2000" height="2000" alt="SDG 3">
        <div class="text3" style="text-align: left;">
            <h2><strong>SDG 3: Good Health and Well-being</strong></h2>
            <p style="color: black;"><strong>Ensure healthy lives and promote well-being for all at all ages</strong></p>
            <p style="color: black; font-size: 8vw;">
                Phasing out mercury-ladened fluorescent lamps will help to achieve
                <a href="https://sdgs.un.org/goals/goal3">objective 3.9</a>
                which seeks to substantially reduce the number of deaths and illnesses from hazardous chemicals and air, water and soil pollution and contamination.
            </p>
        </div>
    </div>
</body>
</html>
.cards {
    align-items: center;
    max-width: none;
    padding-left: 30px;
}

table {
    border-collapse: collapse;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    align-items: center;
}

td {
    border: 20px solid white;
    padding: 0;
    margin: auto;
}

.flip-card {
    background-color: white !important;
    border: 1px solid white;
    height: 300px;
    perspective: 1000px;
    width: auto;
    max-width: 20vw !important;
}

.flip-card-inner {
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
    max-width: 20vw;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    transform-origin: center !important;
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.flip-card-front {
    background-color: white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flip-card-back {
    color: #000000;
    transform: rotateY(180deg);
    display: auto;
    align-items: center;
    justify-content: auto;
}

h5,
p {
    margin: 20px;
    color: #FFFFFF;
}

@media (min-width: 1541px) {
    .flip-card {
        width: 15vw;
    }
    .cards {
        padding-left: 100px;
    }
}

.img3 {
    max-width: 300px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50px);
    transition: all 1.5s ease-out;
    opacity: 0;
    margin-left: 200px;
    margin-right: 20px;
}

.text3 {
    color: black;
    opacity: 0;
    transition: all 1.5s ease-out;
    transform: translateX(50px);
    text-align: left;
    font-size: 18px;
    margin-left: 20px;
    margin-right: 20px;
}

.animate {
    opacity: 1;
    transform: translateX(0);
}

#SDG3 {
    display: flex;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1593px) {
    #SDG3 {
        max-width: 80vw;
        padding-left: 200px;
    }
}

@media (max-width: 1050px) {
    .text3 {
        padding-top: 30px;
        transform: translateX(0);
        max-width: 70%;
        text-align: center;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }
    .img3 {
        transform: translateX(0);
        max-width: 300px;
        height: auto;
        display: block;
        margin-left: 50px;
        margin-right: 50px;
    }

    #SDG3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
.floor-fade {

background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);

}
.text-box {

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

display: inline;

padding: 10px;

}
.darken {

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);

}
<html>

<body>
    <div class="dark relative min-h-screen transition-all ease-out" id="parent">
        <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2">
            <span>dark</span>
            <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" />
        </label>
        <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl">
            <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1>
            <div>
                <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p>
            </div>
        </div>
    </div>
</body>

</html>
table {
    border-collapse: separate;
    border-spacing: 0 1em;
}
/* Mobile */
@media (max-width: 480px) { // styles
}
/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px) { // styles
}
/* Small tablets */
@media (min-width: 768px) and (max-width: 991px) { // styles
}
/* Large tablets/laptops */
@media (min-width: 992px) and (max-width: 1199px) { // styles
}
/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) { // styles
}
/* Extra large screens */
@media (min-width: 1920px) {
// styles
}
1.To check which Git credentials are configured in your system, you can use the following command in the terminal:

```bash
git config --list
```

2. To permanently remove the user.email and user.name settings from your Git configuration, you can use the following commands in the terminal:

```bash
git config --global --unset user.email
git config --global --unset user.name
```

3. Then run the git config --list command to check your Git configuration, the output will not include the user.email and user.name settings.

export enum ThemeOptions {
  Red = 'red',
}
  
export enum ThemeModes {
  Light = 'light-theme',
  Dark = 'dark-theme',
}
  
themeOptions: ThemeOption[] = [
    {
      text: 'Red',
      value: ThemeOptions.Red,
    },
];
  
themeChanged() { // Theme color changed
    document.body.className = '';
    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}

themeModeToggled() { // Theme mode changed: Light / Dark
    document.body.className = '';
    if (this.themeMode === ThemeModes.Light) {
      this.themeMode = ThemeModes.Dark;
    } else {
      this.themeMode = ThemeModes.Light;
    }

    const className = this.activeTheme.value + '-' + this.themeMode;
    this.themeService.switchTheme(className);
}
import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ThemeService {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  switchTheme(theme: string) {
    let themeLink = this.document.getElementById(
      'app-theme'
    ) as HTMLLinkElement;

    if (themeLink) {
      themeLink.href = theme + '.css';
    }
  }
}
<link id="app-theme" rel="stylesheet" type="text/css" href="red-light.css"/>
{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-light-theme.scss",
  "bundleName": "red-light-theme",
  "inject": false
},
{
  "input": "src/assets/primeng-theme/themes/mytheme/custom-themes/_red-dark-theme.scss",
  "bundleName": "red-dark-theme",
  "inject": false
},
.text{
    color: var(--black);
}
:root{
    --black: #000;
    --white: #fff;
}

@media (prefers-color-scheme: dark){
    :root{
        --black: #fff;
        --white: #000;
    }
}
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
<style>
    .parent>*{
    grid-area:1/1;
    }
</style>
<div class="parent grid max-w-[350px] rounded-md outline">
    <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" />
    <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div>
    <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1>
</div>
/*!
 *  replaceme.js - text rotating component in vanilla JavaScript
 *  @version 1.1.0
 *  @author Adrian Klimek
 *  @link https://adrianklimek.github.io/replaceme/
 *  @copyright Addrian Klimek 2016
 *  @license MIT
 */
!function(a,b){"use strict";function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function d(){"function"==typeof b&&b.fn.extend({ReplaceMe:function(a){return this.each(function(){new e(this,a)})}})}function e(a,b){var d={animation:"animated fadeIn",speed:2e3,separator:",",hoverStop:!1,clickChange:!1,loopCount:"infinite",autoRun:!0,onInit:!1,onChange:!1,onComplete:!1};if("object"==typeof b?this.options=c(d,b):this.options=d,"undefined"==typeof a)throw new Error('ReplaceMe [constructor]: "element" parameter is required');if("object"==typeof a)this.element=a;else{if("string"!=typeof a)throw new Error('ReplaceMe [constructor]: wrong "element" parameter');this.element=document.querySelector(a)}this.init()}e.prototype.init=function(){"function"==typeof this.options.onInit&&this.options.onInit(),this.words=this.escapeHTML(this.element.innerHTML).split(this.options.separator),this.count=this.words.length,this.position=this.loopCount=0,this.running=!1,this.bindAll(),this.options.autoRun===!0&&this.start()},e.prototype.bindAll=function(){this.options.hoverStop===!0&&(this.element.addEventListener("mouseover",this.pause.bind(this)),this.element.addEventListener("mouseout",this.start.bind(this))),this.options.clickChange===!0&&this.element.addEventListener("click",this.change.bind(this))},e.prototype.changeAnimation=function(){this.change(),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.start=function(){this.running!==!0&&(this.running=!0,this.changeWord(this.words[this.position]),this.position++),this.loop=setTimeout(this.changeAnimation.bind(this),this.options.speed)},e.prototype.change=function(){return this.position>this.count-1&&(this.position=0,this.loopCount++,this.loopCount>=this.options.loopCount)?void this.stop():(this.changeWord(this.words[this.position]),this.position++,void("function"==typeof this.options.onChange&&this.options.onChange()))},e.prototype.stop=function(){this.running=!1,this.position=this.loopCount=0,this.pause(),"function"==typeof this.options.onComplete&&this.options.onComplete()},e.prototype.pause=function(){clearTimeout(this.loop)},e.prototype.changeWord=function(a){this.element.innerHTML='<span class="'+this.options.animation+'" style="display:inline-block;">'+a+"</span>"},e.prototype.escapeHTML=function(a){var b=/<\/?\w+\s*[^>]*>/g;return b.test(a)===!0?a.replace(b,""):a},a.ReplaceMe=e,d()}(window,window.jQuery);
<div>
    <div class="sticky top-0 flex h-12 w-full items-center bg-black">
        <input type="checkbox" class="peer hidden" id="a" />
        <label for="a" class="select-none border px-4 py-2 text-white"> ☰ </label>

        <!-- Sidebar -->
        <div class="fixed inset-y-0 left-0 mt-12 w-64 -translate-x-full transform bg-gray-800 px-4 transition-transform duration-300 ease-in-out peer-checked:translate-x-0">
            <div class="flex h-full flex-col justify-between gap-4">
                <div class="border border-emerald-500">
                    <h1 class="text-2xl leading-loose text-white">Logo</h1>
                </div>
                <div class="overflow-y-auto border border-orange-500">
                    <!-- Links -->
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 1</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 2</a>
                    <div class="group">
                        <div class="relative">
                            <a href="#" class="group block py-2 text-white hover:bg-gray-700">
                                Link 3
                                <span class="absolute right-4 top-1/2 -translate-y-1/2 transform text-white transition-transform group-hover:rotate-180">▼</span>
                            </a>
                        </div>
                        <div class="mt-2 hidden space-y-2 pl-4 group-hover:flex group-hover:flex-col">
                            <a href="#" class="text-white">Link 3.1</a>
                            <a href="#" class="text-white">Link 3.2</a>
                        </div>
                    </div>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 4</a>
                    <a href="#" class="hover-bg-gray-700 block py-2 text-white">Link 5</a>
                    <a href="#" class="block py-2 text-white hover:bg-gray-700">Link 6</a>
                </div>
                <!-- Settings -->
                <div class="border border-lime-500"><button class="block py-2 text-white hover:bg-gray-700">Settings</button></div>
            </div>
        </div>
    </div>
    <!-- Main Content -->
    <div class="flex-grow bg-gray-100 p-4">
        <!-- Your Main Content Goes Here -->
        <p>....</p>
    </div>
</div>
function incrementStats() {
    const counters = document.querySelectorAll('.counter');

    counters.forEach((counter) => {
        counter.innerText = 0;

        const updateCounter = () => {
            const target = +counter.getAttribute('data-target'); // the "+" here casts the returned text to a number
            const c = +counter.innerText;
            const increment = target / 200;

            if (c < target) {
                counter.innerText = Math.ceil(c + increment);
                setTimeout(updateCounter, 1);
                // here the function is calling itself until "c"
                // reaches the "data-target", making it recursive
            } else {
                counter.innerText = target;
            }
        };

        updateCounter();
    });
}

document.addEventListener('DOMContentLoaded', incrementStats);
// copy paste react
return (
<>
<style>
{`
.animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;}

.animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: white;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;}

.wrapper:hover .animated-text::after, .wrapper:hover .animated-text {
            transform: scaleX(1);}

//or (removing redundant, see if it works)
.wrapper:hover .animated-text1::after{
            transform: scaleX(1);}
 `}
<style>
<button className="wrapper">
<p className="animated-text">click</p>
</button>
</>
)
// copy paste for react 
return (
<>
    <style>{`
        .animated-text {
            position: relative;
            display: inline-block;
            text-decoration: none;
        }

        .animated-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: blue;
            transform-origin: 0% 50%;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .animated-text:hover::after {
            transform: scaleX(1);
        }
    `}
</style>

    <p class="animated-text">Hover over this text to animate the underline.</p>

</>
)
selector input.jet-search-filter__input{
  
    background-image: url("https://desenvolvimento.pinaculodigital.com.br/andav/wp-content/uploads/2023/10/Vector.svg");
    background-repeat: no-repeat;
    background-position: 24px;
    padding-left: 52px !important;
    
}
selector input.jet-search-filter__input:focus-visible {
    outline: 1px solid #F47E54!important;
}
<body>
   <h2>About</h2>
   <p>
     <!-- Just add text decoration style:None -->
      Our <a href="" style="text-decoration: none;">Team</a>
   </p>
</body>
const [formErrors, setFormErrors] = useState<Partial<UserRegistrationFormAddressInfoDetails>>({
  address: '',
  countryName: '',
  nationalityName: '',
  cityName: '',
  passportNo: '',
  passportExpiryDate: '',
  // nationality: '',
  resident: '',
  companyAdd: '',
});


handleEmptyField('passportNo', userData.passportNumber || passportNo, 'Passport No is required');


useEffect(() => {
  if (passportNo) {
    setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
  }
}, [passportNo]);

<input
      type="text"
      className={`form-control passport-number-input ${formErrors.passportNo ? 'input-error' : ''}`}
      id="passportNumber"
      placeholder="Enter Your Passport Number"
      defaultValue={userData.passportNumber}
      maxLength={12}
      onChange={(e) => {
        setPassportNo(e.target.value);
        if (e.target.value) {
        setFormErrors((prevErrors) => ({ ...prevErrors, passportNo: '' }));
        }
        }}
      onInput={(e) => {
        const input = e.target as HTMLInputElement;
        input.value = input.value.replace(/[^a-zA-Z0-9 ]/g, '');
        setPassportNo(input.value);
        }}
      {...register('passportNo', {
      required: true,
      })}
/>





$md-primary: (
  50: #f2e7fe,
  100: #dbb2ff,
  200: #bb86fc,
  300: #985eff,
  400: #7f39fb,
  500: #6200ee,
  600: #5600e8,
  700: #3700b3,
  800: #30009c,
  900: #23036a,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  ),
);

$md-accent: (
  50: #c8fff4,
  100: #70efde,
  200: #03dac5,
  300: #00c4b4,
  400: #00b3a6,
  500: #01a299,
  600: #019592,
  700: #018786,
  800: #017374,
  900: #005457,
  A100: #a7ffeb,
  A200: #64ffda,
  A400: #1de9b6,
  A700: #00bfa5,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  ),
);

$md-warn: (
  50: #ffebef,
  100: #cf6679,
  200: #ff7597,
  300: #e77179,
  400: #f24e58,
  500: #f83a40,
  600: #e9313e,
  700: #d72638,
  800: #ff0266,
  900: #bb0d24,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
  ),
);
.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}
// Shortcode [king_events]

function king_events ( $atts, $content = null) {
    $today = date('Ymd');
	$atts = shortcode_atts(
        array(
            'type' => '',
            'number' => '-1',
        ),
        $atts,
        'king_events'
    );
    $args = array(
        'post_type' => 'tkc-event',
		'posts_per_page' => -1,
        'post_status' => 'publish',
        'orderby' => 'event_date',
        'order' => 'ASC',
        'meta_query' => array(
            array(
                'key' => 'event_date',
                'compare' => '>',
                'value' => $today,
                'type' => 'DATE'
            )
        ),
    );

	if( !empty( $atts['type'] ) ) {
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'event_type',
				'field' => 'slug',
				'terms' => $atts['type'],
            )
		);
	}

    $events_query = new WP_Query($args);

    ob_start();
    if($events_query->have_posts()) { ?>

    <div class="events-wrap">

    <?php

    while ($events_query->have_posts()) {
    $events_query->the_post(); ?>

    <div class="belove-event-inner">
        <div class="belove-event-img">
            <a href="<?php echo get_the_post_thumbnail_url(get_the_ID(),'full'); ?>">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail('big-square'); } ?>
            </a>
        </div>
        <div class="belove-event-content">
            <h3><?php echo the_title(); ?></h3>
            <div class="event-details">
                <?php echo the_content(); ?>
            </div>
			<?php if (get_field('event_link')) { ?>
            <div class="belove-event-link">
                <?php if(get_field('button_label')) { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank"><?php echo get_field('button_label'); ?></a>
                <?php }else { ?>
                    <a href="<?php echo get_field('event_link'); ?>" target="_blank">Registration</a>
                <?php }?>
            </div>
			<?php } ?>
        </div>
    </div>

    <?php }
    wp_reset_postdata();
    ?>
    </div>

    <?php
    } else { ?>
        <div>No Events found</div>
    <?php }
    return ob_get_clean();
}

add_shortcode('king_events', 'king_events');
  props,
  ref,
) => <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />);

export default function PhoneOTPVerification() {
  const [inputValue, setInputValue] = useState(['', '', '', '', '', '']);
  const [isVerified, setIsVerified] = useState(false);
  const [showInvalidOTPModal, setShowInvalidOTPModal] = useState(false);
  const [open, setOpen] = React.useState(false);
  const [errorMessage, setErrorMessage] = React.useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');

  const navigate = useNavigate();

  const handleClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
    // Only allow digit characters
    const value = e.target.value.replace(/\D/g, '');
    // Create a new array with the updated value
    const newValue = [...inputValue];
    newValue[index] = value;
    setInputValue(newValue);
  };

  const handleKeyDown = (e: { key: string; }) => {
    if (e.key === 'Backspace') {
      setInputValue(inputValue.slice(0, -1)); // Remove the last character from the input value
    }
  };
  const { userGuid } = useParams();
  const verifyPhoneNumber = async () => {
    // Join the inputValue array into a single string
    const userOtp = inputValue.join('');
    // Check if the length is 6 (since we have 6 input fields)
    if (userOtp.length === 6) {
      const response = await trackPromise(api.verifyOtp(userOtp, userGuid));
      if (response?.data?.Output?.phoneVerified) {
        setIsVerified(true);
        navigate(`/accounts/signup/identity-verification/${userGuid}`);
      } else {
        setOpen(true);
        setErrorMessage('Invalid OTP');
      }
    } else {
      setIsVerified(false);
    }
  };

  const resentOtp = async () => {
    const response = await trackPromise(api.resendOtp(userGuid));
    console.log('otp resend response:', response);
    // show success sbackbart nessga if otp resend successfully
    if (response?.data?.Output?.phoneNumber) {
      setPhoneNumber(response?.data?.Output?.phoneNumber);
      setSnackbarSeverity('success');
      setSnackbarMessage('OTP resend successfully');
      setSnackbarOpen(true);
    } else {
      setSnackbarSeverity('error');
      setSnackbarMessage('OTP resend failed. Try again.');
      setSnackbarOpen(true);
    }
  };

  // useEffect(() => {
  //   resentOtp();
  // }, []);

  return (
    <>
      <main className="otp-verify-container">
        <header className="header">
          <img src={Headericon} alt="Header Image" />
        </header>
        <section className="verification-section">
          <h1 className="verification-title">Phone Number Verification</h1>
          <article className="verification-content">
            <div className="verification-icon">
              <img src={SMSIcon} alt="SMS Icon" />
            </div>
            <div className="verification-subtitle">Enter 6 Digit OTP</div>
            <div className="verification-message">
              <span className="verification-message-text">
                We have sent an OTP on
                {' '}
                <span className="verification-message-phone">{phoneNumber}</span>
              </span>
              <button
                onClick={resentOtp}
                className="resend-link"
              >
                Resend OTP
              </button>
            </div>
            <div className="verification-input mb-5">
              {[...Array(6)].map((_, index) => (
                <input
                  key={index}
                  type="text"
                  maxLength={1}
                  className="otp-input"
                  value={inputValue[index] || ''}
                  onChange={(e) => handleChange(e, index)}
                />
              ))}
              <button type="button" onClick={verifyPhoneNumber}>
                Verify
              </button>
            </div>
          </article>
        </section>
        <InvalidOTPModal
          show={showInvalidOTPModal}
          handleClose={() => setShowInvalidOTPModal(false)}
        />

      </main>
      <Snackbar
        open={open}
        autoHideDuration={3000}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleClose} severity="error" sx={{ width: '100%', backgroundColor: '#C13254' }}>
          {/* Oops! Something went wrong. Please try again later. */}
          {errorMessage}
        </Alert>
      </Snackbar>

      {/* snacbar for otp resend */}
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={3000}
        onClose={() => setSnackbarOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={() => setSnackbarOpen(false)}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>

    </>
  );
}
.container {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar; 
 }
.item {
  flex: 0 0 auto; 
}
#cssDisplay {
  background-color: #FFFFFF;
  color: #000000;
  border: 3px solid #1D2ECC;
  padding: 3px;
  margin: 3px;
  font-family: arial;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  font-variant: normal;
  line-height: 20px;
  background-image: url(img2.png);
  background-repeat: repeat;
  background-position: 50% 50%;
  background-attachment: scroll;
  position: static;
  border-radius: 8px;
  box-shadow: -1px 1px 1px #4A4A48;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Your Website Title</title>
    <link rel="stylesheet" type="text/css" href="code-1.css">
</head>
<body>
    <header>
        <h1>Welcome to Your Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>About Us</h2>
            <p>This is the about us section.</p>
        </section>

        <section>
            <h2>Contact Us</h2>
            <p>You can reach us at <a href="mailto:info@example.com">info@example.com</a>.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Your Website. All rights reserved.</p>
    </footer>
</body>
</html>
.pv-inline-form{
	.gform_body{
		padding-top: 80px;
		@media(max-width: 860px){
			padding-top: 25px;
		}
		.gform_fields{
			.gfield{
				.ginput_container{
					flex-grow: 1;
					select {
						appearance: none;
						-webkit-appearance: none;
						-moz-appearance: none;
						background-image: url('/wp-content/uploads/2023/06/arrow-down.svg');
						background-repeat: no-repeat;
						background-size: 16px;
						background-position: right center;
						padding-right: 30px;
						/* padding-left: 0; */
					}
					@media(min-width: 861px){
						select{
							text-align: center !important;
							text-align: -webkit-center !important;
							text-align-last: center;
							-webkit-text-alig-last: center;
							-moz-text-align-last: center;
							direction: ltr;
							background-position: 70% center;
						}
						input{
							text-align: center !important;
						}
					}
				}
				@media(min-width: 861px){
					label, .gfield_description{
						flex: 0 0 auto;
					}
					.gfield_description{
						font-size: 20px;
					}
					&.scta-top{
						display: inline-flex;
						//width: 33.333% !important;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						&.scta-name{
							width: 38%;
						}
						&.scta-company{
							width: 31%;
						}
						&.scta-job{
							width: 31%;
						}
					}
					&.scta-center{
						display: inline-flex;
						justify-content: flex-start;
						align-items: center;
						vertical-align: middle;
						gap: 10px;
						padding-top: 25px;
					}
					&.scta-center.scta-subject{
						width: 33.3333%;
					}
					&.scta-center.scta-message{
						width: 66.6666%;
					}
					&.scta-bottom{
						display: inline-flex;
						width: 100%;
						justify-content: flex-start;
						align-items: center;
						gap: 10px;
						vertical-align: middle;
						padding-top: 25px;
					}
					&.scta-top:not(:first-child),
					&.scta-message{
						padding-left: 10px;
					}
				}
				@media(max-width: 860px){
					display: block !important;
					width: 100% !important;
					label{
						margin-bottom: 0 !important;
					}
					.gfield_description{
						padding-top: 15px;
						font-size: 16px;
					}
					.ginput_container{
						input, select{
							padding: 15px 0 !important;
						}
					}
					&:not(:first-child){
						margin-top: 20px;
					}
				}
				&.gfield_error{
					.ginput_container{
						input, select{
							border-color: red !important;
							border: unset !important;
							border-bottom: 1px solid red !important;
						}
					}
					.gfield_validation_message{
						display: none !important;
					}
				}
			}
		}
	}
	.gform_footer{
		padding-top: 45px;
		span.fas.fa-arrow-right{
			&::before{
				@include arrow-white;
				margin-left: 10px;
			}
		}
		@media(max-width: 860px){
			padding-top: 0 !important;
		}
	}
} 
// Bx Slider 
 
function custom_scripts()
{
    wp_register_script('bxslider', 'https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js', array(), false, true);
    wp_enqueue_script('bxslider');
}
 
add_action('wp_enqueue_scripts', 'custom_scripts');
 
function bxslider_init() { ?>
    <script>
    (function($){
        $(document).ready(function() {
                $(".image-ticker").show();
                $('.image-ticker').bxSlider({
                    minSlides: 1,
                    maxSlides: 8,
                    slideWidth: 189,
                    slideMargin: 0,
                    ticker: true,
                    speed: 50000
                });
            });
        })(jQuery)   
    </script>
<?php }
 
add_action ('wp_footer', 'bxslider_init');

<!-- MARKUP - Put Codeblock Class as 'slider-logos' -->

<div class="image-ticker" style="display:none">
    <span class="logo-item"><img src="#"></span>

</div>

<!-- STYLE -->

<style>
.bx-wrapper {
    max-width: 100% !important;
}

.logo-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    margin: 0;
    padding: 0 25px;
    height: 80px;
    width: auto !important;
}

.logo-item img {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 80px;
}

.bx-viewport {
    height: auto !important;
}
</style>
<!DOCTYPE html>
<html>
​
<body>
The content of the body element is displayed in your browser.
</body>
​
</html>
​
/*__Responsive Media Queries __*/

/* Mobile & Small devices */
@media only screen and (max-width: 480px) {...}

/* Portrait Tablets and Ipads devices) */
@media only screen and (max-width: 768px) {...}

/* Laptops and Small screens  */
@media only screen and (max-width: 1024px) {...}

/* Laptops, Desktops Large devices */
@media only screen and (max-width: 1280px) {...}

/* Extra large devices (large laptops and desktops) */
@media only screen and (min-width: 1281px) {...}
.grid-container{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
import { useRef, useState } from "react";

const Modal = () => {
  const contentRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = (event) => {
    if (contentRef.current && !contentRef.current.contains(event.target)) {
      console.log(`object`);
      setIsOpen(false);
    }
  };

  const toggleModal = () => {
    setIsOpen(!isOpen);
  };
  

  return (
    <div>
      <style>
        {`
/* Modal container */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal content */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  text-align: center;
}
	`}
      </style>
      <button
        className="px-2 bg-blue-300 py-1 rounded-lg"
        onClick={toggleModal}
      >
        Toggle Modal
      </button>
      {isOpen && (
        <div
          className="modal-container border border-pink-600 select-none"
          onClick={handleClickOutside}
        >
          <div className="modal-content" ref={contentRef}>
            <h2>Click outside to close</h2>
            <p>This is a modal. Click outside to close.</p>
            <button
              className="px-3 py-1 mt-3 rounded-md bg-teal-300"
              onClick={() => setIsOpen(false)}
            >
              ok
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;
import {userRef,UseEffect} from "react"
function App()=>{
  const refOne = useRef(null);
  
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
  }, []);
  
  const handleClickOutside = (e) => {
    if (refOne.current && !refOne.current.contains(e.target)) {
      console.log("clicked outside");
    } else {
      console.log(`clicked inside div`);
    }
  };
 return(
 <div style={{width:"10rem",height:"10rem", backGround:"red"}}>
 </div>) 
}
 <div className="row form-row mb-5">
            {/* Country Col */}
            <div className="col-md-6">
              <label
                htmlFor="country"
                className="form-label w-100 country-label"
              >
                Country*
              </label>
              <Autocomplete
                disablePortal
                id="country"
                defaultValue={userData?.countryName ?? ''}
                options={countriesList}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('countryName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (countryID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="country-input"
                    placeholder="Select Country"
                  />
                )}
                // onchange event handler to set the countryName state
                onChange={(e: any, newVal: any) => {
                  setCountryID(newVal.countryID);
                  setCountrySelected(true);
                  setCityID(0); // Clear the city ID
                  // Also clear any other city-related states if you have them
                }}
              />
            </div>

            {/* City Col */}
            {countrySelected && (
            <div className="col-md-6">
              <label
                htmlFor="city"
                className="form-label w-100 city-label"
              >
                City*
              </label>
              <Autocomplete
                disablePortal
                id="city"
                value={cityID ? citiesListBycountry.find((city: { cityID: number; }) => city.cityID === cityID) : null} // Use the cityID state to control the value
                options={citiesListBycountry}
                isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    {...register('cityName', {
                      required: true,
                    })}
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (cityID || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                    className="city-input"
                    placeholder="Choose City*"
                  />
                )}
                onChange={(e, value: any) => setCityID(
                  value?.cityID,
                )}
              />
              {/* handle errors */}
              {/* {formErrors.cityName && (
              <span className="error-message">{formErrors.cityName}</span>
              )} */}
            </div>
            )}
          </div>
<DatePicker
                onChange={handleDatePicker}
                value={userData.passportExpiryDate || null || passportExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Select Date of Expiry',
                    }}
                    {...register('passportExpiryDate', {
                      required: true,
                    })}
                    // className="date-picker date-picker-input"
                    error={
                      (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '')
                    }
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                  />
                )}
              />
  const handleFileDrop = (acceptedFiles: any) => {
    console.log('Accepted Files:', acceptedFiles);
    checkFileValidity(acceptedFiles, documentTypeID);

    // Accept same file again
    if (dropzoneInputRef.current) {
      dropzoneInputRef.current.value = '';
    }
  };
@media (min-width: 768px) {
    .inner-five-col {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
    
    .inner-five-col .flex_column {
        margin: 0 !important;
        width: calc(50% - 15px) !important;
    }
}

@media (min-width: 990px) {
    .inner-five-col .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}

@media (min-width: 1251px) {
    .inner-five-col .flex_column {
        width: calc(20% - 24px) !important;
    }
}
.my-class.special {
  background: royalblue;
}
<?php
// error_reporting(E_ALL);
// ini_set('display_errors', 1);
error_reporting(0);
date_default_timezone_set('Asia/Kolkata');
function get($url)
{
  // Initialize a CURL session.
  $ch = curl_init();

  // Return Page contents.
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

  //grab URL and pass it to the variable.
  curl_setopt($ch, CURLOPT_URL, $url);

  $result = curl_exec($ch);

  return $result;
}

$user = $_POST['user'];
$offer = $_POST['offer'];
$cname = $_POST['cname'];
$event = $_POST['event'];

$rp = get('https://nextpower.cashinmedia.in/api/v1/checkRefer/0a51d09c-f329-4436-89d5-bdbb52bea07c/' . $offer . '?number=' . $user . '');

// JSON response from the URL
$response = $rp;

// Decode the JSON response
$response_data = json_decode($response, true);

$totalClicks = $response_data['clicks'];

$count = $response_data['count'];

// Extract the 'data' section from the response
$data = $response_data['data'];

// Check if there's any data to display
if (count($data) > 0) {
  // Echo the table header
//     echo '<table border="1">
//         <tr>
//             <th>Click</th>
//             <th>User Amount</th>
//             <th>Refer Amount</th>
//             <th>User</th>
//             <th>Refer</th>
//             <th>Event</th>
//             <th>Status</th>
//             <th>Payment Status</th>
//             <th>Payment Message</th>
//             <th>Created At</th>
//         </tr>';

  //     // Loop through each data entry and display in table rows
//     foreach ($data as $entry) {
//     $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);

  //     echo '<tr>';
//     echo '<td>' . $entry['click'] . '</td>';
//     echo '<td>' . $entry['userAmount'] . '</td>';
//     echo '<td>' . $entry['referAmount'] . '</td>';
//     echo '<td>' . $userEncoded . '</td>'; // Display encoded user
//     echo '<td>' . $entry['refer'] . '</td>';
//     echo '<td>' . $entry['event'] . '</td>';
//     echo '<td>' . $entry['status'] . '</td>';
//     echo '<td>' . $entry['referPaymentStatus'] . '</td>';
//     echo '<td>' . $entry['payMessage'] . '</td>';
//     echo '<td>' . $entry['createdAt'] . '</td>';
//     echo '</tr>';
// }

  //     // Close the table
//     echo '</table>';
// } else {
//     // If there's no data, show a JavaScript alert
//     echo '<script>alert("No data found.");</script>';
// }
  ?>
  <html lang="en" dir="ltr">


  <head>
    <meta charset="utf-8">
    <title>FokatCash</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
    <link rel="stylesheet" href="report.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width">
  </head>
  <style>
    .data-table td,
    .data-table th {
      font-size: 17px;
      /* Adjust the value as needed */
    }

    .credited {
      color: #FFA500;
      /* Orange color */
    }
  </style>

  <body>
    <center>
      <div class="login-form">
        <h1>
          <font color='#0f0f0f'>REPORT
        </h1>
        <center>

  </body>

  </html>

  <div class="statics">
    <center><br>
      <fieldset>Refferer:
        <?php echo $user; ?>
        <hr>Camp:
        <?php echo $cname; ?>
        <hr>Total Clicks:
        <?php echo $totalClicks; ?>
        <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
        <hr>
        <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
        <!-- Placeholder for total refer amount -->
        <hr>
        <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
        <hr>
      </fieldset><br><br>
      <table class="data-table">
        <tr>

          <th>Camp Name</th>
          <th>Refer Amount</th>
          <!--<th>Refer Status</th>-->
          <th>Cashback Status</th>
          <th>Time</th>
        </tr>
        <?php
        foreach ($data as $entry) {
          $userEncoded = preg_replace('/\d{5}(?=\d{4}$)/', 'xxxxx', $entry['user']);
          $dateTime = new DateTime($entry['createdAt']);

          // Convert to IST timezone
          $dateTime->setTimezone(new DateTimeZone('Asia/Kolkata'));

          // Format the time in desired format
          $istTimeFormatted = $dateTime->format('Y-m-d H:i:s');

          if ($entry['referPaymentStatus'] === 'REJECTED' || $entry['referPaymentStatus'] === 'BLOCKED') {
            continue;
          }

          if ($entry['referPaymentStatus'] == 'ACCEPTED' || $entry['referPaymentStatus'] == 'UNKNOWN' || $entry['referPaymentStatus'] == 'FAILURE') {
            $cashbackStatus = '<b><span style="color: #198754;">Credited</span></b>';
          } elseif ($entry['referPaymentStatus'] == 'PENDING') {
            $cashbackStatus = '<b><span style="color: #FFA500;">Processing</span></b>';
          } else {
            // Handle other cases or set a default value for $cashbackStatus
            // For example: $cashbackStatus = 'Unknown Status';
            $cashbackStatus = $entry['referPaymentStatus'];
          }


          if ($entry['referAmount'] > 0) {
            echo '<tr>';
            // echo '<td>' . $entry['click'] . '</td>';
            // echo '<td>' . $entry['userAmount'] . '</td>';
            echo '<td>' . $cname . '</td>';
            echo '<td>' . $entry['referAmount'] . '</td>';
            // echo '<td>' . $userEncoded . '</td>'; // Display encoded user
            // echo '<td>' . $entry['refer'] . '</td>';
            // echo '<td>' . $entry['event'] . '</td>';
            // echo '<td>' . $entry['status'] . '</td>';
            echo '<td>' . $cashbackStatus . '</td>';
            // echo '<td>' . $entry['payMessage'] . '</td>';
            echo '<td>' . $istTimeFormatted . '</td>';
            echo '</tr>';
          }
        }
        // Close the table
        echo '</table>';
} else {
  // If there's no data, show a JavaScript alert
  ?>
        <html lang="en" dir="ltr">


        <head>
          <meta charset="utf-8">
          <title>FokatCash</title>
          <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap">
          <link rel="stylesheet" href="report.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
          <meta name="viewport" content="width=device-width">
        </head>
        <style>
          .data-table td,
          .data-table th {
            font-size: 17px;
            /* Adjust the value as needed */
          }

          .credited {
            color: #FFA500;
            /* Orange color */
          }
        </style>

        <body>
          <center>
            <div class="login-form">
              <h1>
                <font color='#0f0f0f'>REPORT
              </h1>
              <center>

        </body>

        </html>

        <div class="statics">
          <center><br>
            <fieldset>Refferer:
              <?php echo $user; ?>
              <hr>Camp:
              <?php echo $cname; ?>
              <hr>Total Clicks:
              <?php echo $totalClicks; ?>
              <hr>Total Conversions: <span id="totalLeads">Calculating...</span> <!-- Placeholder for total leads -->
              <hr>
              <font color="#008000"> Cashback Sent: Rs. <span id="totalAcceptedReferAmount">Calculating...</span> </font>
              <!-- Placeholder for total refer amount -->
              <hr>
              <font color="#FFA500">Pending Cashback : Rs.<span id="totalPendingReferAmount">Calculating...</span></font>
              <hr>
            </fieldset><br><br>

            <h5>No data Found</h5>
            <?php


}
?>
    </table>
    <!-- ... Your existing code ... -->
    <script>
  // JavaScript to calculate and display the total leads count and total refer amounts
  document.addEventListener("DOMContentLoaded", function () {
    // Calculate the total leads count and total refer amounts based on the payment statuses and refer amount conditions
    var totalLeads = 0;
    var totalAcceptedReferAmount = 0;
    var totalPendingReferAmount = 0;
    var totalFailedReferAmount = 0;
    var totalUnknownReferAmount = 0;
    var event = "<?php echo $event; ?>";

    <?php foreach ($data as $entry): ?>
      <?php if ($entry['referPaymentStatus'] !== 'REJECTED' && $entry['referPaymentStatus'] !== 'BLOCKED' && $entry['referAmount'] > 0): ?>
        totalLeads++;
        <?php if ($entry['referPaymentStatus'] === 'ACCEPTED'): ?>
          totalAcceptedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'PENDING'): ?>
          totalPendingReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'FAILURE'): ?>
          totalFailedReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php elseif ($entry['referPaymentStatus'] === 'UNKNOWN'): ?>
          totalUnknownReferAmount += parseFloat(<?php echo $entry['referAmount']; ?>);
        <?php endif; ?>
      <?php endif; ?>
    <?php endforeach; ?>

    // Update the HTML content to display the calculated totals
    var totalLeadsElement = document.getElementById("totalLeads");
    totalLeadsElement.textContent = totalLeads;

    var totalAcceptedReferAmountElement = document.getElementById("totalAcceptedReferAmount");
    totalAcceptedReferAmountElement.textContent = totalAcceptedReferAmount.toFixed(2);

    var totalPendingReferAmountElement = document.getElementById("totalPendingReferAmount");
    totalPendingReferAmountElement.textContent = totalPendingReferAmount.toFixed(2);

    var totalFailedReferAmountElement = document.getElementById("totalFailedReferAmount");
    totalFailedReferAmountElement.textContent = totalFailedReferAmount.toFixed(2);

    var totalUnknownReferAmountElement = document.getElementById("totalUnknownReferAmount");
    totalUnknownReferAmountElement.textContent = totalUnknownReferAmount.toFixed(2);
  });
</script>



    <br><br><br>
    <footer id="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>FokatCash</span></strong>
      </div>
    </footer><!-- End Footer -->
</div><!-- End statics div -->
</center><!-- End center div -->
</body><!-- End body tag -->

</html><!-- End HTML document -->
.center-three-columns .flex_column {
    width: 100% !important;
    margin: 0 !important;
}

.center-three-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

@media (min-width: 768px) {
    .center-three-columns .flex_column {
        width: calc(50% - 15px) !important;
    }
}


@media (min-width: 1251px) {
    .center-three-columns .flex_column {
        width: calc(33.33% - 20px) !important;
    }
}
<Autocomplete
  id="google-map-demo"
  defaultValue={userData.addressLine1 || ''}
  freeSolo // <-- Add this line
  clearOnEscape={false}
  clearIcon={null}
  // ...rest of your props
/>

onChange={(event: any, newValue: PlaceType | string | null) => {
  if (typeof newValue === 'string') {
    // The user entered a new address manually
    setAddress(newValue);
    console.log('Manual input:', newValue);
  } else if (newValue) {
    // The user selected an address from the dropdown
    setAddress(newValue.description);
    console.log('Selected Value:', newValue.description);
  }
}}

    
    
    // Check if primaryEmail and secondaryEmail are same
    if (primaryEmail === secondaryEmail && primaryEmail !== '' && secondaryEmail !== '') {
      errors.primaryEmail = 'Primary and Secondary email cannot be the same';
      errors.secondaryEmail = 'Primary and Secondary email cannot be the same';
    }

  // Check if primaryMobileNumber and secondaryMobileNumber are same
    if (primaryMobileNumber === secondaryMobileNumber && primaryMobileNumber !== '' && secondaryMobileNumber !== '') {
      errors.primaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
      errors.secondaryMobileNumber = 'Primary and Secondary mobile number cannot be the same';
    }

<div className="col-md-6">
              <label htmlFor="email" className="form-label w-100 email-label">
                Primary Email*
              </label>
              
// primary email

<input
                type="email"
                className={`form-control email-input ${formErrors.primaryEmail ? 'input-error' : ''}`}
                id="email"
                placeholder="abc@babc.com"
                defaultValue={userData.primaryEmail}
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />
              {
                primaryEmail === secondaryEmail
                && primaryEmail !== ''
                && secondaryEmail !== ''
                  && (
                  <div className="error-message">
                    {formErrors.primaryEmail}
                  </div>
                  )
              }
            </div>

 // secondary email

<input
                    type="email"
                    className={`form-control secondary-email-input ${formErrors.secondaryEmail ? 'input-error' : ''}`}
                    id="secondary-email"
                    placeholder="secondary@abc.com"
                    defaultValue={userData.secondaryEmail}
                    // onchange
                    onChange={(e) => setSecondaryEmail(e.target.value)}
                    // register
                    {...register('secondaryEmail', {
                      required: true,
                    })}
                  />
                  {formErrors.secondaryEmail && <div className="error-message mt-1">{formErrors.secondaryEmail}</div>}


// primary mobile number

<input
                  type="text"
                  className={`form-control mobile-input ${formErrors.primaryMobileNumber ? 'input-error' : ''}`}
                  id="mobile"
                  placeholder="XXXXXXXXXXXXXX"
                  defaultValue={userData.primaryMobileNumber}
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setPrimaryMobileNumber(input.value);
                  }}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />


// secondary mobile number

                    <input
                      type="text"
                      className={`form-control secondary-mobile-input ${formErrors.secondaryMobileNumber ? 'input-error' : ''}`}
                      id="secondary-mobile"
                      placeholder="XXXXXXXXXXX"
                      defaultValue={userData.secondaryMobileNumber}
                      onInput={(e) => {
                        const input = e.target as HTMLInputElement;
                        const value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                        input.value = value;
                        setSecondaryMobileNumber(value);
                      }}
                      {...register('secondaryMobileNumber', {
                        required: true,
                      })}
                    />
                    {/* {
                      primaryMobileNumber === secondaryMobileNumber
                      && primaryMobileNumber !== ''
                      && secondaryMobileNumber !== ''
                        && (
                        <div className="error-message mt-1">
                          {formErrors.primaryMobileNumber}
                        </div>
                        )
                    } */}
                  </div>
                  {
                      formErrors.secondaryMobileNumber
                      && (
                      <div
                        className="error-message mt-1"
                      >
                        {formErrors.secondaryMobileNumber}
                      </div>
                      )
                    }


  // Scroll to top of page on component mount
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
As of Bootstrap 4.6.0, the default breakpoints for responsive classes are as follows:

Extra small devices (less than 576px): .col-
Small devices (576px and up): .col-sm-
Medium devices (768px and up): .col-md-
Large devices (992px and up): .col-lg-
Extra large devices (1200px and up): .col-xl-
<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>
/* eslint-disable no-restricted-syntax */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';
import { Alert, AlertColor, Snackbar } from '@mui/material';
import MuiAlert from '@mui/material/Alert';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // State for managing snackbar
  const [snackbarOpen, setSnackbarOpen] = useState(false);
  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertColor>('error'); // You can change 'error' to 'warning' or other values if needed

  // Snackbar message to display
  const snackbarMessage = 'Please upload all required documents before proceeding to the next step.';

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  const handleNextStepClick = () => {
    if (!documentIsRequired) {
      // Handle Next Step click logic here
      handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload');
    } else {
      // Show the snackbar with an error message
      setSnackbarSeverity('error'); // You can change 'error' to 'warning' or other values if needed
      setSnackbarOpen(true);
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={handleNextStepClick}
        >
          Next Step
        </button>
      </Box>
      {/* Snackbar */}
      <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={() => setSnackbarOpen(false)}>
        <MuiAlert
          elevation={6}
          variant="filled"
          severity={snackbarSeverity}
          onClose={() => setSnackbarOpen(false)}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';


// snackbar states
  const [snackbarSeverity, setSnackbarSeverity] = React.useState('success');
  const [snackbarOpen, setSnackbarOpen] = React.useState(false);
  const [snackbarMessage, setSnackbarMessage] = React.useState('');



  const handleSnackbarClose = () => {
    // Handle the closing here
    setSnackbarOpen(false);
  };


 	try {
        const response = await trackPromise(api.saveUserRegistrationInformation(formData));
        // console.log('user reg response:', response?.data?.itemGUID);
        if (response?.data?.Output?.isAlreadyExists) {
          setSnackbarMessage('User already exists');
          setSnackbarSeverity('error');
          setSnackbarOpen(true);
        } else {
          dispatch(setUserInfo(response?.data?.Output?.itemGUID));
          setSnackbarMessage('User registered successfully');
          setSnackbarSeverity('success');
          setSnackbarOpen(true);
          setShowModal(true);
        }
      } catch (error) {
        setSnackbarMessage('An error occurred while submitting user registration');
        setSnackbarSeverity('error');
        setSnackbarOpen(true);
      }

// place snackbar at end of root jsx element. for example if parent jsx element is <main>,
 // place snackbar at the end of <main> element.
 
	  <Snackbar
        open={snackbarOpen}
        autoHideDuration={2000}
        onClose={handleSnackbarClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <MuiAlert
          onClose={handleSnackbarClose}
          variant="filled"
          elevation={6}
          severity={snackbarSeverity as MuiAlertProps['severity']}
          sx={{ width: '100%' }}
        >
          {snackbarMessage}
        </MuiAlert>
      </Snackbar>
yes it is working, our client needs further upadates here.

when user uploads all the required files and then moves to other component and return back to DocumentManager component. isRequired property is true in which userhas to upload the requried files again. 

i want to keep documentTypeArray in redux or any state management technique. so when user returns back it should be available. or you can try any other methods. 

ie once reuiqred docs are updated and when we move to documentmanager component, next step button should be disabled. 

below attaching code for your reference:

"""
function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(false);

  // check document is required or not and
  useEffect(() => {
    const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    setDocumentIsRequired(isRequiredDocumentsExist);
  }, [documentTypeArray]);

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
  };

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
  };
  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Updates the document type array by setting the 'isRequired' property to false for the document type
   * with the specified 'documentTypeID'. Returns the updated document type array.
   *
   * @param {any} documentTypeID - The ID of the document type to update
   * @return {void}
   */
  const updateDocumentTypeArray = (documentTypeID: any): void => {
    const updatedDocumentTypeArray = documentTypeArray.map((doc) => (doc.documentTypeID === documentTypeID ? { ...doc, isRequired: false } : doc));
    setDocumentTypeArray(updatedDocumentTypeArray);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any[]) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: { name: string; size: number; }) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: { name: any; }) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      const updatedUploadedFiles = [...uploadedFiles, ...validFiles];
      setUploadedFiles(updatedUploadedFiles);

      // Update the document type array with the document type ID.
      updateDocumentTypeArray(documentTypeID);

      const formData = new FormData();
      for (let i = 0; i < validFiles.length; i++) {
        const file = validFiles[i];
        formData.append('FileDoc', file, file.name);
      }

      dispatch<any>(
        saveDocument(
          isSpouseSelected ? spouseGuid : profileGuid,
          documentTypeID,
          witnessProfileGUID,
          formData,
        ),
      );
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* log documentIsRequired on template */}
      {/* {documentIsRequired && <div>Document is required</div>} */}
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

"""
.details-container::before {
  content: "";
  position: absolute;
  top: 0; /* can delete top/left etc if sizes are 100% */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: -1; /* must be lower number than objects needing to be in front */
}
/* For Mobile Devices (320px - 480px) */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /* Your CSS styles for mobile devices here */
}

/* For iPads and Tablets (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
  /* Your CSS styles for iPads and Tablets here */
}

/* For Laptops and Small Screens (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* Your CSS styles for laptops and small screens here */
}

/* For Large Screens and Desktops (1025px - 1200px) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
  /* Your CSS styles for large screens and desktops here */
}

/* For TV and Extra Large Screens (1201px and more) */
@media screen and (min-width: 1201px) {
  /* Your CSS styles for TV and extra large screens here */
}
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import { AiOutlineClose } from 'react-icons/ai';
import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileListIcon from '@assets/FileListIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';
import Box from '@mui/material/Box/Box';
import Button from '@mui/material/Button/Button';
import { useForm } from 'react-hook-form';
import {
  fetchDocumentTypeList,
  fetchDocumentsList,
  deleteDocument,
  willDocumentUploadSelector,
  saveDocument,
} from '@redux/slices/will-documents-upload';
import { useSelector, useDispatch } from 'react-redux';
import { DocumentTypeList } from '@api/models';
import axios from 'axios';
import { willPersonalInformationSelector } from '@redux/slices/will-personal-information';
import { willsValidatorSelector } from '@redux/slices/willsValidator';
import MirrorWillSwitcher from '@components/MirrorWillSwitcher';
// import custom hook useDocumentsList
import useDocumentsList from '@utils/hooks/useDocumentsList';
import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
import { useLocation } from 'react-router';
import DocumentManagerModal from '@components/DocumentManagerModal';
import { fetchAppointmentDetail } from '@redux/slices/wills-book-appointment';

import { trackPromise } from 'react-promise-tracker';
import { getAppointmentDetail } from '../../redux/slices/wills-book-appointment';
import api from '../../api';

interface Props {
  handleNext: (step: number, stepName?: string) => void;
  currentBtnStep: number;
  handleBack: () => void;
  willTypeID: number;
}

function DocumentManager({
  handleNext, currentBtnStep, handleBack, willTypeID,
}: Props) {
  // const [documentTypeID, setDocumentTypeID] = useState<string>('');
  const [documentTypeArray, setDocumentTypeArray] = useState([]);
  const [documentTypeID, setDocumentTypeID] = useState();
  const [uniqueDocumentId, setUniqueDocumentId] = useState();
  const [witnessProfileGUID, setWitnessProfileGUID] = useState();
  const [willDocGuid, setWillDocGuid] = useState<string>('');
  // const bookedForProfileGUID = 'ba125f2d-8c78-41ce-b576-6aaef9b57c2a';
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const { state } = useLocation();
  const [showBookAppointnentModal, setShowBookAppointnentModal] = useState(false);
  // state for documentIsRequired with boolean type

  // profile guid
  const { isSpouseSelected, spouseGuid, profileGuid } = useSelector(willPersonalInformationSelector);

  const dispatch = useDispatch();

  const handleOpenModal = () => {
    setShowModal(true);
  };
  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleBookAppointmentModalOpen = () => {
    setShowBookAppointnentModal(true);
  };

  const handleBookAppointmentModalClose = () => {
    setShowBookAppointnentModal(false);
  };

  const handleBookAppointmentModalContinue = () => {
    setShowBookAppointnentModal(false);
    // handleNext(currentBtnStep, 'upload');
  };

  // Show a modal on load
  // useEffect(() => {
  //   dispatch<any>(fetchAppointmentDetail(profileGuid))
  //     .then((response: any) => {
  //       console.log('fetchAppointmentDetailResult', response);
  //       // log the response status
  //       if (!response) {
  //         handleBookAppointmentModalOpen();
  //       }
  //     });
  // }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await trackPromise(api.getAppointmentDetail(profileGuid));
        console.log('fetch AppointmentDetail Result', response?.data?.Output);
        // log the timeSlotID
        console.log('timeSlotID:', response?.data?.Output?.timeSlotID);
        if (response?.data?.Output?.timeSlotID === 0) {
          console.log('No appointment details found! Opening modal');
          handleBookAppointmentModalOpen();
        } else {
          const appointmentDetails = response.data.Output;
          console.log('Appointment details:', appointmentDetails);
        }
      } catch (error) {
        console.error('Error fetching appointment detail:', error);
      }
    };
    fetchData();
  }, []);

  // API results from Redux
  const {
    bookedforprofileguid,
    docType,
    documentTypeList,
    documentsList,
    docTypeID,
    isDocumentsChanged,
  } = useSelector(willDocumentUploadSelector);
  const { mirrorWillCheck } = useSelector(willsValidatorSelector);
  // custom hook for document list
  const uploadedDocumentsList = useDocumentsList(documentsList);

  /**
   * Retrieves the list of document types and sets it to the document type array.
   *
   * @return {void} No return value.
   */
  const getDocumentTypeList = () => {
    const documentTypes: any = [];
    documentTypeList.forEach((d: DocumentTypeList) => {
      documentTypes.push({
        documentTypeID: d.docTypeID,
        documentTypeName: d.fileName,
        witnessProfileGUID: d.witnessProfileGUID,
        isRequired: d.isRequired,
      });
    });
    setDocumentTypeArray(documentTypes);
    // log the document type array with a message
    console.log('Document types array:', documentTypeArray);
  };

  const [documentIsRequired, setDocumentIsRequired] = useState<boolean>(
    documentTypeArray.some((d) => d.isRequired),
  );

  // Check for Document Required or not
  // if (documentTypeArray.some((d) => d.isRequired)) {
  //   // list reuiqred documents
  //   const requiredDocuments = documentTypeArray.filter((d) => d.isRequired);
  //   console.log('Required documents:', requiredDocuments);
  // }

  // API calls inside useEffects -------
  useEffect(() => {
    // dispatch<any>(fetchDocumentTypeList(bookedForProfileGUID));
    dispatch<any>(fetchDocumentTypeList(isSpouseSelected ? spouseGuid : profileGuid));
  }, [dispatch, isSpouseSelected]);

  useEffect(() => {
    // Dispatch the fetchDocumentsList action when documentTypeID changes
    dispatch<any>(fetchDocumentsList(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID));
  }, [uniqueDocumentId, documentTypeID, isDocumentsChanged, isSpouseSelected]);

  // Result transformation for UI
  useEffect(() => {
    getDocumentTypeList();
  }, [documentTypeList]);

  const { handleSubmit } = useForm();
  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (docTypeId: any, witnessProfileGUID: any) => {
    const uniqueDocumentId: any = `${docTypeId}-${witnessProfileGUID}`;
    setUniqueDocumentId(uniqueDocumentId);
    setDocumentTypeID(docTypeId);
    setWitnessProfileGUID(witnessProfileGUID);
    console.log(witnessProfileGUID, uniqueDocumentId);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: any) => ({
    backgroundColor: uniqueDocumentId === element ? '#023979' : '#F4F4F4',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: any) => ({
    color: uniqueDocumentId === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: any) => (uniqueDocumentId === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: any) => (uniqueDocumentId === element ? TickMarkIconGreen : TickMarkIconGrey);

  /**
   * Handles click event on "Add File" button.
   *
   * @param {any} e - The event object.
   * @return {void} Nothing is returned by this function.
   */
  const [documentTypeArrayCopy, setDocumentTypeArrayCopy] = useState([...documentTypeArray]);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    documentTypeArrayCopy.forEach((d) => {
      if (d.isRequired) {
        setDocumentIsRequired(true);
        // update the documentTypeArrayCopy with the new value of documentIsRequired
        documentTypeArrayCopy.push({ ...d, isRequired: false });
        // log the updated documentTypeArrayCopy
        console.log('documentTypeArrayCopy:', documentTypeArrayCopy);
        setDocumentTypeArrayCopy(documentTypeArrayCopy);
      }
      setDocumentIsRequired(false);
    });
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
    // store documentTypeArray to a new array
    // check if any of the documents is required, if yes, set documentIsRequired to true

    // const isRequiredDocumentsExist = documentTypeArray.some((d) => d.isRequired);
    // // log the result of the check
    // console.log('isRequiredDocumentsExist:', isRequiredDocumentsExist);
    // setDocumentIsRequired(isRequiredDocumentsExist);
  };

  /**
   * Handles the file input change event.
   *
   * @param {any} e - the event object
   * @return {void}
   */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */

  // Check the validity of uploaded files
  const checkFileValidity = async (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    // Filter valid files based on extension and file size
    const validFiles = files.filter((file: any) => {
      // Check if the file extension is valid
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      // Check if the file size is within the allowed limit
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    // Filter invalid files
    const invalidFiles = files.filter(
      (file: any) => !validFiles.includes(file),
    );
    if (invalidFiles.length > 0) {
      // Display an alert message for invalid files
      const invalidFileNames = invalidFiles
        .map((file: any) => file.name)
        .join(', ');
      alert(
        `Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`,
      );
    } else {
      // Add valid files to the uploaded files list
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      if (uploadedFiles) {
        const formData = new FormData();
        for (let i = 0; i < validFiles.length; i++) {
          const file = validFiles[i];
          formData.append('FileDoc', file, file.name);
        }

        dispatch<any>(saveDocument(isSpouseSelected ? spouseGuid : profileGuid, documentTypeID, witnessProfileGUID, formData));
      }
    }
  };

  /**
   * Removes a file from the system.
   *
   * @param {string} willDocGuid - the unique identifier of the file to be removed
   * @return {any} the result of the delete operation
   */
  const removeFile = (willDocGuid: string) => {
    setWillDocGuid(willDocGuid);
    handleOpenModal();
  };

  const deleteFile = () => {
    console.log(`Delete the doc with GUID: ${willDocGuid}`);
    dispatch<any>(deleteDocument(willDocGuid));
    // log the result of the delete operation
    console.log('File removed successfully!');
    setShowModal(false);
  };

  const handleUploadDocument = (data: any) => {
    console.log(data);
    // handle document upload
    handleNext(currentBtnStep, 'upload');
  };

  const {
    getRootProps, // Props for the file drop zone element
    getInputProps, // Props for the file input element
  } = useDropzone({
    onDrop: handleFileDrop, // Callback function for handling dropped or selected files
  });

  return (
    <main>
      <section>
        {mirrorWillCheck && <MirrorWillSwitcher />}
        <header className="header mt-4">Upload Documents</header>
        <p className="description">
          Upload the documents in PDF or JPEG format. Click on Next Step to save
          the files once all the documents have been uploaded
        </p>
      </section>
      <div className="row document-upload-container">
        <div className="col-lg-6 content-wrapper">
          {documentTypeArray?.map((type) => (
            <div
              className={`top${
                uniqueDocumentId === `${type?.documentTypeID}-${type?.witnessProfileGUID}` ? ' active' : ''
              }`}
              style={getBackgroundStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
              onClick={() => handleElementClick(type?.documentTypeID, type?.witnessProfileGUID)}
            >
              <div className="left-container">
                <div className="file-upload-icon">
                  <img
                    src={getFileUploadIcon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                    alt="File Uploader Icon"
                  />
                </div>
                <div
                  className="document-title"
                  style={getTitleStyle(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                >
                  {type.documentTypeName}
                </div>
              </div>
              <div className="tick-icon">
                <img
                  src={getTickMarkicon(`${type?.documentTypeID}-${type?.witnessProfileGUID}`)}
                  alt="Tick Mark"
                />
              </div>
            </div>
          ))}
        </div>

        <div
          className="col-lg-6 row-item"
          {...getRootProps()}
          onClick={handleRowItemClick}
        >
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend
            using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File
            size cannot be more than 20 megabytes (MB). Your files will be
            uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button className="add-file-btn" onClick={handleAddFileClick}>
              Add File
            </button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedDocumentsList.length > 0
            && uploadedDocumentsList.map((file: any, index) => (
              <div className="file-list-item" key={index}>
                <div className="file-info">
                  <div className="file-icon">
                    <img src={FileListIcon} alt="File List Icon" />
                  </div>
                  <div className="file-name">{file.fileName}</div>
                </div>
                <div className="close-icon" onClick={() => removeFile(file.willDocGuid)}>
                  <span className="close-icon-text">Remove</span>
                </div>
              </div>
            ))}
        </div>
      </div>
      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
        {documentIsRequired}
        <button
          type="button"
          className="next-btn"
          onClick={() => handleNext(state === 'Guardianship Will' ? 6 : currentBtnStep, 'upload')}
          disabled={documentIsRequired}
        >
          Next Step
        </button>
      </Box>
      <span className="next-btn-text mt-4">
        *Before clicking next, please make sure the details provided here are
        correct.
      </span>
      <DeleteConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={deleteFile}
        type="Document"
      />
      {/* render DocumentManagerModal */}
      {
          (willTypeID === 1 || willTypeID === 2) && (
            <DocumentManagerModal
              showBookAppointnentModal={showBookAppointnentModal}
              handleBookAppointmentModalClose={handleBookAppointmentModalClose}
              handleBookAppointmentModalContinue={handleBookAppointmentModalContinue}
              handleNext={handleNext}
              currentBtnStep={currentBtnStep}
              handleBack={handleBack}
            />
          )
        }

    </main>
  );
}

export default DocumentManager;
<DesktopDatePicker 
    value={dateOfBirth} 
    disableFuture 
    onChange={(e:any, newVal:any)=> handleDate(e, newVal)}
    renderInput={(params:any) =>
        <TextField {...params} error={false} />}
    />
 
HandleChange Function
    const handleDate = (e: any, newVal: any) => {
      console.log('formatted date', moment(e?._d).format());
      const formattedDate = moment(e?._d).format();
      setDateOfBirth(formattedDate);
    };
 
State variable and datatype
    const [dateOfBirth, setDateOfBirth] = useState<string>(null);
 
Repopulating value
    setDateOfBirth(selectedBeneficiary?.dateOfBirth?.slice(0, 10));
<button onclick="copyCouponCode()">
  <i class="fas fa-link"></i> קוד קופון: POLRAM17
</button>

<script>
  function copyCouponCode() {
    var couponCode = "POLRAM17";
    navigator.clipboard.writeText(couponCode).then(function() {
      alert("הקוד הועתק בהצלחה!");
    }, function() {
      alert("שגיאה בעת העתקת הקוד.");
    });
  }
</script>
"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

You are react developer expert.
when i click on card-container-draft-will div element, to attribute of Link component is not changing.
it should be `/wills/Templated-Full-Will/6`.
right now it is `/wills//`.
pleasde make neccessary change ans return the correct code.


your solution is appreciated gpt.
but when i click on card-container-draft-will div element second time, route is not updating. initially when component loads, route is correct, route navigated to `/wills/Templated-Full-Will/6`.
but when user clicks on second time or more it is set to  `/wills//` as route.
somethnig is wrong. please check code thouroghly and find a solution to resolve this bug.

It is still not working.
when component loads initially, route is /wills/Templated-Full-Will/6, then i click on card-container-will-copy-upload, route again updated to wills/Full-Will/1, but when i again click on 
card-container-draft-will div element, route is not set to /wills/Templated-Full-Will/6. i want the route to set to /wills/Templated-Full-Will/6. there are some bugs in handleCardClick function.
please update the code.\


  const handleContinueButtonClick = () => {
    const formattedWillTypeName = selectedWillCard.willTypeName.split(' ').join('-');
    const toPath = `/wills/${formattedWillTypeName}/${selectedWillCard.willTypeID}`;
    console.log('Path: ', toPath);
    navigate(toPath, { state: selectedWillCard.willTypeName });
  };

Path:  /wills//

i am getting the path as above when i again click on card-container-draft-will div element.

 i want path to be: /wills/Templated-Full-Will/6
"""
function ChooseMethodModal({ showModal, handleModalClose, handleContinue }: ChooseMethodModalProps) {
  const [activeCard, setActiveCard] = useState('draftWill');
  const [selectedWillCard, setSelectedWillCard] = React.useState({
    willTypeName: 'Templated Full Will',
    willTypeID: '6',
  });
  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    // dispatch<any>(fetchWillsList());
  }, []);

  /**
 * Handles the click event on the card and sets the active card name.
 *
 * @param {string} cardName - The name of the card that was clicked.
 * @return {void} This function does not return anything.
 */
  const handleCardClick = (cardName: string) => {
    setActiveCard(cardName);
    // log the card name
    console.log(cardName);
    // log active card
    console.log(activeCard);
    const { willTypeName, willTypeID } = results.find((will: any) => {
      if (cardName === 'draftWill') return will.willTypeName === 'Templated Full Will';
      if (cardName === 'willCopyUpload') return will.willTypeName === 'Full Will';
      return false;
    }) || { willTypeName: '', willTypeID: '' };
    setSelectedWillCard({ willTypeName, willTypeID });
  };

  const isAnyWillCardSelected = selectedWillCard.willTypeName !== '' && selectedWillCard.willTypeID !== '';

  return (
    <Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Draft Will Using the System
            </div>
            <div
              className="text-center choose-method-draft-will-desc"
              style={{ marginTop: '10px', marginBottom: '10px' }}
            >
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div
              className="choose-method-will-upload-icon-container"
              style={{ marginBottom: '20px', marginTop: '20px' }}
            >
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px', textAlign: 'center' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
  );
}
"""

when component loads, card-container-draft-will is selected by default. when user clicks on card-container-will-copy-upload, that element is selected. But when user clicks on card-container-draft-will again after clickin will-copy-upload, problem is when clicking continue button, Link is not naviating to the indented component/page. it is not moving to indented page.
please update the code. and make it correct.
but now when i click on card-container-draft-will element, COnitnue button not showing. please fix this bug.
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
"""
<div className="col-md-6">
              <label
                htmlFor="companyContactNumber"
                className="form-label w-100 company-contact-number-label"
              >
                Company Contact Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  ref={autocompleteRef}
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                {/* handle errors */}
                {formErrors.isdCode && (
                <span className="error-message">{formErrors.isdCode}</span>
                )}
                {/* company contact input */}
                <input
                  type="text"
                  className="form-control company-contact-number-input"
                  id="companyContactNumber"
                  placeholder="XXXXXXXXXXXXXX"
                  onInput={(e) => {
                    const input = e.target as HTMLInputElement;
                    input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces
                    setCompanyContactNumber(input.value);
                  }}
                  {...register('companyContactNumber', {
                    required: true,
                  })}
                />
                {/* handle errors */}
                {formErrors.companyContactNumber && (
                <span className="error-message">{formErrors.companyContactNumber}</span>
                )}
              </div>
</div>
"""

consider you are react developer.
client wants to achieve below changes in the form.

1. You have to display isdCode error below that particular autocomplete field. currently it is shown right to the field. Show it under field.

2. You have to display company contact number error below that particular field. currently it is shown right to the field. Show it under field.

3. make appropriate changes in the code and return the code.



""" 
<div className="row form-row mb-4 align-items-center">
            <div className="col-md-6">
              <label
                htmlFor="resident"
                className="form-label w-100 resident-label"
              >
                Are you a Resident of the UAE?
              </label>
            </div>
            <div className="col-md-6 d-flex justify-content-between align-items-center">
              <OptionButtons
                options={residentOrNotOptions}
                selectedOption={resident}
                onOptionSelected={handleResidentOptionSelect}
              />
            </div>
          </div>

          {/* row with columns for emirates id */}
          <div className="row form-row mb-5">
            {/* Emirates ID Col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesId"
                className="form-label w-100 emirates-id-label"
              >
                Emirates ID*
              </label>
              <input
                type="text"
                className="form-control emirates-id-input"
                id="emiratesId"
                placeholder="XXXX XXXX XXXX"
                defaultValue={userData.emiratesID}
                maxLength={15}
                onChange={(e) => setEmiratesID(e.target.value)}
                onInput={(e) => {
                  const input = e.target as HTMLInputElement;
                  input.value = input.value.replace(/\D/g, '');
                  setEmiratesID(input.value);
                }}
                {...register('emiratesID', {
                  required: true,
                })}
              />

              {/* handle errors */}
              {/* {formErrors.emiratesID && (
              <span className="error-message">{formErrors.emiratesID}</span>
              )} */}
            </div>
            {/* passport expiry date col */}
            <div className="col-md-6">
              <label
                htmlFor="emiratesIdExpiryDate"
                className="form-label w-100 emiratesId-expiry-date-label"
              >
                Emirates ID Expiry Date*
              </label>
              {/* Date Picker to handle emirates id expiry */}
              <DatePicker
                onChange={handleEmiratesExpiryDatePicker}
                value={emiratesIDExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Choose Date',
                    }}
                    {...register('emiratesIDExpiryDate', {
                      required: true,
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
              {/* handle errors */}
              {formErrors.emiratesIDExpiryDate && (
              <span className="error-message">{formErrors.emiratesIDExpiryDate}</span>
              )}
            </div>
          </div>

"""

You are an experienced react developer.
Client want some changes in form. Details were given in below bullet points:

1. When the value of resident props of OptionButtons is No, emiratesid and emirates expiry date datepicker should be disabled.
Ie user should  not be able to input or select any data in both fields.
2. if the value is Yes, both emiratesid and emirates expiry date datepicker are enabled. 
3. Initialy when component is loaded, both were enabled.
4. It is disable only when user choose resident as No, else both the inputs were enabled.

please update the code as per my above requirements.


/* small cart and burger menu*/

/*cart*/

.header .header-actions-action--cart .icon {
    width: 17px;
    stroke-width: 1.5;
}

.header .header-actions-action--cart .icon {
  	 left: unset !important;
    right: -2.5px !important;
}

/* burger */
.burger-inner>div {
    width: 70% !important;
    height: 1px !Important;
}

.burger-inner>div {
    left: unset !important;
    right: 10 !important;
}
To populate the form fields of the previous step when the "Back" button is clicked, you can store the form data in the parent component and pass it as props to the child components. Here's an updated example:

UserOnBoardingMain component:

```jsx
import React, { useState } from 'react';
import UserRegistrationForm from './UserRegistrationForm';
import UserRegistrationFormAddressInfo from './UserRegistrationFormAddressInfo';
import UserRegistrationFormCompanyInfo from './UserRegistrationFormCompanyInfo';

const UserOnBoardingMain = () => {
  const [step, setStep] = useState(1);
  const [userData, setUserData] = useState({});

  const handleNextStep = (data) => {
    setUserData((prevData) => ({ ...prevData, ...data }));
    setStep((prevStep) => prevStep + 1);
  };

  const handleBackStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  return (
    <>
      {step === 1 && (
        <UserRegistrationForm onNextStep={handleNextStep} userData={userData} />
      )}
      {step === 2 && (
        <UserRegistrationFormAddressInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
      {step === 3 && (
        <UserRegistrationFormCompanyInfo
          onNextStep={handleNextStep}
          onBackStep={handleBackStep}
          userData={userData}
        />
      )}
    </>
  );
};

export default UserOnBoardingMain;
```

UserRegistrationForm component:

```jsx
import React from 'react';
import { useForm } from 'react-hook-form';

const UserRegistrationForm = ({ onNextStep, userData }) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    onNextStep(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      <input {...register('fieldName')} defaultValue={userData.fieldName} />
      {/* Other form fields */}
      <button type="submit">Next</button>
    </form>
  );
};

export default UserRegistrationForm;
```

UserRegistrationFormAddressInfo and UserRegistrationFormCompanyInfo components would have similar implementations.

In the above code, the `userData` state is updated whenever the `handleNextStep` function is called, which is triggered when the "Next" button is clicked in each form step. The `userData` is then passed as props to the child components. When the "Back" button is clicked, the `handleBackStep` function is called, which reduces the `step` value by 1, allowing you to navigate back to the previous step.

By providing the `defaultValue` prop to each form field in the `UserRegistrationForm` component, the fields will be populated with the corresponding values from the `userData` object. This way, when you navigate back to the previous step, the form fields will be prepopulated with the previously entered values.

Make sure to adjust the form field names and structure according to your specific requirements.
To create a Google Maps API, follow these steps:

1. Go to the Google Cloud Console: https://console.cloud.google.com.
2. Sign in with your Google account or create a new account if you don't have one.
3. Create a new project by clicking on the project dropdown at the top of the page and selecting "New Project." Enter a name for your project and click "Create."
4. Once your project is created, you will be redirected to the project dashboard.
5. Enable the Google Maps JavaScript API:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Library."
   - Search for "Google Maps JavaScript API" and select it from the results.
   - Click on the "Enable" button.
6. Set up API credentials:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Credentials."
   - Click on the "Create credentials" button and select "API key."
   - Copy the generated API key.
7. Restrict your API key (optional, but recommended for security):
   - On the credentials page, click on the API key you created.
   - Under "Key restriction," select the option that best fits your use case (e.g., HTTP referrers, IP addresses).
   - Configure the allowed referrers or IP addresses as needed.
8. Use your API key in your code:
   - Replace `YOUR_API_KEY` in your code with the API key obtained in the previous step.

Make sure to follow any additional usage limits and terms of service specified by Google. It's also important to secure and protect your API key to prevent unauthorized usage.

Please note that creating and using the Google Maps API may involve costs depending on your usage and the services used. Refer to the Google Cloud Console for pricing information and billing details.
Error:
Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

https://www.youtube.com/watch?v=n1UorU1PALk&t=47s

The "ApiNotActivatedMapError" error typically occurs when the Google Maps JavaScript API is not activated or enabled for your project. Here are some steps you can follow to resolve this error:

1. Go to the Google Cloud Console (https://console.cloud.google.com).
2. Select your project or create a new project if needed.
3. Make sure you have a billing account associated with your project. The Google Maps JavaScript API requires a billing account to be set up.
4. Enable the Google Maps JavaScript API for your project. You can do this by following these steps:
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Library".
   - Search for "Google Maps JavaScript API" and select it from the results.
   - Click on the "Enable" button.
5. Set up the required API credentials. You need to create an API key and configure it to be used in your code.
   - Click on the menu icon (☰) in the upper-left corner of the Cloud Console.
   - In the sidebar, click on "APIs & Services" > "Credentials".
   - Click on the "Create credentials" button and select "API key".
   - Copy the generated API key.
6. Update your code with the API key.
   - Replace `GOOGLE_MAPS_API_KEY` in your code with the API key obtained in the previous step.

After completing these steps, the Google Maps JavaScript API should be activated and the "ApiNotActivatedMapError" should no longer occur.
Sure, here is an email you can send to your HR:

Subject: Sick Leave Request

Dear Sony R,

I am writing to request a sick leave for today, June 28, 2023, due to fever and cold. I woke up this morning with a fever of 102 degrees Fahrenheit and a sore throat. I have also been feeling congested and have a runny nose.

I have already made an appointment with my doctor and will be going to see them later today. I will keep you updated on my condition and let you know when I expect to be back in the office.

In the meantime, I have already informed my team of my absence and have asked [colleague's name] to cover my workload.

I apologize for any inconvenience this may cause.

Thank you for your understanding.

Sincerely,

Jissmon Jose
Software Developer
8921762662
  const handleMobileNumberValidation = (phone: string) => {
    // const mobileNumberRegex = /^[+0-9\s]*$/;
    // const mobileNumberRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
    const mobileNumberRegex = /^(?:[0-9] ?){6,14}[0-9]$/;
    return mobileNumberRegex.test(phone);
  };


    if (primaryMobileNumber.trim() !== '') {
      if (!handleMobileNumberValidation(primaryMobileNumber)) {
        errors.primaryMobileNumber = 'Invalid mobile number';
      }
    }


    <div className="col-md-6">
              <label htmlFor="mobile" className="form-label w-100 mobile-label">
                Primary Mobile Number*
              </label>
              <div className="d-flex">
                {/* autocomlete field for isdcodelist */}
                <Autocomplete
                  disablePortal
                  id="isdcodelist"
                  options={isdCodesList}
                  isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      {...register('isdCode', {
                        required: true,
                      })}
                      className="isd-code-input"
                      placeholder="+971"
                    />
                  )}
                  renderOption={(props, option) => (
                    <span
                      className="phone-number-option"
                      {...props}
                    >
                      {option.countryName}
                    </span>
                  )}
                            // onchange event handler to set the isdCode state
                  onChange={(e, value: any) => setIsdCode(
                    value?.label,
                  )}
                />
                <input
                  type="text"
                  className="form-control mobile-input"
                  id="mobile"
                  placeholder="XXX XXX XXXX"
                // onchange
                  onChange={(e) => setPrimaryMobileNumber(e.target.value)}
                  {...register('primaryMobileNumber', {
                    required: true,
                  })}
                />
              </div>
              {/* handle errors */}
              {formErrors.primaryMobileNumber && (
              <span className="error-message">{formErrors.primaryMobileNumber}</span>
              )}
            </div>

const [formErrors, setFormErrors] = useState<UserRegistrationDetails>({
    firstName: '',
    lastName: '',
    gender: '',
    dateOfBirth: '',
    primaryEmail: '',
    secondaryEmail: '',
    primaryMobileNumber: '',
    secondaryMobileNumber: '',
    service: '',
  });

  const validateEmail = (email: string) => {
    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
    return emailRegex.test(email);
  };

 const handleUserRegistrationForm = () => {
   
  const handleEmptyField = (fieldName: string, fieldValue: string, errorMessage: string) => {
      if (!fieldValue) {
        errors[fieldName] = errorMessage;
      }
    };

    handleEmptyField('firstName', firstName, 'First name is required');
    handleEmptyField('lastName', lastName, 'Last name is required');
    handleEmptyField('primaryEmail', primaryEmail, 'Primary email is required');
    handleEmptyField('primaryMobileNumber', primaryMobileNumber, 'Primary mobile number is required');
    handleEmptyField('dateOfBirth', dateOfBirth, 'Date of birth is required');

    if (primaryEmail.trim() !== '') {
      if (!validateEmail(primaryEmail)) {
        errors.primaryEmail = 'Invalid email';
      }
    }

    setFormErrors(errors);

 }
 
<input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
                // onchange
                onChange={(e) => setPrimaryEmail(e.target.value)}
                {...register('primaryEmail', {
                  required: true,
                })}
              />




<DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                disableFuture
                maxDate={subYears(new Date(), 21)}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      readOnly: true,
                      placeholder: 'Select Date of Birth',
                    }}
                    {...register('dateOfBirth', {
                      required: true,
                      validate: {
                        ageVerification: (dateString) => {
                          const date = new Date(dateString);
                          return isAfter(subYears(new Date(), 21), date);
                        },
                      },
                    })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>
<input
  type="text"
  className="form-control firstname-input"
  id="firstname"
  placeholder="John"
  onInput={(e) => {
    const input = e.target as HTMLInputElement;
    input.value = input.value.replace(/[^a-zA-Z ]/g, '');
    setFirstName(input.value);
  }}
  {...register('firstName', {
    required: true,
  })}
/>
<!doctype html>

  <head>
    <!-- CSS CODE -->
   <style>
    #pdf_renderer {
      display: block;
      margin: 0 auto;
    }
    </style>
  
  </head>
<body>
     <div id="my_pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>

        <center>
            <div id="navigation_controls">
                <button id="go_previous">Previous</button>
                <input id="current_page" value="1" type="number"/>
                <button id="go_next">Next</button>
            </div>

            <a href="Resume_14.docx.pdf" download="Resume_14.docx.pdf">
            Download PDF</a>
        </center>
    </div>
    <script>
        var myState = {
            pdf: null,
            currentPage: 1,
            zoom: 1
        }
     
        pdfjsLib.getDocument('./Resume_14.docx.pdf').then((pdf) => {
            myState.pdf = pdf;
            render();
        });

        function render() {
            myState.pdf.getPage(myState.currentPage).then((page) => {
         
                var canvas = document.getElementById("pdf_renderer");
                var ctx = canvas.getContext('2d');
     
                var viewport = page.getViewport(myState.zoom);
                canvas.width = viewport.width;
                canvas.height = viewport.height;
         
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        document.getElementById('go_previous').addEventListener('click', (e) =>
        {
          if(myState.pdf == null || myState.currentPage == 1) 
            return;
          myState.currentPage -= 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('go_next').addEventListener('click', (e) => {
          if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages) 
             return;
          myState.currentPage += 1;
          document.getElementById("current_page").value = myState.currentPage;
          render();
        });
        document.getElementById('current_page').addEventListener('keypress', (e) => {
          if(myState.pdf == null) return;
         
          // Get key code 
          var code = (e.keyCode ? e.keyCode : e.which);
         
          // If key code matches that of the Enter key 
          if(code == 13) {
            var desiredPage = document.getElementById('current_page').valueAsNumber;
                                 
            if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
                myState.currentPage = desiredPage;
                document.getElementById("current_page").value = desiredPage;
                render();
            }
           }
        });

    </script>
  </body>
</html>
HTML, XML
#fecha {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(orange,
            fuchsia,
            springgreen,
            fuchsia,
            dodgerblue,
            springgreen,
            fuchsia,
            orange,
            orange,
            fuchsia,
            springgreen);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
[selector] {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(rgb(44, 42, 42),
            rgba(240, 255, 255, 0.767),
            rgb(44, 42, 42),
            rgba(245, 245, 220, 0.747),
            rgb(44, 42, 42),
            rgba(255, 166, 0, 0.89),
            rgb(44, 42, 42),
            rgba(220, 20, 60, 0.822),
            rgb(44, 42, 42));
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">
                
function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();
<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>
  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>
"""
Problem Description
Given a number N, you have to find the largest Fibonacci number which is less than N.

Input Format
First line contains an integer T - Number of test cases.

Next T lines each have a given number N

Output Format
Print the answer for each test case in a separate line.

Sample Input 1
2

6

13

Sample Output 1
5

8

Explanation 1
In the first test case the largest Fibonacci number less than 6 is 5.

In the second test case the largest Fibonacci number less than 13 is 8 (the next Fibonacci number after 8 is 13 which is equal to the number N i.e. 13)

Constraints
T <= 10^4

0 < N <= 10^9
"""

Please help me to debug the below code based on details given above and return the updated full version of code.

"""
'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.trim().split('\n').map(string => {
        return string.replace(/\s+/g, " ").trim();
    });
    main();
});

function readLine() {
    return inputString[currentLine++];
}

function readIntArr() {
    let str = readLine();
    str = str.split(" ");
    let arr = [];
    for ( let i = 0; i < str.length; i++ ) {
        arr.push(parseInt(str[i], 10));
    }
    return arr;
}

function print(x) {
    process.stdout.write(x + "");
}

function largestFibonacciNumber(n) {
    let a = 0;
    let b = 1;
    while (b <= n)
    {
        a = b;
        b = a + b;
    }
    return a;
}

function main() {
    let t=parseInt(readLine(),10);
    while(t--){
    let n=parseInt(readLine(),10)

    let result=largestFibonacciNumber(n);
    console.log(result);
    }
}
"""

"""
<main className="main-container">
      <section className="image-section">
        <div className="image-container">
          <img
            src={WelcomeImageUserOnBoarding}
            alt="Welcome User On Boarding Image"
            sizes=""
          />
          <div className="image-overlay">
            <h2 className="image-title">Welcome</h2>
            <p className="image-content">The DIFC Courts is an independent common law judiciary based in the Dubai International Financial Centre (DIFC) with jurisdiction governing civil and commercial disputes.</p>
          </div>
        </div>
      </section>
      <section className="registration-section">
        <Typography className="question" sx={{ mt: 2, mb: 1 }}>
          Register Now
        </Typography>
        <Typography className="question-helper">
          Enter Below Details to Continue
        </Typography>
        <div className="button-wrapper">
          <button
            type="button"
          >
            <img
              src={FingerPrintIcon}
              className="finger-print-icon"
              alt="Finger Print Icon"
              sizes=""
            />
            Signup with UAE Pass

          </button>
        </div>
        <Typography
          className="question-helper sub-text"
          sx={{ mt: 3 }}
        >
          Or Enter Details Below
        </Typography>
        <form className="form mt-3">
          <div className="row form-row mb-4">
            {/* FirstName Col */}
            <div className="col-md-6">
              <label
                htmlFor="firstname"
                className="form-label w-100 firstname-label"
              >
                FirstName*
              </label>
              <input
                type="text"
                className="form-control firstname-input"
                id="firstname"
                placeholder="John"
              />
            </div>
            {/* LastName Col */}
            <div className="col-md-6">
              <label
                htmlFor="lastname"
                className="form-label w-100 lastname-label"
              >
                LastName*
              </label>
              <input
                type="text"
                className="form-control lastname-input"
                id="lastname"
                placeholder="Doe"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* gender selection buttons */}
            <div className="col-md-6">
              <label
                htmlFor="gender"
                className="form-label w-100 gender-label"
              >
                Gender
              </label>
              <OptionButtons />
            </div>
            {/* Date of Birth Col */}
            <div className="col-md-6">
              <label
                htmlFor="dob"
                className="form-label w-100 dob-label"
              >
                Date of Birth*
              </label>
              <DatePicker
                onChange={handleDatePicker}
                value={dateOfBirth}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      placeholder: 'Select Date of Birth',
                    }}
                    // {...register('dateOfBirth', {
                    //   required: true,
                    // })}
                    className="date-picker date-picker-input"
                  />
                )}
                className="date-picker-field"
              />
            </div>
          </div>
          <div className="row form-row mb-2">
            {/* Email Col */}
            <div className="col-md-6">
              <label
                htmlFor="email"
                className="form-label w-100 email-label"
              >
                Primary Email*
              </label>
              <input
                type="email"
                className="form-control email-input"
                id="email"
                placeholder="abc@babc.com"
              />
            </div>
            {/* Mobile Number Col */}
            <div className="col-md-6">
              <label
                htmlFor="mobile"
                className="form-label w-100 mobile-label"
              >
                Primary Mobile Number*
              </label>
              <input
                type="text"
                className="form-control mobile-input"
                id="mobile"
                placeholder="+971 50 123 4567"
              />
            </div>
          </div>
          <div className="row form-row mb-4">
            {/* Secondary Email Col */}
            <div className="col-md-6">
              <div className="secondary-email">
                <span>
                  Add Secondary Email
                </span>
                {/* increase the size of below AiOutlinePlusCircle icon */}
                <AiOutlinePlusCircle
                  className="secondary-email-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
            {/* Secondary Mobile Number Col */}
            <div className="col-md-6">
              <div className="secondary-mobile">
                <span>
                  Add Secondary Mobile
                </span>
                <AiOutlinePlusCircle
                  className="secondary-mobile-icon"
                  // increase the size
                  size={30}
                />
              </div>
            </div>
          </div>

          {/* Select Services from dropdown list */}
          <div className="row form-row mb-4">
            <div className="col-md-12">
              <label
                htmlFor="services"
                className="form-label w-100 services-label"
              >
                How did you know about this service?
              </label>
              {/* add autocomplete to select */}
              <Autocomplete
                disablePortal
                id="combo-box-demo"
                options={services}
                isOptionEqualToValue={(option, value) => option.label === value.label}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    placeholder="Social Media - LinkedIn / Twitter / Instagram"
                    className="services-input"
                  />
                )}
              />
            </div>
          </div>

          {/* add new row */}
          <div className="row form-row mb-4">
            <div className="col-md-4">
              {/* add a next step button that follows default styles */}
              <button
                type="button"
                className="next-step-button"
              >
                Next
              </button>
            </div>
          </div>

          {/* add new row below */}
          <div className="row form-row mb-4">
            <div className="col-md-6">
              {/* add a text 'Already have an account? Login ' */}
              <span className="already-have-account">
                Already have an account?
              </span>
              {/* wrap login by Link component */}
              <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>

            </div>
          </div>

        </form>
      </section>
    </main>
"""

SASS
--------
"""
/* stylelint-disable */ 
.main-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 112px;
    background: #FFFFFF;
    border-radius: 20px;
}

.image-section {
    position: relative;
    flex: 1;
  }
  
  .image-section img {
    width: 100%; /* Set the desired width */
    height: auto; /* Maintain aspect ratio */
  }

  .registration-section {
    flex: 1;
    padding: 20px;
    margin: 30px;
    box-sizing: border-box; 
    overflow: hidden; 
  }
  
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    margin-bottom: 130px;
  }
  
  .image-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 70px;
    line-height: 64px;
    letter-spacing: -0.04em;
    text-transform: capitalize;
    color: #FFFFFF;
  }
  
  .image-content {
    color: #FFFFFF;
    text-align: left;
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
  }
  
  .question {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 40px !important;
    line-height: 45px !important;
    letter-spacing: -0.04em !important;
    color: #1b202d !important;
  }
  
.question-helper {
    font-family: "Basis Grotesque Arabic Pro" !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #1b202d !important;
}

.button-wrapper {
    margin-top: 40px;
  }
  
  .button-wrapper button {
    width: 100%;
    background: #000000;
    border-radius: 5px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #F5F5F5;
    padding: 16px 50px;
  }

  .finger-print-icon {
    margin-right: 14px;
  }
  
  .firstname-label,
  .lastname-label,
  .gender-label,
  .email-label,
  .mobile-label,
  .services-label
  {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: 'normal';
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
    color: #1b202d;
    margin-top: 0px !important;
  }

  .firstname-input,
  .lastname-input,
  .email-input,
  .mobile-input,
  .services-input
    {
    font-family: 'Basis Grotesque Arabic Pro' !important;
    font-style: 'normal' !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    line-height: 18px !important;
    color: #1b202d !important;
    height: 2.5rem !important;
  }

  .date-picker-field .date-picker-input {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 18px;
  }

  // right align secondary-email and secondary-mobile
  .secondary-email,
  .secondary-mobile {
    text-align: right;
  }

  // add left spacing between secondary-email and secondary-email-icon
  .secondary-email-icon {
    margin-left: 10px;
  }

  // add left spacing between secondary-mobile and secondary-mobile-icon
  .secondary-mobile-icon {
    margin-left: 10px;
  }

  // add background: #023979;
// border-radius: 10px; to next-step-button
.next-step-button {
  background: #023979;
  border-radius: 10px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: #F5F5F5;
  padding: 16px 50px;
  border: none;
}

// add below style to already-have-account
.already-have-account {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #494A53;
}

// add below style to login-text
.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

"""


You are a CSS expert.

Client wanrs to Auto Update the WelcomeImageUserOnBoarding image height when main container height increments. image height should be in sync
with the height change of main container div element.
So when main container height updates image height also auto update with same. Thus it wont leave any spacing at bottom.
I have given the jsx and sass file for your reference.
If you have any questions you can ask.


Solutions:

To achieve the desired effect of the `WelcomeImageUserOnBoarding` image height being in sync with the height change of the `main-container` div element, you can use CSS to make the image responsive and adjust its height accordingly.

Here's an updated version of the SASS code with modifications to make the image height responsive:

```sass
.main-container {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 112px;
  background: #FFFFFF;
  border-radius: 20px;
  position: relative; /* Add position relative to main-container */
}

.image-section {
  position: relative;
  flex: 1;
}

.image-section img {
  width: 100%;
  height: 100%; /* Set the image height to 100% of the parent container */
  object-fit: cover; /* Maintain aspect ratio and cover the entire container */
}

.registration-section {
  flex: 1;
  padding: 20px;
  margin: 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.image-container {
  position: relative;
  display: inline-block;
  width: 100%; /* Set the image container width to 100% */
  height: 100%; /* Set the image container height to 100% */
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  margin-bottom: 130px;
}

/* Rest of the styles remain the same */
```

In this code, I've added `position: relative` to the `main-container` to establish a positioning context for its child elements. Then, I've modified the styles for the `image-section`, `image-container`, and `image-section img` to make the image responsive. By setting the image height to `100%` of the parent container and using `object-fit: cover`, the image will automatically adjust its height to match the height of the `main-container`.

Please ensure you include this updated SASS code in your project and recompile it to generate the CSS styles.
  <Link
                to="/accounts/login"
                className="login-link"
              >
                Login
              </Link>


.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  /* identical to box height */
  color: #1B202D;
  // assign left margin to login-text
  margin-left: 5px;
  // add an underline to login-link
  text-decoration: underline;
}

You are a front end developer
I have applied underline to login link. but letter 'g'  of login text has no underline. i dont how to resolve this. You can apply any styling to put the underline for whole text.

Solution:

It sounds like the g in the word "login" is not being underlined along with the rest of the text, which can happen if the text is not aligned properly with the underline.

To fix this issue, you can try adding the text-underline-offset property to the .login-link class, with a value of 3px or 4px. This property will adjust the position of the underline so that it lines up correctly with the text.



.login-link {
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #1B202D;
  margin-left: 5px;
  text-decoration: underline;
  text-underline-offset: 3px; /* Adjust value as needed */
}


With this change, the underline should now cover the entire text, including the g. You can adjust the value of text-underline-offset as needed to ensure that the underline lines up properly with the text.
JSX
"""
<Modal show={showModal} onHide={handleModalClose} dialogClassName="modal-dialog-centered" size="lg">
      <Modal.Header closeButton>
        <Modal.Title className="modal-title">Choose Method</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className="modal-choose-method-subtitle mb-3">
            List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
          </div>
        </div>
        <div className="d-flex flex-row">
          <div
            className={`card-container-draft-will d-flex flex-column align-items-center ${activeCard === 'draftWill' ? 'active' : ''}`}
            onClick={() => handleCardClick('draftWill')}
          >
            {activeCard === 'draftWill' && (
            <div
              className="check-icon"
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-draft-will-icon-container" style={{ marginBottom: '20px', marginTop: '20px' }}>
              <img src={DraftWillIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-draft-will-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Draft Will Using the System
            </div>
            <div className="text-center choose-method-draft-will-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
          <div
            className={`card-container-will-copy-upload d-flex flex-column align-items-center ${activeCard === 'willCopyUpload' ? 'active' : ''}`}
            style={{ width: '50%', marginRight: '10px', position: 'relative' }}
            onClick={() => handleCardClick('willCopyUpload')}
          >
            {activeCard === 'willCopyUpload' && (
            <div
              className="check-icon"
              style={{
                position: 'absolute', top: '10px', left: '10px', margin: '10px',
              }}
            >
              <img src={FillCheckRoundIcon} alt="Fill Check Icon" />
            </div>
            )}
            <div className="choose-method-will-upload-icon-container">
              <img src={WillCopyUploadIcon} alt="Will Copy Upload Icon" />
            </div>
            <div className="text-center choose-method-will-upload-title" style={{ marginTop: '10px', marginBottom: '10px' }}>
              Upload the Copy of Will
            </div>
            <div className="text-center choose-method-will-upload-desc" style={{ marginTop: '10px', marginBottom: '10px' }}>
              It is a long established fact that a reader will be distracted by the readable content.
            </div>
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className="justify-content-center">
        {
          activeCard && isAnyWillCardSelected && (
            <Link
              to={`/wills/${selectedWillCard.willTypeName.split(' ').join('-')}/${selectedWillCard.willTypeGUID}`}
              state={selectedWillCard.willTypeName}
            >
              <Button
                variant="primary"
              >
                Continue
              </Button>
            </Link>
          )
        }
      </Modal.Footer>
    </Modal>
    
   """
   
   css
   ------
   """
   /* stylelint-disable */ 

.card-container-draft-will.active, .card-container-will-copy-upload.active  {
    background-color: #E4FDFF;
    border-radius: 20px;
    padding: 28px;
}
.card-container-draft-will {
    width: 50%;
    margin-right: 10px;
    position: relative;
}
.modal-choose-method-subtitle {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 18px;
    color: #1B202D;
}

.modal-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 45px;
    letter-spacing: -0.04em;
    color: #1B202D;
}

.btn-close {
    color: #494A53 !important;
    font-size: 10px !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}

.btn-close:before {
    background-color: #f1f1f1 !important;
    border-radius: 50px !important;
  }

  .check-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 10px;
  }
  
  .choose-method-draft-will-icon-container {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .choose-method-will-upload-title {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
  }
  """
  
  You are expert in css to sass conversion.
  Client want the above css to be converted in to sass format.
  it should follow sass styling conventions.
  you have to convert it as per the requirement of client.
  for your reference, i have given the respective JSX content for the above styles.
  you can check the css selectors and make sure current styles wont break.
  Return the converted sass 
import { useDispatch, useSelector } from 'react-redux';
import fetchWillsList, { willsListSelector } from '@redux/slices/wills-list';


  const { results } = useSelector(willsListSelector);

  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch<any>(fetchWillsList());
  }, []);


  const handleCardClick = (cardName: string) => {
    let willTypeName: string = '';
    let willTypeGUID: string = '';
    setActiveCard(cardName);
    results.forEach((will: any) => {
      if (cardName === 'draftWill' && will.willTypeName === 'Templated Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      } else if (cardName === 'willCopyUpload' && will.willTypeName === 'Full Will') {
        willTypeName = will.willTypeName;
        willTypeGUID = will.willTypeGUID;
      }
    });

    setSelectedWillCard({ willTypeName, willTypeGUID });
  };
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
}

h1 {
    color: #333333;
}

p {
    color: #666666;
}

ul {
    color: #777777;
}
In react-router-dom v6 useHistory() is replaced by useNavigate()

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');


"""
 <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
  """                
                  
You are a experienced react developer.
  
currently when user clicks on above link, moves to `/wills/quick-booking` route. 
what you need to do is to first show a bootstrap modal popup before moving to that route. 
so you have to show a modal popup before moving to above quick booking page.
you have to also create a modal pop using boostrap. 

modal contents were given below:

Heading or title
-------------------
Confirm


Content or Subcontent 
--------------------
Testators may enter minimum information to secure an appointment. 
Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation. 
Registered Will Draftsmen are requested to refrain from using the quick booking option

Two Buttons
---------
Continue Button - When user clicks on this button, it moves to /wills/quick-booking to open quick booing page.
Cancel Button - Close the modal popup and not redirected to above route.


No need to apply any styling as of now. We can do it later on. You have to use boostrap modal.
Sure! I can help you with that. Here's an example of how you can create a Bootstrap modal in React and use it to show a confirmation popup before redirecting to the `/wills/quick-booking` route:

First, make sure you have the Bootstrap CSS and JS files included in your project.

Next, create a new React component called `ConfirmationModal`:

```jsx
import React from 'react';
import { Modal, Button } from 'react-bootstrap';

const ConfirmationModal = ({ show, handleClose, handleContinue }) => {
  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>Testators may enter minimum information to secure an appointment.</p>
        <p>
          Full details must be completed 72 hours prior to the booking date to avoid appointment cancellation.
        </p>
        <p>Registered Will Draftsmen are requested to refrain from using the quick booking option.</p>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Cancel
        </Button>
        <Button variant="primary" onClick={handleContinue}>
          Continue
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

export default ConfirmationModal;
```

In your main component where the link is located, you can use the `ConfirmationModal` component and handle its state:

```jsx
import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import ConfirmationModal from './ConfirmationModal';

const MainComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const history = useHistory();

  const handleShowModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleContinue = () => {
    handleCloseModal();
    history.push('/wills/quick-booking');
  };

  return (
    <div>
      <Link to="/wills/quick-booking" onClick={handleShowModal}>
        <span className="box-title">Book Quick Appointment</span>
      </Link>
      <ConfirmationModal
        show={showModal}
        handleClose={handleCloseModal}
        handleContinue={handleContinue}
      />
    </div>
  );
};

export default MainComponent;
```

In the above example, the `MainComponent` renders a link with the class name `box-title`, and when clicked, it calls the `handleShowModal` function to show the modal popup. The modal is conditionally rendered based on the `showModal` state.

The `ConfirmationModal` component receives three props: `show` (to determine whether the modal should be displayed), `handleClose` (to close the modal), and `handleContinue` (to handle the continue button click and redirect to the desired route).

When the user clicks "Continue" in the modal, the `handleContinue` function is called, which first closes the modal and then uses the `useHistory` hook from React Router to navigate to the `/wills/quick-booking` route.

Remember to adjust the code and import the necessary dependencies based on your project structure and setup.

I hope this helps! Let me know if you have any further questions.
you have to suggest me a branch name in which i implement UI of confirm modal pop up. branch name should follow convention.


  <Link to="/wills/quick-booking">
                    <span className="box-title">
                      Book Quick Appointment
                    </span>
                  </Link>
                  
                  
                  you are an expert in react development.
                  i have added a link component and set the route. 
                  but when i clikc "Book Quick Appointment". it throws error message like  
                  "No route matches URL \"/wills/quick-booking\""
                  its status is 404 not found.
                  Help me to find and fix solution for the problem.
                  
                  

                  Solutions:
                  
                  1. Make sure that you have a Route component in your app that matches the /wills/quick-booking path. You can do this by adding the following code to your app:

<Route exact path="/wills/quick-booking">
  {/* Insert the component for the quick booking page here */}
</Route>

check routes file in projct directory and update the path.







                  
"""
Problem Description
Given a non-empty array of digits representing a non-negative integer, plus one to the integer and return the same list.

The digits are stored such that the most significant digit is at the head of the list, and each element in the array contain a single digit.

You may assume the integer does not contain any leading zero, except the number 0 itself.

Input format
You will be given a list of integers.

Output format
Return a list of integer +1.

Sample Input 1
1 2 3

Sample Output 1
1 2 4

Explanation 1
The array represents the integer 123.

Sample Input 2
4 3 2 1

Sample Output 2
4 3 2 2
"""

Consider you are an experienced python developer.
Help me to solve the above problem and integrate the code into below code.
Code should follow python naming conventions
Return the updated code.

```py
def plusOne(digits):
if __name__ == '__main__':
    digits = input().split()
    digits = [int(i) for i in digits]
    result = plusOne(digits)
    for i in result:
        print(i,end=' ')
```
.text-ellipsis--2{
  text-overflow:ellipsis;
  overflow:hidden;
  // Addition lines for 2 line or multiline ellipsis
  display: -webkit-box !important;
  -webkit-line-clamp: 2; /*here number of lines*/
  -webkit-box-orient: vertical;
  white-space: normal;
}
Code 1:
"""
# TODO: Implement this method
from typing import List


def findElement(n: int, arr: List[int], x: int) -> int:

# NOTE: Please do not modify this function
def main():
    n = int(input().strip())
    arr = list(map(int, input().strip().split(' ')))
    x = int(input().strip())

    xIndex = findElement(n, arr, x)
    print(xIndex)

if __name__=="__main__":
    main()
"""

Code 2:
"""
def find_index(n,arr,x):
    for i in range(n):
        if arr[i]==x:
            return i
    return -1
"""


Consider you are a python devekoper.
Help me to integrate the Code 2 into Code 1.
Return the updated version of code. 
"""
 <Typography

              >
                {moment(dateOfBirth).format('DD/MM/YYYY')}

              </Typography>
"""

Consider you are a jaavscript developer.

I want the dateofBirth to shown as `17 May 1998` format . currenlty it is shown as `17/05/1998`.

I want you to change format i wish to. Here i used moment package you can use the same package.

Please update rhe code and return the udpated one


"""
import React, { useState } from "react";
import "./style.scss";
import Typography from "@mui/material/Typography";
import WitnessTable from "@components/WitnessTable";
import { useForm } from "react-hook-form";
import Autocomplete from "@mui/material/Autocomplete";
import AutocompleteOption from "@mui/joy/AutocompleteOption";
import { DatePicker } from "@mui/x-date-pickers";
import { TextField } from "@mui/material";

// import custom hooks
import useNationalityList from "@utils/hooks/useNationalityList";
import useCountryList from "@utils/hooks/useCountryList";
import useCityList from "@utils/hooks/useCityList";
import useIsdCodesList from "@utils/hooks/useIsdCodesList";
import { useDispatch, useSelector } from "react-redux";

// selectors
import {
  dropDownSelector,
  fetchCityList,
  fetchCountryList,
  fetchNationalityList,
} from "@redux/slices/dropDowns";
import { willsValidatorSelector } from "@redux/slices/willsValidator";
import getGuid from "@utils/Wills/getGuid";
import axios from "axios";
import {
  submitWitnessDetails,
  willWitnessDetailsSelector,
  fetchWitnessList,
  fetchWitnessDetailsByGuid,
} from "@redux/slices/wills-witness-details";

import moment from "moment";

"""
I have the given the imports above. what you have to do is to import them in correct order and it should be easilty readable. organize the imports. please dont change any package name or change into default or named import. just reorder the imports for user readablity.



payload for posting data:

"""
{
  "address": "binto",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Wadi Zinati",
  "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "gfdd@gmail.com",
  "emiratesId": "987978",
  "foreName": "test",
  "isdCode": "+81",
  "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
  "nationality": "33a784eb-6e88-43d6-8bf7-f41785851f25",
  "passportNo": "7456546",
  "phoneNumber": "76575675",
  "state": "rtfytrytr",
  "surName": "user",
  "zipCode": "654654"
}
"""

Data got while calling fetching:

"""
{
    "Output": {
        "profileguid": "34b4dd38-4c9c-42ee-9391-added811e2ad",
        "surName": "user",
        "foreName": "test",
        "address": "binto",
        "city": "Wadi Zinati",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "7456546",
        "emiratesId": "",
        "phoneNumber": "76575675",
        "email": "gfdd@gmail.com",
        "nationality": "83",
        "isdCode": 106,
        "isdCodeGUID": "8841f91d-73b4-494c-b794-d8341faf80ab",
        "zipCode": "654654",
        "countryGUID": "07217663-f131-46b7-876b-8402f7a8312d",
        "state": "rtfytrytr",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 16:24:06",
    "version": "V1"
}

"""

Consider you are API expert.

emiratesId field is posting but when we call get method emiratesId is returned as empty string.
Post api is working. get api is also working i think but emiratedId field is retunred empty string even i inserted the same.

I had given the payload while posting data, also the response i got while fetching below it. 

I want to know what is the reason behind this issue.

Please help me to find is this a problem in the api side.
{
    "Output": {
        "saveStatus": false,
        "editStatus": true,
        "deleteStatus": false,
        "itemGUID": null,
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "08/Jun/2023 12:02:32",
    "version": "V1"
}
{
  "address": "dfdfg dgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "San Ignacio",
  "countryGUID": "b71f3fa5-a42b-4a0b-a6c3-8d956bb57757",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "jgh@gmail.com",
  "emiratesId": "9897897",
  "foreName": "fgsdfsdf",
  "isdCode": "+591",
  "isdCodeGUID": "4d07418d-1d45-4500-ab49-0682eaae51b7",
  "nationality": "44d7c4c3-9690-4fe8-a733-bb9b1c1240e8",
  "passportNo": "67856876",
  "phoneNumber": "8567567567",
  "profileguid": "9294c7f8-8fb0-4e61-8f02-49db54ba7254",
  "state": "jmjhmh",
  "surName": "sdfsdfs",
  "zipCode": "6756765"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "bff9b460-cae9-4b1f-8e9b-61b6dc991abc",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:31:09",
    "version": "V1"
}
{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 12:11:17",
    "version": "V1"
}
{
    "Output": {
        "profileguid": "4320abce-c414-4c9b-967d-20323748f427",
        "surName": "dfgdf",
        "foreName": "hdf",
        "address": "gdfgdf gdfgdf",
        "city": "Ruyigi",
        "countryName": null,
        "dateOfBirth": "2023-06-06T00:00:00",
        "passportNo": "76575645",
        "emiratesId": "",
        "phoneNumber": "69573498",
        "email": "ckvh@gmail.com",
        "nationality": "9",
        "isdCode": 18,
        "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
        "zipCode": "76654654",
        "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
        "state": "kerala",
        "dob": "2023-6-6",
        "emiratesIdNo": null,
        "serviceGUID": null,
        "bookedForProfileGUID": null
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:15:19",
    "version": "V1"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "d68afb9e-8bd8-4e66-9bfa-c7666901a8ee",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 11:04:21",
    "version": "V1"
}
{
  "address": "gdfgdf gdfgdf",
  "bookedForProfileGUID": "05fa50b0-a450-437f-ade3-19bb128192a5",
  "city": "Ruyigi",
  "countryGUID": "8d68d0b0-7292-4262-a0b1-076014fcbb9d",
  "dateOfBirth": "2023-06-06T18:30:00.000Z",
  "email": "ckvh@gmail.com",
  "emiratesId": "856345346",
  "foreName": "hdf",
  "isdCode": "+880",
  "isdCodeGUID": "8c7f202f-1f30-4ab9-bb6a-026f272c3c30",
  "nationality": "5f17dd01-c266-4da2-95c9-fedde4c60e73",
  "passportNo": "76575645",
  "phoneNumber": "69573498",
  "state": "kerala",
  "surName": "dfgdf",
  "zipCode": "76654654"
}
{
    "Output": {
        "saveStatus": true,
        "editStatus": false,
        "deleteStatus": false,
        "itemGUID": "4320abce-c414-4c9b-967d-20323748f427",
        "isNotFirstGuardianValue": false,
        "errorMessage": null,
        "isAlreadyExists": false,
        "status": false
    },
    "status": true,
    "errorCode": "",
    "errorMessage": "",
    "statusCode": "200",
    "statusMessage": "Success",
    "responseDate": "07/Jun/2023 10:49:27",
    "version": "V1"
}
"""
<Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />

"""

Sugeest you are a react developer expert.

I want to show country name instead of country code.
you can make the changes you need.
please update the code and return.
"""
<div className="row email-phone-main-wrapper">
            <div className="col-md-6 phone-col-wrapper">
              <div className="mb-3">
                <label htmlFor="phoneNumber" className="form-label phone-number-label w-100">
                  Phone Number*
                </label>
                <div className="d-flex">
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    placeholder="+971"
                    options={isdCodesList}
                    isOptionEqualToValue={(option: any, value: any) => option.label === value.label}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('isdCode', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setPhoneNumber(newVal?.label);
                    }}
                  />
                  <input
                    type="text"
                    className="form-control-phonenumber"
                    id="phoneNumber"
                    aria-describedby="phoneNumberHelp"
                    placeholder="xxx xxxx xxxxxx"
                    {...register('phoneNumber', {
                      required: true,
                    })}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                  />
                </div>
                {
                  errors?.phoneNumber?.type === 'required' && (
                    <span className="error">
                      please enter your phone number
                    </span>
                  )
                }
              </div>
            </div>
            <div className="col-md-4 email-col-wrapper">
              <div className="mb-3">
                <label htmlFor="email" className="form-label w-100">
                  Email Address
                </label>
                <input
                  type="text"
                  className="form-control"
                  id="email"
                  aria-describedby="emailHelp"
                  placeholder="eg:abc@mail.com"
                  {...register('email')}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </div>
            </div>
          </div>
"""


You aree CSS expert. You have to do following design changes written inbullet points:

parent element - email-phone-main-wrapper
child elements - phone-col-wrapper, email-col-wrapper 
1. childs of email-phone-main-wrapper div element should appear in row format ie top and bottom style when screem with is equal or below 768px and height 1024 px. 
2. Both the child element should have same width when responsive. code for your reference is above.
3. YOu can media queries to achieve this result.
4. Return the updated sass code having media queries.
row {
  
  display: flex;
    flex-direction: column;
}


@media (min-width: 768px)
.phone-number-wrapper {
    flex: 0 0 auto;
    width: 100%;
}

.form .email-col-wrapper {
    margin-left: 0px;
    width: 75%;
}

"""
<form className="form">
          <div className="row form-row">
            <div
              className="col-md-4"
            >
              <div className="mb-3">
                <label
                  htmlFor="forename"
                  className="form-label w-100 forename-label"
                >
                  Forename(s) - All First and Middle Names(as per passport)
                </label>
                <input
                  type="text"
                  className="form-control forename-input"
                  id="forename"
                  placeholder="Aron Mathew"
                  onChange={(e) => setForeName(e.target.value)}
                  {...register('foreName', {
                    required: true,
                  })}
                />
                {
                errors?.foreName?.type === 'required' && (
                  <span className="error">
                    please enter your forename
                  </span>
                )
              }
              </div>
            </div>
            <div className="col" />
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="surname" className="form-label w-100">
                    Surname*
                  </label>
                  <input
                    type="text"
                    className="form-control surname-input"
                    id="surname"
                    aria-describedby="surnameHelp"
                    placeholder="Eg: Philip"
                    onChange={(e) => setSurName(e.target.value)}
                    {...register('surName', {
                      required: true,
                    })}
                  />
                  {
                  errors?.surName?.type === 'required' && (
                    <span className="error">
                      please enter your surname
                    </span>
                  )
                }
                </div>
              </div>
            </div>
            {/* date of birth and  nationality */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="dateOfBirth" className="form-label date-of-birth-label w-100">
                    Date of Birth*
                  </label>
                  <DatePicker
                    onChange={(e: any) => {
                      handleDatePicker(e);
                    }}
                    value={dateOfBirth}
                    renderInput={(params: any) => (
                      <TextField
                        {...params}
                        inputProps={{
                          ...params.inputProps,
                          placeholder: 'Select Date of Birth',
                        }}
                        {
                            ...register('dateOfBirth', {
                              required: true,
                            })
                          }
                        className="date-picker date-picker-input"
                      />
                    )}
                    className="date-picker-field"
                  />
                  {
                    errors?.surName?.type === 'required' && (
                      <span className="error">
                        please enter your date of birth
                      </span>
                    )
                  }
                </div>
              </div>
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="nationality" className="form-label nationality-label w-100">
                    Nationality*
                  </label>
                  <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={nationalitiesList}
                    isOptionEqualToValue={(option: any, value: any) => option.nationalityGuid === value.nationalityGuid}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        {...register('nationality', {
                          required: true,
                        })}
                      />
                    )}
                    onChange={(e, newVal: any) => {
                      console.log('newVal', newVal);
                      setNationalityGuid(newVal?.nationalityGuid);
                    }}
                  />
                </div>
              </div>
            </div>

            {/* passport number and emirates ID */}
            <div className="row">
              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="passportNo" className="form-label passport-number-label w-100">
                    Passport Number*
                  </label>
                  <input
                    type="text"
                    className="form-control passport-number-input"
                    id="passportNo"
                    placeholder="xx xxxx xxxx"
                    onChange={(e) => setPassportNo(e.target.value)}
                    {...register('passportNo', {
                      required: true,
                    })}
                  />
                  {
                    errors?.passportNo?.type === 'required' && (
                      <span className="error">
                        please enter your passport number
                      </span>
                    )
                  }
                </div>
              </div>

              <div className="col-md-4">
                <div className="mb-3">
                  <label htmlFor="emiratesId" className="form-label emirates-id-label w-100">
                    Emirates ID*
                  </label>
                  <input
                    type="text"
                    className="form-control emirates-id-input"
                    id="emiratesId"
                    placeholder="Eg: 123456789"
                    onChange={(e) => setEmiratesID(e.target.value)}
                    {...register('emiratesID', {
                      required: true,
                    })}
                  />
                  {
                    errors?.emiratesID?.type === 'required' && (
                      <span className="error">
                        please enter your emirates id
                      </span>
                    )
                  }
                </div>
              </div>
            </div>
            <h4 className="form-sub-head">
              Current Residential Address (Not PO Box)
              <hr />
            </h4>
"""

You are scss expert.
you have to nest form-sub-head element of form class. You have to follow sass conventions.
Return the converted styling.
*,
body {
    box-sizing: border-box;
}

body {
    width: 96%;
    margin: auto;
    margin-top: 5%;
    text-align: center;
}

fieldset {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 5vw;
    height: 6vw;
    display: flex;
    flex-direction: column;
    justify-content:center;
    
}


#formContent {
    width: 25%;
    background-color: lightslategray;
}

::placeholder {
    text-align: center;
}

"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';
 
const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""
 
Property 'palette' does not exist on type 'Theme'.


Solution:

https://stackoverflow.com/a/72594201

Styled should be import from @mui/material/styles, as you can see here. So, the code will be like:

import { styled } from "@mui/material/styles";
"""
import styled from '@emotion/styled';
import React from 'react';
import { useDispatch } from 'react-redux';

const WillsTable = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));
"""

Property 'palette' does not exist on type 'Theme'.

Suggest a solution for the abover error. and update the current code with newer.



"""
<div className="file-list-item" key={index}>

  			<div className="file-info">
                <div
                  className="file-icon"
                >
                  <img src={FileListIcon} alt="File List Icon" />
                </div>
                <div className="file-name">
                  {file.name}
                </div>
              </div>

              <div className="close-icon" onClick={() => removeFile(file)}>
                <span>Remove</span>
              </div>
            </div>
"""

Suggest you are a experienced react developer.

`file-list-item` div element contains two child div elements `file-info` element and `close-icon` div element. These two chilf elements should have space between them. You can apply flex properties if needed. Write the styling from scratch. background color and border radius of parent element is 
#E4FDFF and 30px. Also please explain the change you make. file-icon and file-name should have margin of 10px in between. equal padding around file-list-item div element.  Return the updated version of code ans styles.



You are CSS expert.
help me to resolve this design issue.
currently width of file-list-item is changing based on length of file name. I want the width to stay consistent irrespective of file we attach. It should of same width. return the updated styles


jsx
----------
<div className="file-list">
  <div className="file-list-header">
    {uploadedFiles.map((file: any, index) => (
      <div className="file-list-item" key={index}>
        <div className="file-info">
          {file.name}
          <div className="close-icon" onClick={() => removeFile(file)}>
            Remove
          </div>
        </div>
        <div className="close-icon" onClick={() => removeFile(file)}>
          &#10006;
        </div>
      </div>
    ))}
  </div>
</div>

css
-----
.file-list {
  background: #E4FDFF;
  border-radius: 30px;
}

.file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  text-transform: capitalize;
  color: #1B202D;
}

.file-info {
  display: flex;
  align-items: center;
}

.close-icon {
  cursor: pointer;
  font-family: 'Basis Grotesque Arabic Pro';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  text-decoration-line: underline;
  color: #1B202D;
  margin-left: 8px;
}

.close-icon:last-child {
  margin-left: 0;
}

"""
<div className="col-sm-6">
        <div className="edit-remove-sustitute">
          <div className="avatar-container">
            <div className="initials-avatar">S</div>
          </div>
          <div className="profile-card">
            <div className="profile-card__name">Shayne Anto</div>
            <div className="profile-card__role">Substitute</div>
          </div>
          <div className="action-buttons-container">
            <div
              className="edit-button"
              onClick={editSubstitute}
            >
              Edit
            </div>
            <div
              className="remove-button"
              onClick={removeSubstitute}
            >
              Remove
            </div>
          </div>
        </div>
      </div>

      <div className="col-sm-6">
        <div className="add-substitute-control">
          <div className="add-substitute-icon-wrapper">
            <img
              src={addSubstituteIcon}
              alt="Add Substitute Icon"
              onClick={handleOpenModal}
            />
          </div>
          <div
            className="add-substitute-text-wrapper"
          >
            <div className="add-substitute-title">Add Substitute</div>
            <div className="add-substitute-subtitle">Click here to add substitute</div>
          </div>
        </div>
      </div>
"""

Suggest you are CSS expert.

1. I want to change the classname from of both the divs `col-sm-6` to `col-sm-12` when media quey size is width 768px and height is 1024px.

2. Return the updated changes.


code for your reference is given below.

```
@media (max-width: 768px) and (max-height: 1024px) {
  .substitute-manager {
    flex-direction: column;
  }

  .edit-remove-sustitute,
  .add-substitute-control {
    margin-bottom: 1rem;
  }

  .add-substitute-control {
    margin-left: 0;
  }
}
```
<Autocomplete
              id="beneficiaryType"
              placeholder="individual"
              disableClearable
              options={beneficiaryTypeListArray}
              getOptionLabel={(option: any) => option.label}
              style={{
                fontFamily: "Basis Grotesque Arabic Pro",
                fontStyle: "normal",
                fontWeight: 500,
                fontSize: "0.75rem",
                lineHeight: "18px",
                color: "#9799A6",
              }}
              renderOption={(props: any, option: { label: any }) => (
                <AutocompleteOption {...props}>
                  <ListItemContent
                    sx={{
                      fontFamily: "Basis Grotesque Arabic Pro",
                      fontStyle: "normal",
                      fontWeight: 500,
                      fontSize: "0.75rem",
                      lineHeight: "18px",
                      color: "#9799A6",
                    }}
                  >
                    hello world
                  </ListItemContent>
                </AutocompleteOption>
              )}
              {...register("beneficiaryTypeGuid", {
                required: true,
              })}
              onChange={(e: any, newVal: any) => {
                console.log(newVal);
                setBeneficiaryTypeGUID(newVal.beneficiaryTypeGUID);
              }}
            />

Consider you are a react developer.

help me to solve this problem.

- No values are populating in this Beneficiary type field
- api side is working.
- I want to populate the beneficiary types label on dropdown of beneficiary type fied.
- Make appropriate changes and return the updated version of code.
→ The "smallest viewport height" (svh) will fit the smallest amount of space
→ The "largest viewport height" (lvh) will always take up the largest amount of space
→ The "dynamic viewport height" (dvh) will resize to fit the currently available space, adapting as the browser UI gets shown or retracts
selector h2 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}
/* fadeIn */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.u--fadeIn {
  -webkit-animation: fadeIn 1s ease-in;
  -moz-animation: fadeIn 1s ease-in;
  -o-animation: fadeIn 1s ease-in;
  animation: fadeIn 1s ease-in; }

/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInLeft {
  -webkit-animation: fadeInLeft 1s ease-in;
  -moz-animation: fadeInLeft 1s ease-in;
  -o-animation: fadeInLeft 1s ease-in;
  animation: fadeInLeft 1s ease-in; }

/* fadeInRight */
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInRight {
  -webkit-animation: fadeInRight 1s ease-in;
  -moz-animation: fadeInRight 1s ease-in;
  -o-animation: fadeInRight 1s ease-in;
  animation: fadeInRight 1s ease-in; }

/* fadeInUp */
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInUp {
  -webkit-animation: fadeInUp 1s ease-in;
  -moz-animation: fadeInUp 1s ease-in;
  -o-animation: fadeInUp 1s ease-in;
  animation: fadeInUp 1s ease-in; }

/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInDown {
  -webkit-animation: fadeInDown 1s ease-in;
  -moz-animation: fadeInDown 1s ease-in;
  -o-animation: fadeInDown 1s ease-in;
  animation: fadeInDown 1s ease-in; }

/* fadeOut */
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeIn {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.u--fadeOut {
  -webkit-animation: fadeOut 1s ease-out;
  -moz-animation: fadeOut 1s ease-out;
  -o-animation: fadeOut 1s ease-out;
  animation: fadeOut 1s ease-out; }

/* fadeOutLeft */
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutLeft {
  -webkit-animation: fadeOutLeft 1s ease-out;
  -moz-animation: fadeOutLeft 1s ease-out;
  -o-animation: fadeOutLeft 1s ease-out;
  animation: fadeOutLeft 1s ease-out; }

/* fadeOutRight */
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -moz-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -o-transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translate3d(50%, 0, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutRight {
  -webkit-animation: fadeOutRight 1s ease-out;
  -moz-animation: fadeOutRight 1s ease-out;
  -o-animation: fadeOutRight 1s ease-out;
  animation: fadeOutRight 1s ease-out; }

/* fadeOutUp */
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 50%, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutUp {
  -webkit-animation: fadeOutUp 1s ease-out;
  -moz-animation: fadeOutUp 1s ease-out;
  -o-animation: fadeOutUp 1s ease-out;
  animation: fadeOutUp 1s ease-out; }

/* fadeOutDown */
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -webkit-transform: none; } }
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -moz-transform: none; } }
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    -o-transform: none; } }
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 0;
    transform: none; } }

.u--fadeOutDown {
  -webkit-animation: fadeOutDown 1s ease-out;
  -moz-animation: fadeOutDown 1s ease-out;
  -o-animation: fadeOutDown 1s ease-out;
  animation: fadeOutDown 1s ease-out; }
.container {
  display: flex; /* or inline-flex */
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 3 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
//row (default): left to right in ltr; right to left in rtl
//row-reverse: right to left in ltr; left to right in rtl
//column: same as row but top to bottom
//column-reverse: same as row-reverse but bottom to top

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
//nowrap (default): all flex items will be on one line
//wrap: flex items will wrap onto multiple lines, from top to bottom.
//wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

.container {
  flex-flow: column wrap;
}

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
//flex-start (default): items are packed toward the start of the flex-direction.
//flex-end: items are packed toward the end of the flex-direction.
//start: items are packed toward the start of the writing-mode direction.
//end: items are packed toward the end of the writing-mode direction.
//left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
//right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
//center: items are centered along the line
//space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
//space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
//space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
label:not(#foo) > input[type="checkbox"],
label input[type="checkbox"]{
    display:none;
}
label:not(#foo) > input[type="checkbox"] + span:after {
    content:'\2713';
    visibility:hidden;
}
label:not(#foo) > input[type="checkbox"]:checked + span:after {
    visibility:visible;
}
label:not(#foo) > input[type="radio"] + span:after {
    content:'\25CB';
}
label:not(#foo) > input[type="radio"]:checked + span:after {
    content:'\25CF';
}
body {
  background-image: url('https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=1600');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
<!DOCTYPE html>

<html>

​

<head>

    <style>

        <title>404 - Page Not Found</title><link rel="stylesheet"type="text/css"href="styles.css"/>CSS: body,

        html {

            height: 0%;

            margin: 0;
10
            padding: 0;

        }

​

        .container {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.25);

        }

​

        img {

            max-width: 100%;
const handlePersonalInfo = (data: any, e: any) => {
    e.preventDefault();
    console.log('entered info::', data);
    let hasEmiratesId: boolean;
    if (selectedOption === 'Yes') hasEmiratesId = true;
    else hasEmiratesId = false;
    let isMirrorWill: boolean;
    if (singleWillCheck) isMirrorWill = false;
    else isMirrorWill = true;
    const allData = {
      ...data,
      maritalStatusGUID,
      dateOfBirth,
      referralQuestionGUID,
      hasEmiratesId,
      isMirrorWill,
      isdCodeGUID1: countryGUID,
      isdCodeGUID2: countryGUID,
      nationalityGuid,
      countryGUID,
    };
    console.log('allData test', allData);
    axios.post(personalInformationAPI, allData).then((res) => {
      console.log('res post', res);
    });
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <button type="submit" className="next-btn"> Next Step </button> {/* {singleWillCheck ? ( <button type="submit" className="next-btn"> Next Step </button> ) : ( <button type="button" className="next-btn" onClick={handleMirrorWill}> Enter Spouse Information </button> )} */}
    <Box sx={{ flex: '1 1 auto' }} /> <Button color="inherit">Skip</Button> <Button color="inherit" onClick={handleBack}> Back </Button>
</Box>
{!(activeStep === 7) && (
if we set active step to 7, then we can view Upload Documents page.
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import { AiOutlineClose } from 'react-icons/ai';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  /**
   * Sets the active element to the given element string.
   *
   * @param {string} element - The string representing the active element to set.
   */
  const handleElementClick = (element: string) => {
    setActiveElement(element);
  };

  /**
   * Returns the background color style object for a given element.
   *
   * @param {string} element - The element to get background style for.
   * @return {Object} The background color style object for the given element.
   */
  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  /**
   * Returns an object representing the style to be applied to the title element.
   *
   * @param {string} element - The element to apply the style to.
   * @return {Object} An object containing the color property to be applied to the title element.
   */
  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = (e: any) => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
      return;
    }
    document.getElementById('file-upload-input')?.click();
  };

  /**
 * Handles the file input change event.
 *
 * @param {any} e - the event object
 * @return {void}
 */
  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    checkFileValidity(newFiles);
  };

  /**
   * Handles the file drop event by checking the validity of the accepted files.
   *
   * @param {any} acceptedFiles - the files that have been accepted for upload
   */
  const handleFileDrop = (acceptedFiles: any) => {
    checkFileValidity(acceptedFiles);
  };

  /**
   * Prevents the click event from propagating and executing other click events.
   *
   * @param {any} e - the click event to be stopped from propagating
   */
  const handleRowItemClick = (e: any) => {
    e.stopPropagation();
  };

  /**
   * Filters files by their extension and size, and adds the valid files to the uploadedFiles state.
   *
   * @param {Array} files - The array of files to be checked.
   * @return {void} Returns nothing.
   */
  const checkFileValidity = (files: any) => {
    const validExtensions = ['.pdf', '.jpeg', '.jpg', '.bmp', '.doc', '.docx'];
    const maxFileSize = 20 * 1024 * 1024;

    const validFiles = files.filter((file: any) => {
      const isValidExtension = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
      const isWithinMaxSize = file.size <= maxFileSize;
      return isValidExtension && isWithinMaxSize;
    });

    const invalidFiles = files.filter((file: any) => !validFiles.includes(file));
    if (invalidFiles.length > 0) {
      const invalidFileNames = invalidFiles.map((file: any) => file.name).join(', ');
      alert(`Invalid files: ${invalidFileNames}. Please use A4-size PDF, JPEG, BMP, DOC, or DOCX files that are within 20MB.`);
    } else {
      setUploadedFiles((prevFiles) => [...prevFiles, ...validFiles]);
      alert('Files uploaded successfully');
    }
  };

  /**
   * Removes a file from the uploaded files list.
   *
   * @param {any} file - The file to be removed.
   */
  const removeFile = (file: any) => {
    setUploadedFiles((prevFiles) => prevFiles.filter((f) => f !== file));
  };

  const {
    getRootProps,
    getInputProps,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row document-upload-container">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
          {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>
                  {file.name}
                  <AiOutlineClose
                    className="close-icon"
                    onClick={() => removeFile(file)}
                  />
                </li>
              ))}
            </ul>
          </div>
          )}
        </div>
      </div>
    </main>
  );
}

export default DocumentManager;
const handleRowItemClick = (e) => {
  e.stopPropagation();
};

// ...

<div className="col-lg-6 row-item" {...getRootProps()} onClick={handleRowItemClick}>
  {/* Remaining code */}
</div>
You are a React and frontend expert.

I want to achieve below changes to my current version of code.

Constraints:

1. Add a AiOutlineClose react icon on right side of each file which is listed.
2. On Clicking this icon, that uploaded file is removed from list and from UI as well.
3. Attached current code for reference.


```
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-plusplus */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable react/button-has-type */
/* eslint-disable max-len */
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

import FileUploadIcon from '@assets/FileUploadIcon.svg';
import FileUploadIconDark from '@assets/FileUploadIconDark.svg';
import TickMarkIconGreen from '@assets/TickMarkIconGreen.svg';
import TickMarkIconGrey from '@assets/TickMarkIconGrey.svg';
import FileArrowIcon from '@assets/FileArrowIcon.svg';

import './style.scss';

function DocumentManager() {
  const [activeElement, setActiveElement] = useState('top');
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleElementClick = (element: string) => {
    setActiveElement(element);
    console.log(activeElement);
  };

  const getBackgroundStyle = (element: string) => ({
    backgroundColor: activeElement === element ? '#023979' : '#FFFFFF',
  });

  const getTitleStyle = (element: string) => ({
    color: activeElement === element ? '#FFFFFF' : '#1B202D',
  });

  const getFileUploadIcon = (element: string) => (activeElement === element ? FileUploadIcon : FileUploadIconDark);

  const getTickMarkicon = (element: string) => (activeElement === element ? TickMarkIconGreen : TickMarkIconGrey);

  const handleAddFileClick = () => {
    document.getElementById('file-upload-input')?.click();
  };

  const handleFileInputChange = (e: any) => {
    const newFiles = Array.from(e.target.files);
    console.log(newFiles);
    checkFileValidity(newFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...newFiles]);
  };

  const handleFileDrop = (acceptedFiles: any) => {
    console.log(acceptedFiles);
    checkFileValidity(acceptedFiles);
    setUploadedFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
  };

  const checkFileValidity = (files: any) => {
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const validExtensions = ['.pdf', 'jpeg', 'jpg', '.bmp', '.doc', '.docx'];
      const maxFileSize = 20 * 1024 * 1024;

      if (!validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext))) {
        alert(`Invalid File: ${file.name}. Please use A4-size PDF, JPEG, BMP, DOC or DOCX files`);
      } else if (file.size > maxFileSize) {
        alert(`File size exceeds the limit: ${file.name}. Maximum file size is 20MB.`);
      } else {
        alert('File uploaded successfully');
      }
    }
  };

  const {
    getRootProps,
    getInputProps,
    isDragActive,
    isDragAccept,
    isDragReject,
  } = useDropzone({
    onDrop: handleFileDrop,
  });

  return (
    <main>
      <section>
        <header className="header">Upload Documents</header>
        <p className="description">Upload the documents in PDF or JPEG format. Click on next to save the files once all the documents have been uploaded</p>
      </section>
      <div className="row">

        <div className="col-lg-6 container">
          <div
            className={`top${activeElement === 'top' ? ' active' : ''}`}
            style={getBackgroundStyle('top')}
            onClick={() => handleElementClick('top')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('top')} alt="File Uploader Icon" />
              </div>
              <div
                className="document-title"
                style={getTitleStyle('top')}
              >
                Testator Passport

              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('top')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`middle${activeElement === 'middle' ? ' active' : ''}`}
            style={getBackgroundStyle('middle')}
            onClick={() => handleElementClick('middle')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('middle')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('middle')}
              >
                Additional Document
              </div>
            </div>
            <div className="tick-icon">
              <img src={getTickMarkicon('middle')} alt="Tick Mark" />
            </div>
          </div>

          <div
            className={`bottom${activeElement === 'bottom' ? ' active' : ''}`}
            style={getBackgroundStyle('bottom')}
            onClick={() => handleElementClick('bottom')}
          >
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={getFileUploadIcon('bottom')} alt="File Uploader Icon Dark" />
              </div>
              <div
                className="document-title text-bottom-2"
                style={getTitleStyle('bottom')}
              >
                Executor Passport
              </div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={getTickMarkicon('bottom')} alt="Tick Mark" />
            </div>
            <div />
          </div>
        </div>

        <div className="col-lg-6 row-item" {...getRootProps()}>
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={handleAddFileClick}>Add File</button>
            <input
              type="file"
              id="file-upload-input"
              name="file-upload-input"
              accept=".pdf, .bmp, .png, .doc, .docx, .jpg, .jpeg"
              multiple
              onChange={handleFileInputChange}
              style={{ display: 'none' }}
              {...getInputProps()}
            />
          </div>
        </div>
        {uploadedFiles.length > 0 && (
          <div className="file-list">
            <ul>
              {uploadedFiles.map((file: any, index) => (
                <li key={index}>{file.name}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </main>
  );
}

export default DocumentManager;

```

''' 
 <div className="col-lg-6 row-item">
          <div className="file-upload-arrow">
            <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
          </div>
          <div className="file-upload-text">
            Drag and drop document here to upload
          </div>
          <div className="file-attach-instructions">
            Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
          </div>
          <div className="file-add-button">
            <button onClick={addFileHandler}>Add File</button>
          </div>
        </div>
   '''
 
 Your are a senior react developer.
 
 I want you to implement a functionality to upload files on button click event and drag and drop.
 
 Contrainst:
 
1. function should be implemented on `addFileHandler` event given above.
2. File can also be uploaded by drag and drop into row-item div element.
3. instructions for file upload is given `file-attach-instructions` div element.
4. You can use packages like `react-uploader` to implement this.
5. Finally return the updated version of code. Current code is above for reference.


 
 
 
<div className="col-lg-6 row-item">
   <div className="file-upload-arrow">
     <img src={FileArrowIcon} alt="File Upload Arrow Icon" />
   </div>
   <div className="file-upload-text">
     Drag and drop document here to upload
   </div>
   <div className="file-attach-instructions">
     Please attach the file(s) below (use the Add button). We recommend using A4-size PDF, BMP, PNG, DOC, DOCX, JPG and JPEG files. File size cannot be more than 20 megabytes (MB). Your files will be uploaded when you submit your form.
   </div>
   <div className="file-add-button">
     <button>Add File</button>
   </div>
 </div>
 
 
 Consider you are a CSS expert. Above is the code you have to update and make neccessary styling based on below constraints
 
 Constraints:
 
 1. Center the child elements of row-item div element horizonatally & vertically.
 2. Each child element is aligned center.
 3. Update backgournd of Add File button to #023979.
 4. Set border radious of button to 5px and font color to #FFFFFF.
 5. Fibnally return the updated version of code with change in styles.
"""
<div className="top">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIcon} alt="File Uploader Icon" />
              </div>
              <div className="document-title">Testator Passport</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGreen} alt="Tick Mark" />
            </div>
          </div>

          <div className="middle">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Additional Document</div>
            </div>
            <div className="tick-icon">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
          </div>

          <div className="bottom">
            <div className="left-container">
              <div className="file-upload-icon">
                <img src={FileUploadIconDark} alt="File Uploader Icon Dark" />
              </div>
              <div className="document-title text-black">Executor Passport</div>
            </div>
            <div className="tick-icon tick-icon-last">
              <img src={TickMarkIconGrey} alt="Tick Mark" />
            </div>
            <div />
         </div>
"""


You are an experienced React Developer.

I want to implement a UI change.

On clicking top, middle or bottom div elements, 
  1. its backgound should be changed to #023979. 
  2. Its document-title element color should be changed to #FFFFFF.
For example. middle div element is clicked, it is active and the backgound changes to #023979.
While background of Inactive elements changes to default color #f4f4f4.
Initially when component loads, top element background is #023979, and bottom 2 element background is #f4f4f4.
you can use react hooks and state if needed. 
Help me to achieve this change by modiyfinh current version of code

I will give styles for reference below.

.container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top, .middle, .bottom {
    display: flex;
    justify-content: space-between;
    background-color: #f4f4f4;
    border-radius: 5px 0px 0px 5px;
}

.top {
    display: flex;
    align-items: center;
    background-color: #023979;
}

.container div {
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.document-title {
    font-family: 'Basis Grotesque Arabic Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 14px;
    color: #FFFFFF;
}

.left-container {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.file-upload-icon,
.document-title {
    margin-right: 12px;
}

.tick-icon {
    margin-left: auto;
    margin-right: 12px;
}

.document-title {
    flex-grow: 1;
}

.tick-icon-last {
    margin-right: 2px !important;
}










.elementor-form .elementor-field-label {
    position: absolute;
    right: 18px;
    transition-duration: .2s;
}

.elementor-field-label.active-field-label{
    transform: translateY(-20px);
    font-size: 16px !important;
}

.elementor-field{
    box-shadow: none !important;
}
<ColorlibStepIcon
                            currentIndex={label.stepID - 1}
                            icon={label.stepID}
                            stepNumber={stepNumber}
                            completed={checkCompletedSteps.includes(
                              label.stepID,
                            )}
                            active={activeStep + 1 === label.stepID}
                            data={[]}
                          />

Help me to solve below error:

1. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
(parameter) label: StepData.


Solution:

The error is occurring because the icon prop of the ColorlibStepIcon component is expecting a number, but the label.stepID value is not being converted to a number before being passed as the icon prop.

To fix this error, you can convert the label.stepID value to a number before passing it as the icon prop. Here's an example of how you can do this:


Resolved Code:

<ColorlibStepIcon
  currentIndex={label.stepID - 1}
  icon={Number(label.stepID)}
  stepNumber={stepNumber}
  completed={checkCompletedSteps.includes(label.stepID)}
  active={activeStep + 1 === label.stepID}
  data={[]}
/>


-webkit-print-color-adjust: exact
.t-foot {height: 50px;}
@media print {
  tfoot {display: table-footer-group;}
}
.modal-close-button {
    border-radius: 50%;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    top: 8px;
    position: absolute;
    right: 16px;
}
<Modal show={showModal}>
  <Modal.Header>
    <div className="modal-header-content">
      <div className="modal-header-left">
        <div className="modal-header-title mt-4">Add Substitute</div>
        <div className="modal-header-subtitle">
          List your Substitute Beneficiaries below and click on Add Substitute to add them to your List
        </div>
      </div>
    </div>
    <button
      className="modal-close-button"
      onClick={handleCloseModal}
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </Modal.Header>
  <Modal.Body>
    <AddSubstituteForm onSubmit={handleSubmit} />
  </Modal.Body>
  <Modal.Footer>
    <Button
      variant="primary"
      onClick={handleCloseModal}
    >
      Add Substitute
    </Button>
  </Modal.Footer>
</Modal>




You are a CSS expert.

Constraints:
1. I want to show this modal center of our screen
2. Help me to add styles for element to achieve this.
3. Modal should be at center of whole window.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
}

.top_left {
    width: 50%;
}

.top_left p {
    font-size: 2rem;
    font-weight: 600;
    color: #0094FF;
}

a {
    font-size: 14px;
    color: #0094FF;
    height: 40px;
    border: 1px solid #0094FF;
    border-radius: 8px;

    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;

    text-decoration: none;
}

.scan_icon {
    fill: currentColor;
    width: 24px;
    height: 24px;
}

.exit {
    font-size: 16px;
    float: right;
    color: #0094FF;
    height: 40px;
    border-radius: 8px;
    margin-top: 10px;
    pointer-events: auto;
    width: 50%;
}

.exit a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5px;
}

.exit a:link,
.exit a:visited {
    color: #0094FF;
    text-decoration: none;
}

.exit a:hover,
.exit a:active {
    color: #0094FF;
}

.exit a:active .link-text {
    color: #0094FF
}


.exit img {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-right: 1px;
}

.objekt {
    height: 200px;
    width: 35.625rem;
    font-size: 16px;
}

.objekt th,
.objekt td {
    border: 2px solid #0094ff;
    padding: 6px 0px 0px 10px;
    text-align: left;
}

.objekt th {
    background-color: #0094ff;
    border-radius: 8px 0 0 8px;
    color: #ffffff;

    width: 11.25rem;
    font-weight: normal;
}

.objekt td {
    font-weight: normal;
    width: 18.125rem;
    border-radius: 0 8px 8px 0;
}


.meldung {
    height: 100px;
    width: 35.625rem;
    font-size: 16px;
}

.meldung th,
.meldung td {
    font-size: 16px;
    border: 2px solid #0094ff;
    text-align: left;
    padding: 8px;

}

.meldung th {
    background-color: #0094ff;
    color: #ffffff;
    width: 11.25rem;
    font-weight: normal;
    border-radius: 8px 0 0 8px;
}

.meldung td {
    width: 18.125rem;
    font-weight: normal;
    border-radius: 0 8px 8px 0;
}

.fertigmeldungen {
    width: 35.375rem;
    margin-top: 1vw;
    height: 100px;
    border-radius: 0 0 8px 8px;
}

.fertigmeldungen caption {
    font-weight: normal;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
    height: 48px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding-left: 16px;
    padding-top: 12px;
    margin-bottom: 2px;
}

.fertigmeldungen td {
    width: 200px;
    padding: 5px;
    text-align: left;
    color: #222222;
    font-size: 14px;

}

.fertigungsgange {
    float: right;
    height: 420px;
    width: 16.875rem;
    border: 2px solid #0094ff;
    border-radius: 0 0 8px 8px;
}

.fertigungsgange caption {
    font-weight: normal;
    font-size: 16px;
    text-align: left;
    background-color: #0094ff;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 2px;

    border-radius: 8px 8px 0 0;
}

.container {
    padding: 20px 35px
}

.header {
    display: flex;
    width: 100%;
    margin-bottom: 20px
}

.qr_scan {
    width: 16.75rem;
}

#exit-button {
    width: 7.5rem;
    float: right;
}

.container-table {
    width: 100%;
    display: flex;
}
.table-left{
    width: 70%;
}
.table-right{
    width: 30%
}

@media only screen and (max-width: 930px) {
    .container-table{
        display: block;
    }
    .fertigungsgange{
        margin-top: 20px;
        float: none;
    }
}
 
<button
   className="modal-close-button"
   onClick={handleCloseModal}
 >
   <span aria-hidden="true">&times;</span>
 </button>
 
 You are a CSS expert
 
 I want you to do following changes in styling.
 
 1. Rounded shape. Apply border radius to 50pc.
 2. Background to "#f1f1f1".
 3. No outer border color.
 3. border of child element span should be 2px solid #494A53.
.initials-avatar {
    background-color: #023979;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    width: 38px;
    height: 38px;
}
.box {
  border: 10px solid;
  border-image: linear-gradient(45deg,red,blue) 10;
}
// WP_Query arguments
$args = array(
	'post_type'              => array( 'post' ),
	'post_status'            => array( 'pubblic' ),
 	 'post_per_page' => 6,
	'order'                  => 'DESC',
	'orderby'                => 'date',
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
	while ( $query->have_posts() ) {
		$query->the_post();
		// do something
	}
} else {
	// no posts found
}

// Restore original Post Data
wp_reset_postdata();
© Copyright [year] All Rights Reserved - <a href="/privacy-policy/">Privacy Policy</a> - <a href="/mappa-sito/">Mappa del sito</a> - <a href="https://scintille.net/" target="_blank" rel="noopener">Scintille web agency</a>
Changing the Value of a Custom Property Using JavaScript
I’ve been mentioning throughout this whole article that variables can be updated using JavaScript, so let’s get into that.

Say you have a light theme and want to switch it to a dark theme, assuming you have some CSS like the following:

```css
:root {
  --text-color: black;
  --background-color: white;
}

body {
  color: var(--text-color);
  background: var(--background-color);
}
```

You can update the `--text-color` and `--background-color` custom properties by doing the following:

```js
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
```
<span class="leuchtstift">
- aspect-ratio (to make squares evenly.)

- position: fixed;   inset: 0 0 0 20%; (top,right,bottom,left)

- background: hsl( var(--clr-white) / 0.05);  backdrop-filter: blur(