feat: add compare component

components/content/inspira/examples/compare/CompareAutoplayDemo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    class="flex h-[60vh] w-full items-center justify-center px-1 [perspective:800px] [transform-style:preserve-3d] md:px-8"
+  >
+    <div
+      :style="{
+        transform: 'rotateX(15deg) translateZ(80px)',
+      }"
+      class="mx-auto h-1/2 w-3/4 rounded-3xl border border-neutral-200 bg-neutral-100 p-1 md:h-3/4 md:p-4 dark:border-neutral-800 dark:bg-neutral-900"
+    >
+      <Compare
+        first-image="/images/inspira-light.png"
+        second-image="/images/inspira-dark.png"
+        first-content-class="object-cover object-left-center w-full h-96"
+        second-content-class="object-cover object-left-center w-full h-96"
+        class="size-full rounded-[22px] md:rounded-xl"
+        slide-mode="hover"
+        :autoplay="true"
+      />
+    </div>
+  </div>
+</template>

components/content/inspira/examples/compare/CompareCustomContentDemo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex w-full justify-center">
+    <Compare
+      class="rounded-xl shadow-lg"
+      :autoplay="true"
+      :autoplay-duration="3000"
+      slide-mode="hover"
+    >
+      <template #first-content>
+        <div class="flex size-full items-center justify-center bg-blue-500">
+          <div class="text-4xl font-bold text-white">☀️ Day</div>
+        </div>
+      </template>
+      <template #second-content>
+        <div class="flex size-full items-center justify-center bg-gray-900">
+          <div class="text-4xl font-bold text-white">🌙 Night</div>
+        </div>
+      </template>
+    </Compare>
+  </div>
+</template>

components/content/inspira/examples/compare/CompareDemo.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex w-full justify-center">
+    <div
+      class="rounded-3xl border border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-900"
+    >
+      <Compare
+        first-image="https://images.vscodethemes.com/antfu.theme-vitesse/vitesse-light-soft-js-preview-4JM.svg"
+        second-image="https://images.vscodethemes.com/antfu.theme-vitesse/vitesse-dark-soft-js-preview-4JM.svg"
+        first-content-class="object-cover object-left-top rounded-xl overflow-hidden"
+        second-content-class="object-cover object-left-top rounded-xl overflow-hidden"
+        class="h-[250px] w-[200px] md:h-96 md:w-[500px]"
+        slide-mode="hover"
+      >
+      </Compare>
+    </div>
+  </div>
+</template>

components/content/inspira/examples/compare/CompareDragDemo.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex w-full justify-center">
+    <Compare
+      slide-mode="drag"
+      class="rounded-xl !bg-zinc-950"
+    >
+      <template #first-content>
+        <div class="size-full overflow-auto bg-zinc-900 p-8">
+          <pre
+            class="font-mono text-red-400"
+            v-text="firstCode"
+          ></pre>
+        </div>
+      </template>
+      <template #second-content>
+        <div class="size-full overflow-auto bg-zinc-900 p-8">
+          <pre
+            class="font-mono text-green-400"
+            v-text="secondCode"
+          ></pre>
+        </div>
+      </template>
+    </Compare>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { firstCode, secondCode } from "./code/index";
+</script>

components/content/inspira/examples/compare/code/index.ts

@@ -0,0 +1,36 @@
+export const firstCode = `
+// Usage before 3.5
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// declare a ref to hold the element reference
+// the name must match template ref value
+const input = ref(null)
+
+onMounted(() => {
+  input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="input" />
+</template>
+`;
+
+export const secondCode = `
+// Usage after 3.5
+<script setup>
+import { useTemplateRef, onMounted } from 'vue'
+
+// the first argument must match the ref value in the template
+const input = useTemplateRef('my-input')
+
+onMounted(() => {
+  input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="my-input" />
+</template>
+`;