feat: add skewed infinite scroll component

selemondev · Oct 6, 2024 · 7de2f94 · 7de2f94
1 parent a3da241
commit 7de2f94
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 2 deletions.
diff --git a/docs/.vitepress/components/demo-block/src/index.vue b/docs/.vitepress/components/demo-block/src/index.vue
@@ -1,6 +1,7 @@
 <script lang='ts' setup name="demo-block">
 import { Icon } from '@iconify/vue'
 import { useClipboard, useToggle } from '@vueuse/core'
+import { useData } from 'vitepress'
 import { computed, ref } from 'vue'
 import { MagicString } from 'vue/compiler-sfc'
 import DotPattern from '../../../../src/components/spark-ui/DotPattern/DotPattern.vue'
@@ -9,6 +10,8 @@ import { demoProps } from './index'
 
 const props = defineProps(demoProps)
 
+const vitePressData = useData()
+
 const decodedHighlightedCode = computed(() => {
   try {
     const decodeHighlightedCode = decodeURIComponent(props.highlightedCode)
@@ -60,7 +63,7 @@ function handleRefreshComponent() {
           </p>
         </div>
         <div class="relative">
-          <div class="flex justify-end pt-3 gap-2">
+          <div v-if="vitePressData.page.value.filePath !== 'index.md'" class="flex justify-end pt-3 gap-2">
             <a class="o-demo_action_item" group :href="github" target="_blank">
               <div class="o-demo_action_icon i-carbon-logo-github" />
               <div class="o-demo_tooltip" group-hover:opacity-100>
@@ -83,7 +86,9 @@ function handleRefreshComponent() {
         </div>
       </div>
     </div>
-    <div v-show="value" :class="`language-${lang} extra-class`" v-html="decodedHighlightedCode" />
+    <div>
+      <div v-show="value" :class="`language-${lang} extra-class`" v-html="decodedHighlightedCode" />
+    </div>
     <!-- <div
       class="relative flex h-72 w-full flex-col items-center justify-center c-#282f38  overflow-hidden rounded-lg border dark:bg-[#000000] [md:shadow-xl c-#282f38 overflow-x-scroll !border-gray-700 dark:bg-[#000000] dark:border-#fff flex-wrap [&:o-button-base]:!c-context vp-raw b"
     >

diff --git a/docs/index.md b/docs/index.md
@@ -50,3 +50,5 @@ features:
 <demo src="./src/example/animatedBeamDemo/Demo.vue" />
 
 <demo src="./src/example/animatedGradientText/Demo.vue" />
+
+<demo src="./src/example/skewedInfiniteScroll/Demo.vue" />
diff --git a/docs/src/components/spark-ui/skewed-infinite-scroll/SkewedInfiniteScroll.vue b/docs/src/components/spark-ui/skewed-infinite-scroll/SkewedInfiniteScroll.vue
@@ -0,0 +1,74 @@
+<script setup lang='ts'>
+const items = [
+  { id: '1', text: 'Spark UI' },
+  { id: '2', text: 'Another One' },
+  { id: '3', text: 'Yet Another One' },
+  { id: '4', text: 'Yet Another One' },
+  { id: '5', text: 'Yet Another One' },
+  { id: '6', text: 'Yet Another One' },
+  {
+    id: '7',
+    text: 'Yet Another One',
+  },
+  {
+    id: '8',
+    text: 'Yet Another One',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-center">
+      <div
+        class="relative w-full max-w-screen-lg overflow-hidden" :style="{
+          maskComposite: 'intersect',
+          maskImage: `
+          linear-gradient(to right,  transparent, black 5rem),
+          linear-gradient(to left,   transparent, black 5rem),
+          linear-gradient(to bottom, transparent, black 5rem),
+          linear-gradient(to top,    transparent, black 5rem)
+        `,
+        }"
+      >
+        <div class="mx-auto grid animate-skew-scroll grid-cols-1 gap-5 sm:grid-cols-2">
+          <div v-for="item in items" :key="item.id">
+            <div
+              :key="item.id"
+              class="flex cursor-pointer w-72 p-6 items-center space-x-2 rounded-md border border-gray-100 px-5 shadow-md transition-all hover:-translate-y-1 hover:translate-x-1 hover:scale-[1.025] hover:shadow-xl "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="currentColor" stroke="white" strokeWidth="2" strokeLinecap="round"
+                strokeLinejoin="round" class="h-6 w-6 flex-none text-red-500"
+              >
+                <path
+                  d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+                />
+                <path d="m9 12 2 2 4-4" />
+              </svg>
+              <p class="text-gray-600">
+                {{ item.text }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.animate-skew-scroll {
+  animation: SkewScroll 20s linear infinite;
+}
+
+@keyframes SkewScroll {
+  0% {
+    transform: rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(0);
+  }
+  100% {
+    transform: rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(-100%);
+  }
+}
+</style>
diff --git a/docs/src/example/skewedInfiniteScroll/Demo.vue b/docs/src/example/skewedInfiniteScroll/Demo.vue
@@ -0,0 +1,7 @@
+<script setup lang='ts'>
+import SkewedInfiniteScroll from './SkewedInfiniteScroll.vue'
+</script>
+
+<template>
+  <SkewedInfiniteScroll />
+</template>
diff --git a/docs/src/example/skewedInfiniteScroll/SkewedInfiniteScroll.vue b/docs/src/example/skewedInfiniteScroll/SkewedInfiniteScroll.vue
@@ -0,0 +1,74 @@
+<script setup lang='ts'>
+const items = [
+  { id: '1', text: 'Spark UI' },
+  { id: '2', text: 'Another One' },
+  { id: '3', text: 'Yet Another One' },
+  { id: '4', text: 'Yet Another One' },
+  { id: '5', text: 'Yet Another One' },
+  { id: '6', text: 'Yet Another One' },
+  {
+    id: '7',
+    text: 'Yet Another One',
+  },
+  {
+    id: '8',
+    text: 'Yet Another One',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-center">
+      <div
+        class="relative w-full max-w-screen-lg overflow-hidden" :style="{
+          maskComposite: 'intersect',
+          maskImage: `
+          linear-gradient(to right,  transparent, black 5rem),
+          linear-gradient(to left,   transparent, black 5rem),
+          linear-gradient(to bottom, transparent, black 5rem),
+          linear-gradient(to top,    transparent, black 5rem)
+        `,
+        }"
+      >
+        <div class="mx-auto grid animate-skew-scroll grid-cols-1 gap-5 sm:grid-cols-2">
+          <div v-for="item in items" :key="item.id">
+            <div
+              :key="item.id"
+              class="flex cursor-pointer w-72 px-6 py-1 items-center space-x-2 rounded-md border border-gray-100 shadow-md transition-all hover:-translate-y-1 hover:translate-x-1 hover:scale-[1.025] hover:shadow-xl "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="currentColor" stroke="white" strokeWidth="2" strokeLinecap="round"
+                strokeLinejoin="round" class="h-6 w-6 flex-none text-red-500"
+              >
+                <path
+                  d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+                />
+                <path d="m9 12 2 2 4-4" />
+              </svg>
+              <p class="text-gray-600">
+                {{ item.text }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.animate-skew-scroll {
+  animation: SkewScroll 20s linear infinite;
+}
+
+@keyframes SkewScroll {
+  0% {
+    transform: rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(0);
+  }
+  100% {
+    transform: rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(-100%);
+  }
+}
+</style>