feat: 添加 InspiraUI 组件

src/pages/UI-components/InspiraUI/index.page.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useLayout } from '@/layouts/sakai-vue/composables/layout';
+import { computed } from 'vue';
+
+import CardSpotlight from './CardSpotlight.vue';
+import GradientButton from './GradientButton.vue';
+
+const { isDarkTheme } = useLayout();
+
+// const isDark = computed(() => useColorMode().value == 'dark');
+const bgColor = computed(() => (isDarkTheme.value ? '#000' : '#fff'));
+</script>
+
+<template>
+  <div class="z-10 flex h-56 w-full flex-col items-center justify-center">
+    <GradientButton :bg-color="bgColor">Zooooooooooom 🚀</GradientButton>
+  </div>
+  <div class="flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row">
+    <CardSpotlight
+      class="cursor-pointer flex-col items-center justify-center whitespace-nowrap text-4xl shadow-2xl"
+      :gradient-color="isDarkTheme ? '#363636' : '#C9C9C9'"
+    >
+      Card Spotlight
+    </CardSpotlight>
+  </div>
+</template>