Hugging Face's logo

Spaces:
akhaliq
/
svelte-dashboard
Build error

App Files Community
akhaliq HF Staff commited on
Commit
77ad024
·
verified ·
1 Parent(s): 150e09e

Upload src/App.svelte with huggingface_hub

Browse files
Files changed (1) hide show
  1. src/App.svelte +91 -41
src/App.svelte CHANGED
@@ -1,47 +1,97 @@
 
1
  <script lang="ts">
2
- import svelteLogo from './assets/svelte.svg'
3
- import viteLogo from '/vite.svg'
4
- import Counter from './lib/Counter.svelte'
5
- </script>
 
 
 
 
 
 
 
 
6
 
7
- <main>
8
- <div>
9
- <a href="https://vite.dev" target="_blank" rel="noreferrer">
10
- <img src={viteLogo} class="logo" alt="Vite Logo" />
11
- </a>
12
- <a href="https://svelte.dev" target="_blank" rel="noreferrer">
13
- <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
14
- </a>
15
- </div>
16
- <h1>Vite + Svelte</h1>
 
 
 
 
 
 
 
 
17
 
18
- <div class="card">
19
- <Counter />
20
- </div>
 
 
 
 
 
 
 
 
 
 
21
 
22
- <p>
23
- Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
24
- </p>
 
 
25
 
26
- <p class="read-the-docs">
27
- Click on the Vite and Svelte logos to learn more
28
- </p>
29
- </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
 
31
- <style>
32
- .logo {
33
- height: 6em;
34
- padding: 1.5em;
35
- will-change: filter;
36
- transition: filter 300ms;
37
- }
38
- .logo:hover {
39
- filter: drop-shadow(0 0 2em #646cffaa);
40
- }
41
- .logo.svelte:hover {
42
- filter: drop-shadow(0 0 2em #ff3e00aa);
43
- }
44
- .read-the-docs {
45
- color: #888;
46
- }
47
- </style>
 
1
+ <!-- src/App.svelte -->
2
  <script lang="ts">
3
+ import { onMount } from 'svelte';
4
+ import Card from './lib/Card.svelte';
5
+ import Chart from './lib/Chart.svelte';
6
+
7
+ let loading = true;
8
+ let error: string | null = null;
9
+ let stats = {
10
+ revenue: 0,
11
+ users: 0,
12
+ orders: 0,
13
+ conversion: 0
14
+ };
15
 
16
+ onMount(async () => {
17
+ try {
18
+ // Simulate API call
19
+ await new Promise(resolve => setTimeout(resolve, 1000));
20
+
21
+ stats = {
22
+ revenue: 124500,
23
+ users: 2341,
24
+ orders: 342,
25
+ conversion: 3.2
26
+ };
27
+
28
+ loading = false;
29
+ } catch (err) {
30
+ error = 'Failed to load dashboard data';
31
+ loading = false;
32
+ }
33
+ });
34
 
35
+ const formatCurrency = (amount: number) => {
36
+ return new Intl.NumberFormat('en-US', {
37
+ style: 'currency',
38
+ currency: 'USD',
39
+ minimumFractionDigits: 0,
40
+ maximumFractionDigits: 0
41
+ }).format(amount);
42
+ };
43
+
44
+ const formatNumber = (num: number) => {
45
+ return new Intl.NumberFormat('en-US').format(num);
46
+ };
47
+ </script>
48
 
49
+ <main class="container">
50
+ <header>
51
+ <h1>Dashboard</h1>
52
+ <p class="subtitle">Overview of your business performance</p>
53
+ </header>
54
 
55
+ {#if loading}
56
+ <div class="loading">
57
+ <div class="spinner"></div>
58
+ <p>Loading dashboard...</p>
59
+ </div>
60
+ {:else if error}
61
+ <div class="error">
62
+ <p>{error}</p>
63
+ </div>
64
+ {:else}
65
+ <section class="grid">
66
+ <Card
67
+ title="Revenue"
68
+ value={formatCurrency(stats.revenue)}
69
+ change="+12.5%"
70
+ positive={true}
71
+ />
72
+ <Card
73
+ title="Active Users"
74
+ value={formatNumber(stats.users)}
75
+ change="+5.2%"
76
+ positive={true}
77
+ />
78
+ <Card
79
+ title="Orders"
80
+ value={formatNumber(stats.orders)}
81
+ change="-2.4%"
82
+ positive={false}
83
+ />
84
+ <Card
85
+ title="Conversion"
86
+ value={`${stats.conversion}%`}
87
+ change="+0.3%"
88
+ positive={true}
89
+ />
90
+ </section>
91
 
92
+ <section class="chart-section">
93
+ <h2>Revenue Trend</h2>
94
+ <Chart />
95
+ </section>
96
+ {/if}
97
+ </main>