feat: genereate component

Author: LittleSound

app/components/Counter.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { renderSVG } from 'uqr'
+
+const props = withDefaults(defineProps<{
+  data: string[]
+  speed: number
+}>(), {
+  speed: 250,
+})
+
+const svgList = computed(() => props.data.map((content, i) => ({
+  id: i,
+  svg: renderSVG(content),
+})))
+const activeIndex = ref(0)
+watch(() => props.data, () => activeIndex.value = 0)
+const activeSvg = computed(() => svgList.value[activeIndex.value])
+
+let intervalId: any
+function initInterval() {
+  intervalId = setInterval(() => {
+    activeIndex.value = (activeIndex.value + 1) % svgList.value.length
+  }, props.speed)
+}
+watch(() => props.speed, () => {
+  intervalId && clearInterval(intervalId)
+  initInterval()
+}, { immediate: true })
+onUnmounted(() => intervalId && clearInterval(intervalId))
+</script>
+
+<template>
+  <div flex flex-col items-center>
+    <p>{{ activeIndex }}/{{ svgList.length }}</p>
+    <div class="h-full max-h-50vh max-w-50vh w-full" v-html="activeSvg?.svg" />
+  </div>
+</template>

app/components/DarkToggle.vue

@@ -1,9 +1,18 @@
 <template>
-  <main class="px-10 py-20 text-center">
-    <slot />
-    <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
+  <main>
+    <div flex flex-col items-center gap-4 text-center>
+      <h1 text-4xl>
+        QR Code Generator
+      </h1>
+      <div flex gap-5>
+        <NuxtLink op70 hover="text-blue" to="/" active-class="!op100">
+          Generate
+        </NuxtLink>
+        <NuxtLink op70 hover="text-blue" to="/scan" active-class="!op100">
+          Scan
+        </NuxtLink>
+      </div>
     </div>
+    <slot />
   </main>
 </template>