import code from '@content/Backgrounds/GridMotion/GridMotion.vue?raw';
import type { CodeObject } from '../../../types/code';

export const gridMotion: CodeObject = {
  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/GridMotion`,
  installation: `npm install gsap`,
  usage: `<template>
    <GridMotion
      :items="images"
    />
</template>

<script setup lang="ts">
  import GridMotion from "./GridMotion.vue";

  const imageUrl = 'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
  const numberOfImages = 30;
  const images = Array.from({ length: numberOfImages }, () => imageUrl);
</script>`,
  code
};