87 lines
2.7 KiB
Svelte
87 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import type { Comment } from '@onecomme.com/onesdk/types/Comment';
|
|
import {
|
|
BatteryFullIcon,
|
|
HomeIcon,
|
|
SendHorizontalIcon,
|
|
Tally4Icon,
|
|
TriangleIcon,
|
|
WifiIcon
|
|
} from '@lucide/svelte';
|
|
import RenderComment from '@/components/RenderComment.svelte';
|
|
import axolotl from '@/assets/axolotl.png';
|
|
|
|
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="w-460 h-800 relative">
|
|
<div
|
|
class="absolute -z-10 -right-6 top-150 w-15 rounded-5 bg-frame border-3 border-frame-border h-120"
|
|
></div>
|
|
<div
|
|
class="absolute -z-10 -right-6 top-290 w-15 rounded-5 bg-frame border-3 border-frame-border h-75"
|
|
></div>
|
|
<div
|
|
class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-10 bottom-215 rotate-82"
|
|
></div>
|
|
<div
|
|
class="absolute -z-10 bg-black w-200 h-5 rounded-full origin-right -right-5 bottom-215 rotate-70"
|
|
></div>
|
|
<div
|
|
class="bg-frame p-15 rounded-25 z-10 border-frame-border border-5 w-full h-full flex flex-col gap-5 font-naikai"
|
|
>
|
|
<div
|
|
class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
|
|
>
|
|
<div
|
|
class="bg-status/80 gap-4 shadow-md backdrop-blur-md flex flex-row py-2 px-18 text-16 font-bold text-status-text absolute top-0 -left-10 -right-10"
|
|
>
|
|
<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
|
|
<WifiIcon class="h-full w-auto ml-auto" />
|
|
<BatteryFullIcon class="h-full w-auto" />
|
|
<span>100%</span>
|
|
</div>
|
|
<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
|
|
{#each render_chats as chat (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 class="h-48 flex flex-row items-center justify-center text-navigation gap-80">
|
|
<Tally4Icon class="size-24"/>
|
|
<HomeIcon class="size-24"/>
|
|
<TriangleIcon class="size-24 origin-center -rotate-90" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src={axolotl} alt="axolotl" class="z-20 w-340 h-332 absolute -right-192 -bottom-76" />
|
|
</div>
|