init

src/App.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+	import { SendHorizontalIcon } from '@lucide/svelte';
+	import RenderComment from '@/components/RenderComment.svelte';
+	let { chats }: { chats: Comment[] } = $props();
+
+	let date = $state(new Date());
+
+	let hour = $derived(date.getHours());
+	let minute = $derived(date.getMinutes());
+
+	let render_chats = $derived([...chats].reverse());
+
+	function pad(str: string | { toString(): string }, char: number): string {
+		const s = str.toString();
+		const diff = char - s.length;
+		if (diff <= 0) return s;
+		return s + '0'.repeat(diff);
+	}
+
+	$effect(() => {
+		const interval = setInterval(() => {
+			date = new Date();
+		}, 1000);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="bg-frame px-30 pt-30 pb-15 rounded-30 h-full w-full flex flex-col gap-15 font-naikai">
+	<div class="grow flex flex-col rounded-15 overflow-hidden bg-background">
+		<div class="bg-status flex flex-row justify-center p-5 text-16 font-bold text-status-text">
+			<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+		</div>
+		<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
+			{#each render_chats as chat (chat.id ?? chat)}
+				<RenderComment {chat} />
+			{/each}
+		</div>
+		<div class="px-30 py-15">
+			<div
+				class="rounded-full text-20 text-input-text bg-input px-20 py-10 flex flex-row items-center justify-between gap-10"
+			>
+				<span>回覆...</span>
+				<SendHorizontalIcon class="size-20 text-input-icon" />
+			</div>
+		</div>
+	</div>
+	<div class="flex flex-row justify-center">
+		<div class="size-50 rounded-full bg-background"></div>
+	</div>
+</div>