fuelprices/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added listings

Browse Source
This commit is contained in:
Edwin Eames
2025-12-26 20:01:28 -05:00
parent 06a5ff98d7
commit f08432e417
17 changed files with 2200 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/routes/(app)/+layout.svelte
View File

@@ -3,12 +3,17 @@
import { writable } from "svelte/store";
import type { Writable } from 'svelte/store';
import '../../app.postcss'; // Import Tailwind CSS
import { user } from '$lib/states';
import { user, darkMode, type User } from '$lib/states';
// Define the type for the user store
interface User {
username: string;
}
// Initialize dark mode on mount to ensure data-theme is set
onMount(() => {
const isDark = $darkMode;
if (isDark) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
});
// Placeholder for user store - in a real app, this would be managed by an auth library or context
let storedUser: User | null = null;
@@ -36,14 +41,32 @@
localStorage.removeItem('user');
window.location.href = '/';
};
// Toggle dark mode
const toggleDarkMode = () => {
darkMode.update((value: boolean) => !value);
};
</script>
<div class="min-h-screen bg-white flex flex-col">
<div class="min-h-screen flex flex-col">
<header class="navbar bg-primary text-primary-content shadow-lg">
<div class="flex-1">
<a href="/" class="btn btn-ghost normal-case text-xl">Heating Price Hero</a>
<a href="/" class="btn btn-ghost normal-case text-xl">Biz Hero</a>
</div>
<div class="flex-none">
<div class="flex-none flex items-center gap-2">
<button type="button" class="btn btn-ghost" on:click={toggleDarkMode}>
{#if !$darkMode}
<!-- Moon icon for dark mode -->
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" clip-rule="evenodd" />
</svg>
{:else}
<!-- Sun icon for light mode -->
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
{/if}
</button>
{#if $user}
<div class="dropdown dropdown-end">
<button type="button" class="btn btn-ghost normal-case text-lg">