init

src/preview/Preview.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+	import data from '@/preview/chats.json';
+	import { state } from '@/preview/states.svelte';
+	import App from '@/App.svelte';
+
+	let filtered = $derived(
+		state.giftOnly ? data.filter((c) => c.data.hasGift) : data
+	) as Comment[];
+	let chats = $derived(filtered.slice(state.skip, state.skip + state.commentLimit));
+</script>
+
+<div class="p-8 w-screen h-screen flex flex-col gap-16">
+	<div class="bg-white sticky top-0 z-50 flex flex-col gap-2 py-2">
+		<div class="grid grid-cols-2 gap-2">
+			<label>
+				<input type="checkbox" bind:checked={state.giftOnly} />
+				Gift Only
+			</label>
+			<label>
+				<input type="checkbox" bind:checked={state.showJson} />
+				Show JSON
+			</label>
+		</div>
+		<label class="flex flex-row items-center gap-1">
+			Limit ({state.commentLimit})
+			<input type="range" bind:value={state.commentLimit} class="flex-grow" min="10" />
+		</label>
+		<label class="flex flex-row items-center gap-1">
+			Skip ({state.skip})
+			<input
+				type="range"
+				bind:value={state.skip}
+				class="flex-grow"
+				min={0}
+				max={filtered.length - state.commentLimit}
+			/>
+		</label>
+	</div>
+	<div class="grow">
+		<App {chats} />
+	</div>
+</div>

src/preview/main.ts

@@ -0,0 +1,9 @@
+import '../app.css';
+import { mount } from 'svelte';
+import Preview from './Preview.svelte';
+
+const app = mount(Preview, {
+	target: document.getElementById('app')!
+});
+
+export default app;

src/preview/states.svelte.ts

@@ -0,0 +1,6 @@
+export const state = $state({
+	giftOnly: false,
+	commentLimit: 30,
+	skip: 0,
+	showJson: false
+});