mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<template>
|
|
<TabbedLayout>
|
|
<template #preview>
|
|
<div class="h-[600px] overflow-hidden demo-container">
|
|
<GridMotion :items="images" />
|
|
</div>
|
|
|
|
<PropTable :data="propData" />
|
|
|
|
<Dependencies :dependency-list="['gsap']" />
|
|
</template>
|
|
|
|
<template #code>
|
|
<CodeExample :code-object="gridMotion" />
|
|
</template>
|
|
|
|
<template #cli>
|
|
<CliInstallation :command="gridMotion.cli" />
|
|
</template>
|
|
</TabbedLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import CliInstallation from '../../components/code/CliInstallation.vue';
|
|
import CodeExample from '../../components/code/CodeExample.vue';
|
|
import Dependencies from '../../components/code/Dependencies.vue';
|
|
import PropTable from '../../components/common/PropTable.vue';
|
|
import TabbedLayout from '../../components/common/TabbedLayout.vue';
|
|
import GridMotion from '../../content/Backgrounds/GridMotion/GridMotion.vue';
|
|
import { gridMotion } from '../../constants/code/Backgrounds/gridMotionCode';
|
|
|
|
const propData = [
|
|
{
|
|
name: 'items',
|
|
type: 'array',
|
|
default: '[]',
|
|
description: 'An array of items to display in the grid. Each item can be a string, JSX element, or an image URL.'
|
|
},
|
|
{
|
|
name: 'gradientColor',
|
|
type: 'string',
|
|
default: 'black',
|
|
description: 'Controls the color of the radial gradient used as the background.'
|
|
}
|
|
];
|
|
|
|
const imageUrl =
|
|
'https://images.unsplash.com/photo-1748370987492-eb390a61dcda?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
|
|
const numberOfImages = 30;
|
|
const images = Array.from({ length: numberOfImages }, () => imageUrl);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-container {
|
|
padding: 0;
|
|
}
|
|
</style>
|