flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
2.1 kB
56 lines
1<script>
2 import BaseHeadTags from '$lib/Components/Layout/BaseHeadTags.svelte';
3 import Container from '$lib/Components/Layout/Container.svelte';
4 import ReviewList from '$lib/Components/Items/ReviewList.svelte';
5 import { rateMovieModal, showLoginModal } from '$lib/state/modals.svelte';
6
7 const { data } = $props();
8</script>
9
10<svelte:head>
11 <title>skywatched</title>
12</svelte:head>
13
14<BaseHeadTags />
15
16<Container class="relative z-10 w-full">
17 <div class="max-w-8xl mx-auto flex w-full flex-col md:flex-col">
18 <div class="mx-auto flex w-full max-w-2xl grow flex-col gap-4 py-8">
19 <h1 class="px-4 pb-4 text-2xl font-bold">Recent reviews</h1>
20
21 {#if data.feed.length > 0}
22 <ReviewList reviews={data.feed} />
23 {/if}
24 </div>
25
26 <div
27 class="md:max-w-84 order-first flex h-96 flex-col items-center justify-center px-8 text-base-100"
28 >
29 <h1 class="text-balance text-3xl font-semibold tracking-tight sm:text-5xl">skywatched</h1>
30 <p class="text-md mt-8 max-w-xs text-pretty text-center font-medium text-base-300 sm:text-lg">
31 review movies and shows with your friends from bluesky.
32 </p>
33 {#if !data.user}
34 <button
35 onclick={() => {
36 showLoginModal.toggle();
37 }}
38 type="button"
39 class="mt-8 inline-flex w-fit items-center gap-x-1.5 rounded-xl border border-accent-500/30 bg-accent-700/20 px-3 py-2 text-sm font-semibold text-accent-400 shadow-sm transition-all duration-100 hover:bg-accent-700/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600"
40 >
41 Sign in with Bluesky
42 </button>
43 {:else}
44 <button
45 onclick={() => {
46 rateMovieModal.showEmpty();
47 }}
48 type="button"
49 class="mt-8 inline-flex w-fit items-center gap-x-1.5 rounded-xl border border-accent-500/30 bg-accent-700/20 px-3 py-2 text-sm font-semibold text-accent-400 shadow-sm transition-all duration-100 hover:bg-accent-700/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600"
50 >
51 New review
52 </button>
53 {/if}
54 </div>
55 </div>
56</Container>