116 lines
3.3 KiB
Svelte
116 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { favorites } from '$lib/stores/store';
|
|
import { Card, Button, Badge, Input, Textarea } from 'flowbite-svelte';
|
|
import { StarSolid, CheckCircleOutline, PenOutline } from 'flowbite-svelte-icons';
|
|
|
|
// Example user data
|
|
const user = {
|
|
name: 'John Doe',
|
|
email: 'john.doe@example.com',
|
|
address: '123 Main St, City, Country'
|
|
};
|
|
|
|
// Example order history
|
|
const orders = [
|
|
{
|
|
id: 1,
|
|
date: '2023-10-01',
|
|
items: ['Tulip Bouquet', 'Rose Bouquet'],
|
|
total: 60,
|
|
status: 'Delivered'
|
|
},
|
|
{
|
|
id: 2,
|
|
date: '2023-09-25',
|
|
items: ['Sunflower Bouquet'],
|
|
total: 30,
|
|
status: 'Shipped'
|
|
}
|
|
];
|
|
|
|
// State for editing profile
|
|
let isEditing = false;
|
|
let name = user.name;
|
|
let email = user.email;
|
|
let address = user.address;
|
|
|
|
// Handle profile update
|
|
const updateProfile = () => {
|
|
user.name = name;
|
|
user.email = email;
|
|
user.address = address;
|
|
isEditing = false;
|
|
// You could add an API call here to update the user's profile
|
|
};
|
|
</script>
|
|
|
|
<!-- Welcome Section -->
|
|
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-12">
|
|
<div class="container mx-auto px-4">
|
|
<h1 class="text-4xl font-bold text-gray-900">Welcome, {user.name}!</h1>
|
|
<p class="text-lg text-gray-600">Manage your orders, favorites, and account settings here.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dashboard Content -->
|
|
<div class="container mx-auto grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-3">
|
|
<!-- Order History -->
|
|
<div class="lg:col-span-2">
|
|
<h2 class="mb-6 text-2xl font-bold text-gray-900">Order History</h2>
|
|
<div class="space-y-4">
|
|
{#each orders as order}
|
|
<Card class="p-6">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<h3 class="text-xl font-bold text-gray-900">Order #{order.id}</h3>
|
|
<Badge color={order.status === 'Delivered' ? 'green' : 'blue'}>
|
|
{order.status}
|
|
</Badge>
|
|
</div>
|
|
<p class="mb-2 text-gray-600">
|
|
<strong>Date:</strong>
|
|
{order.date}
|
|
</p>
|
|
<p class="mb-2 text-gray-600">
|
|
<strong>Items:</strong>
|
|
{order.items.join(', ')}
|
|
</p>
|
|
<p class="text-gray-600">
|
|
<strong>Total:</strong> ${order.total.toFixed(2)}
|
|
</p>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Settings -->
|
|
<div class="space-y-8">
|
|
<!-- Account Settings -->
|
|
<div>
|
|
<h2 class="mb-6 text-2xl font-bold text-gray-900">Account Settings</h2>
|
|
<Card class="p-6">
|
|
{#if isEditing}
|
|
<form on:submit|preventDefault={updateProfile} class="space-y-4">
|
|
<Input label="Name" bind:value={name} required />
|
|
<Input label="Email" type="email" bind:value={email} required />
|
|
<Textarea label="Address" bind:value={address} required />
|
|
<div class="flex justify-end space-x-4">
|
|
<Button color="red" on:click={() => (isEditing = false)}>Cancel</Button>
|
|
<Button type="submit">Save</Button>
|
|
</div>
|
|
</form>
|
|
{:else}
|
|
<div class="space-y-4">
|
|
<p class="text-gray-600"><strong>Name:</strong> {user.name}</p>
|
|
<p class="text-gray-600"><strong>Email:</strong> {user.email}</p>
|
|
<p class="text-gray-600"><strong>Address:</strong> {user.address}</p>
|
|
<Button on:click={() => (isEditing = true)}>
|
|
<PenOutline class="mr-2 h-5 w-5" />
|
|
Edit Profile
|
|
</Button>
|
|
</div>
|
|
{/if}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|