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 i gsap`,
  usage: `<template>
    <GridMotion
      :items="items"
    />
</template>

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

  const items = [
    'Item 1',
    "<div key='jsx-item-1'>Custom JSX Content</div>",
    'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'Item 2',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'Item 4',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'Item 5',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'Item 7',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'Item 8',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'Item 10',
    "<div key='jsx-item-3'>Custom JSX Content</div>",
    'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'Item 11',
    "<div key='jsx-item-2'>Custom JSX Content</div>",
    'Item 13',
    "<div key='jsx-item-4'>Custom JSX Content</div>",
    'https://images.unsplash.com/photo-1723403804231-f4e9b515fe9d?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'Item 14',
    // Add more items as needed
    ];
</script>`,
  code,
};