Spaces:
Build error
Build error
File size: 3,815 Bytes
6150b06 150e09e 6150b06 150e09e 6150b06 150e09e 6150b06 150e09e 6150b06 150e09e 6150b06 150e09e 6150b06 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!-- src/App.svelte -->
<script lang="ts">
import { onMount } from 'svelte';
import EmailCard from './lib/EmailCard.svelte';
import LoadingSpinner from './lib/LoadingSpinner.svelte';
import ErrorMessage from './lib/ErrorMessage.svelte';
interface Email {
id: string;
from: string;
subject: string;
body: string;
date: string;
snippet: string;
}
let emails: Email[] = [];
let currentIndex = 0;
let loading = true;
let error: string | null = null;
async function fetchEmails() {
try {
loading = true;
error = null;
// Simulated Gmail API response
// In a real app, you would use Google's Gmail API
const mockEmails: Email[] = [
{
id: '1',
from: 'GitHub <noreply@github.com>',
subject: 'New pull request created',
body: 'A new pull request has been created in the repository. Please review the changes and provide feedback.',
date: '2024-01-15 10:30 AM',
snippet: 'A new pull request has been created...'
},
{
id: '2',
from: 'Netflix <info@netflix.com>',
subject: 'New releases this week',
body: 'Discover the latest movies and TV shows added to Netflix this week. Don\'t miss out on the trending titles!',
date: '2024-01-15 9:15 AM',
snippet: 'Discover the latest movies and TV shows...'
},
{
id: '3',
from: 'Amazon <no-reply@amazon.com>',
subject: 'Your order has been shipped',
body: 'Your package is on the way! Track your order #12345-ABCD-67890 and see the estimated delivery date.',
date: '2024-01-15 8:45 AM',
snippet: 'Your package is on the way! Track your order...'
},
{
id: '4',
from: 'LinkedIn <updates@linkedin.com>',
subject: 'You have 3 new connection requests',
body: 'Expand your professional network by connecting with these 3 people who have requested to connect with you.',
date: '2024-01-14 6:20 PM',
snippet: 'Expand your professional network...'
}
];
await new Promise(resolve => setTimeout(resolve, 1000));
emails = mockEmails;
} catch (err) {
error = 'Failed to load emails. Please check your connection and try again.';
} finally {
loading = false;
}
}
function nextEmail() {
if (currentIndex < emails.length - 1) {
currentIndex++;
}
}
function previousEmail() {
if (currentIndex > 0) {
currentIndex--;
}
}
onMount(() => {
fetchEmails();
});
</script>
<main>
<header>
<h1>Gmail Reader</h1>
<button
class="refresh-btn"
on:click={fetchEmails}
disabled={loading}
aria-label="Refresh emails"
>
↻ Refresh
</button>
</header>
{#if loading}
<LoadingSpinner />
{:else if error}
<ErrorMessage {error} onRetry={fetchEmails} />
{:else if emails.length === 0}
<div class="empty-state">
<h2>No emails found</h2>
<p>Your inbox is empty. Check back later!</p>
</div>
{:else}
<div class="email-container">
<EmailCard email={emails[currentIndex]} />
<div class="navigation">
<button
on:click={previousEmail}
disabled={currentIndex === 0}
aria-label="Previous email"
>
← Previous
</button>
<span class="counter">
{currentIndex + 1} of {emails.length}
</span>
<button
on:click={nextEmail}
disabled={currentIndex === emails.length - 1}
aria-label="Next email"
>
Next →
</button>
</div>
</div>
{/if}
</main> |