Group of horizontal lists

bulbasaur

#1

grass

poison

ivysaur

#2

grass

poison

venusaur

#3

grass

poison

charmander

#5

fire

charmeleon

#6

fire

charizard

#7

fire

flying

squirtle

#10

water

wartortle

#11

water

blastoise

#12

water

chikorita

#249

grass

bayleef

#250

grass

meganium

#251

grass

cyndaquil

#252

fire

quilava

#253

fire

typhlosion

#254

fire

totodile

#255

water

croconaw

#256

water

feraligatr

#257

water

treecko

#347

grass

grovyle

#348

grass

sceptile

#349

grass

torchic

#351

fire

combusken

#352

fire

fighting

blaziken

#353

fire

fighting

mudkip

#355

water

marshtomp

#356

water

ground

swampert

#357

water

ground

Vue + Tailwind code

GroupOfHorizontalListOfPokemons.vue

<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "vue-fluid-dnd";
import type { Pokemon } from "./Pokemon";
import PokemonComponent from "./PokemonComponent.vue";
import { fetchPokemons } from "@/server/pokemonServer";

const pokemons = ref([] as Pokemon[]);
pokemons.value = await fetchPokemons(9);

const pokemon2G = ref([] as Pokemon[]);
pokemon2G.value = await fetchPokemons(9, 151);

const pokemon3G = ref([] as Pokemon[]);
pokemon3G.value = await fetchPokemons(9, 251);

const { parent } = useDragAndDrop(pokemons, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});
const { parent: parent2 } = useDragAndDrop(pokemon2G, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});

const { parent: parent3 } = useDragAndDrop(pokemon3G, {
  droppableGroup: "group",
  direction: "horizontal",
  draggingClass: "dragging-pokemon",
});
</script>
<template>
  <div
    class="flex max-sm:justify-center flex-col gap-4 max-sm:gap-0.5 items-start"
  >
    <div
      ref="parent"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemons"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
    <div
      ref="parent2"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemon2G"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
    <div
      ref="parent3"
      class="bg-gray-200/60 border-solid w-full border-black/40 rounded-2xl border-4 max-lg:p-1 p-4 max-sm:p-0.5 max-sm:border-2 flex flex-row overflow-x-auto gap-2 max-sm:gap-1"
    >
      <PokemonComponent
        class="min-w-44 max-sm:min-w-32"
        v-for="(pokemon, index) in pokemon3G"
        :key="pokemon.name"
        :index="index"
        :pokemon="pokemon"
      />
    </div>
  </div>
</template>