Component Boom

src/constants/code/Components/cardSwapCode.ts

@@ -0,0 +1,54 @@
+import code from '@content/Components/CardSwap/CardSwap.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const cardSwap: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CardSwap`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <CardSwap 
+    :card-distance="60"
+    :vertical-distance="70"
+    :delay="5000"
+    :skew-amount="6"
+    easing="elastic"
+    :pause-on-hover="false"
+    @card-click="handleCardClick"
+  >
+    <template #card-0>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-circle-fill mr-2"></i>
+          <span>Smooth</span>
+        </div>
+      </div>
+    </template>
+    
+    <template #card-1>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-code mr-2"></i>
+          <span>Reliable</span>
+        </div>
+      </div>
+    </template>
+    
+    <template #card-2>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-sliders-h mr-2"></i>
+          <span>Customizable</span>
+        </div>
+      </div>
+    </template>
+  </CardSwap>
+</template>
+
+<script setup lang="ts">
+  import CardSwap from "./CardSwap.vue";
+
+  const handleCardClick = (index: number) => {
+    console.log(\`Card \${index} clicked\`);
+  };
+</script>`,
+  code
+}

src/constants/code/Components/carouselCode.ts

@@ -0,0 +1,40 @@
+import code from '@content/Components/Carousel/Carousel.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const carousel: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Carousel`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <Carousel 
+    :items="carouselItems"
+    :base-width="300"
+    :autoplay="true"
+    :autoplay-delay="3000"
+    :pause-on-hover="true"
+    :loop="true"
+    :round="false"
+  />
+</template>
+
+<script setup lang="ts">
+  import Carousel from "./Carousel.vue";
+  import type { CarouselItem } from "./Carousel.vue";
+
+  const carouselItems: CarouselItem[] = [
+    {
+      title: "Custom Item",
+      description: "A custom carousel item.",
+      id: 1,
+      icon: "circle",
+    },
+    {
+      title: "Another Item",
+      description: "Another carousel item.",
+      id: 2,
+      icon: "layers",
+    },
+    // Add more items as needed
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/decayCardCode.ts

@@ -0,0 +1,23 @@
+import code from '@content/Components/DecayCard/DecayCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const decayCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/DecayCard`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <DecayCard
+    :width="300"
+    :height="400"
+    image="https://picsum.photos/300/400?grayscale"
+  >
+    <div style="mix-blend-mode: overlay;">
+      Decay<br />Card
+    </div>
+  </DecayCard>
+</template>
+
+<script setup lang="ts">
+  import DecayCard from "./DecayCard.vue";
+</script>`,
+  code
+}

src/constants/code/Components/dockCode.ts

@@ -0,0 +1,47 @@
+import code from '@content/Components/Dock/Dock.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const dock: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Dock`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <Dock
+    :items="items"
+    :panel-height="68"
+    :base-item-size="50"
+    :magnification="70"
+    :distance="200"
+    :dock-height="256"
+    :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
+  />
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import Dock from "./Dock.vue";
+
+  const items = [
+    { 
+      icon: () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Home', 
+      onClick: () => console.log('Home clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Archive', 
+      onClick: () => console.log('Archive clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Profile', 
+      onClick: () => console.log('Profile clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Settings', 
+      onClick: () => console.log('Settings clicked!') 
+    },
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/elasticSliderCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const elasticSlider: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ElasticSlider`,
+  usage: `<template>  
+  <ElasticSlider 
+    :default-value="75"
+    :starting-value="0"
+    :max-value="100"
+    :is-stepped="true"
+    :step-size="5"
+  />
+  
+  <!-- With custom icons using slots -->
+  <ElasticSlider>
+    <template #left-icon>
+      <i class="pi pi-minus text-xl"></i>
+    </template>
+    <template #right-icon>
+      <i class="pi pi-plus text-xl"></i>
+    </template>
+  </ElasticSlider>
+</template>
+
+<script setup lang="ts">
+  import ElasticSlider from "./ElasticSlider.vue";
+</script>`,
+  code
+}

src/constants/code/Components/flowingMenuCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const flowingMenu: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlowingMenu`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <FlowingMenu :items="items" />
+</template>
+
+<script setup lang="ts">
+  import FlowingMenu from "./FlowingMenu.vue";
+
+  const items = [
+    { link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
+    { link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
+    { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
+    { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/flyingPostersCode.ts

@@ -0,0 +1,37 @@
+import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const flyingPosters: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <FlyingPosters 
+    :items="posterImages"
+    :plane-width="320"
+    :plane-height="320"
+    :distortion="3"
+    :scroll-ease="0.01"
+    :camera-fov="45"
+    :camera-z="20"
+    class="h-full w-full"
+  />
+</template>
+
+<script setup lang="ts">
+  import FlyingPosters from "./FlyingPosters.vue";
+
+  const posterImages = [
+  'https://picsum.photos/800/800?grayscale&random=1',
+  'https://picsum.photos/800/800?grayscale&random=2',
+  'https://picsum.photos/800/800?grayscale&random=3',
+  'https://picsum.photos/800/800?grayscale&random=4',
+  'https://picsum.photos/800/800?grayscale&random=5',
+  'https://picsum.photos/800/800?grayscale&random=6',
+  'https://picsum.photos/800/800?grayscale&random=7',
+  'https://picsum.photos/800/800?grayscale&random=8',
+  'https://picsum.photos/800/800?grayscale&random=9',
+  'https://picsum.photos/800/800?grayscale&random=10',
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/glassIconsCode.ts

@@ -0,0 +1,23 @@
+import code from '@content/Components/GlassIcons/GlassIcons.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const glassIcons: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GlassIcons`,
+  usage: `<template>
+  <GlassIcons :items="items" class="my-glass-icons" />
+</template>
+
+<script setup lang="ts">
+  import GlassIcons from "./GlassIcons.vue";
+
+  const items = [
+    { icon: 'pi pi-file', color: 'blue', label: 'Files' },
+    { icon: 'pi pi-book', color: 'purple', label: 'Books' },
+    { icon: 'pi pi-heart', color: 'red', label: 'Health' },
+    { icon: 'pi pi-cloud', color: 'indigo', label: 'Weather' },
+    { icon: 'pi pi-pencil', color: 'orange', label: 'Notes' },
+    { icon: 'pi pi-chart-bar', color: 'green', label: 'Stats' }
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/gooeyNavCode.ts

@@ -0,0 +1,40 @@
+import code from '@content/Components/GooeyNav/GooeyNav.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const gooeyNav: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GooeyNav`,
+  usage: `<template>
+  <GooeyNav
+    :items="navItems"
+    :animation-time="600"
+    :particle-count="15"
+    :particle-distances="[90, 10]"
+    :particle-r="100"
+    :time-variance="300"
+    :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
+    :initial-active-index="0"
+  />
+</template>
+
+<script setup lang="ts">
+  import GooeyNav from "./GooeyNav.vue";
+
+  const navItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Services", href: "/services" },
+    { label: "Contact", href: "/contact" },
+  ];
+</script>
+
+<style>
+  /* Add these CSS custom properties to your global styles */
+  :root {
+    --color-1: #ff6b6b;
+    --color-2: #4ecdc4;
+    --color-3: #45b7d1;
+    --color-4: #f9ca24;
+  }
+</style>`,
+  code
+}

src/constants/code/Components/infiniteScrollCode.ts

@@ -0,0 +1,34 @@
+import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const infiniteScroll: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/InfiniteScroll`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <InfiniteScroll
+    :items="items"
+    width="30rem"
+    max-height="100%"
+    :item-min-height="150"
+    :is-tilted="false"
+    tilt-direction="left"
+    :autoplay="false"
+    :autoplay-speed="0.5"
+    autoplay-direction="down"
+    :pause-on-hover="false"
+    negative-margin="-0.5em"
+  />
+</template>
+
+<script setup lang="ts">
+  import InfiniteScroll from "./InfiniteScroll.vue";
+
+  const items = [
+    { content: "Item 1" },
+    { content: "Item 2" },
+    { content: "Item 3" },
+    // Add more items as needed
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/pixelCardCode.ts

@@ -0,0 +1,21 @@
+import code from '@content/Components/PixelCard/PixelCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const pixelCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/PixelCard`,
+  usage: `<template>
+  <PixelCard 
+    variant="default" 
+    :gap="5"
+    :speed="35"
+    colors="#f8fafc,#f1f5f9,#cbd5e1"
+    :no-focus="false"
+    class-name="custom-class"
+  ></PixelCard>
+</template>
+
+<script setup lang="ts">
+  import PixelCard from "./PixelCard.vue";
+</script>`,
+  code
+}

src/constants/code/Components/profileCardCode.ts

@@ -0,0 +1,31 @@
+import code from '@content/Components/ProfileCard/ProfileCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const profileCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  usage: `<template>
+  <ProfileCard
+    name="Javi A. Torres"
+    title="Software Engineer"
+    handle="javicodes"
+    status="Online"
+    contact-text="Contact Me"
+    avatar-url="/assets/person.png"
+    icon-url="/assets/iconpattern.png"
+    grain-url="/assets/grain.webp"
+    :show-user-info="true"
+    :show-behind-gradient="true"
+    :enable-tilt="true"
+    @contact-click="handleContactClick"
+  />
+</template>
+
+<script setup lang="ts">
+  import ProfileCard from "./ProfileCard.vue";
+
+  const handleContactClick = () => {
+    console.log('Contact button clicked!');
+  };
+</script>`,
+  code
+}

src/constants/code/Components/spotlightCardCode.ts

@@ -0,0 +1,19 @@
+import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const spotlightCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/SpotlightCard`,
+  usage: `<template>
+  <SpotlightCard 
+    class-name="custom-spotlight-card"
+    spotlight-color="rgba(255, 255, 255, 0.25)"
+  >
+    <-!-- Content inside the card -->
+  </SpotlightCard>
+</template>
+
+<script setup lang="ts">
+  import SpotlightCard from "./SpotlightCard.vue";
+</script>`,
+  code
+}