71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
import { LastRefresh } from './LastRefresh'
|
|
import Image from 'next/image'
|
|
|
|
export function Navbar({ lastUpdateTime }) {
|
|
const handleExport = async (timeRange) => {
|
|
try {
|
|
const response = await fetch(`/api/export-report?timeRange=${timeRange}`)
|
|
const blob = await response.blob()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `solar-report-${timeRange}-${new Date().toISOString().split('T')[0]}.pdf`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
window.URL.revokeObjectURL(url)
|
|
document.body.removeChild(a)
|
|
} catch (error) {
|
|
console.error('Error exporting report:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<nav className="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700">
|
|
<div className="max-w-[1400px] mx-auto px-4 sm:px-6 py-4">
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<Image
|
|
src="/UTM_Logo.png"
|
|
alt="UTM Logo"
|
|
height={40}
|
|
width={200}
|
|
quality={100}
|
|
priority
|
|
className="w-auto h-10"
|
|
/>
|
|
<h1 className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-400 bg-clip-text text-transparent animate-gradient">
|
|
UTM Solar Panels
|
|
</h1>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleExport('today')}
|
|
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white transition-all duration-200 hover:shadow-lg hover:shadow-gray-500/10"
|
|
>
|
|
Export Today
|
|
</button>
|
|
<button
|
|
onClick={() => handleExport('week')}
|
|
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white transition-all duration-200 hover:shadow-lg hover:shadow-gray-500/10"
|
|
>
|
|
Export Week
|
|
</button>
|
|
<button
|
|
onClick={() => handleExport('month')}
|
|
className="px-3 py-1.5 text-sm font-medium rounded-lg bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white transition-all duration-200 hover:shadow-lg hover:shadow-gray-500/10"
|
|
>
|
|
Export Month
|
|
</button>
|
|
</div>
|
|
{lastUpdateTime && (
|
|
<div className="flex items-center gap-2 text-gray-400">
|
|
<LastRefresh timestamp={lastUpdateTime} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|