Updates

demo/app.vue

@@ -1,5 +1,37 @@
 <template>
-  <div>
-    <NuxtTweet :id="'1691472701284892672'" />
-  </div>
+  <main>
+    <header>
+      <nav>
+        <a
+          @click.prevent="show = 'testimonial'"
+          :class="{ active: show === 'testimonial' }"
+        >
+          Testimonial
+        </a>
+        <a
+          @click.prevent="show = 'tweet'"
+          :class="{ active: show === 'tweet' }"
+        >
+          Tweet
+        </a>
+      </nav>
+    </header>
+
+    <!-- Testimonial -->
+    <Testimonial v-if="show === 'testimonial'" />
+
+    <!-- Tweet -->
+    <Tweet v-if="show === 'tweet'" />
+  </main>
 </template>
+<script setup lang="ts">
+import { ref } from "#imports";
+const show = ref("tweet");
+</script>
+
+<style scoped>
+.active {
+  background: var(--accent);
+  color: var(--accent-bg);
+}
+</style>

demo/components/Testimonial.vue

@@ -0,0 +1,73 @@
+<template>
+  <h1>Nuxt Testimonial</h1>
+  <p>Just add your tweet ids seperated by line below to see how it works.</p>
+
+  <!-- Tweet Ids Input -->
+  <form @submit.prevent="update" class="notice">
+    <textarea type="text" v-model="idInput" rows="3"></textarea>
+
+    <select @change="changeColumns($event)" style="margin-right: 5px">
+      <option value="1">Max columns: 1</option>
+      <option value="2" default selected>Max columns: 2</option>
+      <option value="3">Max columns: 3</option>
+    </select>
+
+    <select @change="changeWidth($event)">
+      <option value="100">Column width: 100px</option>
+      <option value="200" default selected>Column width: 200px</option>
+      <option value="300">Column width: 300px</option>
+    </select>
+    <div>
+      <button type="submit">update</button>
+    </div>
+  </form>
+
+  <!-- Testimonial Wall -->
+  <NuxtTestimonial
+    :ids="ids"
+    :show-media="false"
+    :max-columns="columns"
+    :column-width="width"
+    :key="key"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "#imports";
+
+const ids = ref([
+  "1683982469752840193",
+  "1690855751001206784",
+  "1689417504265834496",
+  "1687618522145521664",
+  "1685145017919348736",
+  "1685544929458847746",
+  "1637211704093478912",
+  "1688762339506745344",
+  "1688758457271554048",
+  "1687253788804218883",
+  "1687350574172577792",
+]);
+const key = ref(0);
+
+const idInput = ref(ids.value.join("\n"));
+const columns = ref(2);
+const width = ref(200);
+
+function changeColumns(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  columns.value = Number(target.value);
+  key.value++;
+}
+
+function changeWidth(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  width.value = Number(target.value);
+  key.value++;
+}
+
+function update() {
+  ids.value = idInput.value.split("\n").filter((v) => v);
+  key.value++;
+}
+</script>

demo/components/Tweet.vue

@@ -0,0 +1,26 @@
+<template>
+  <h1>Nuxt Tweet</h1>
+  <p>Just add your tweet id below to see it in action.</p>
+
+  <!-- Id Input -->
+  <form @submit.prevent="update" class="notice">
+    <input type="text" v-model="idInput" />
+    <div>
+      <button type="submit">update</button>
+    </div>
+  </form>
+
+  <!-- Tweet -->
+  <NuxtTweet :id="id" :show-media="true" :key="id" />
+</template>
+
+<script setup lang="ts">
+import { ref } from "#imports";
+
+const idInput = ref("1683982469752840193");
+const id = ref("1683982469752840193");
+
+function update() {
+  id.value = idInput.value;
+}
+</script>

demo/nuxt.config.ts

@@ -1,5 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: false },
-  modules: ["nuxt-testimonial"],
+  modules: ["nuxt-testimonial", "nuxt-simple-css"],
+  nuxtSimpleCss: {
+    accent: "#000",
+  },
 });