fegger
08794eae05
Adds a comprehensive `BRAND_GUIDELINES.md` file detailing brand assets, color palettes, and typography. This commit also introduces multiple SVG assets for various logo usages (icon, horizontal, dark mode), updates the main `layout.tsx` metadata, and adds the necessary component files (`LogoIcon.tsx`, `LogoHorizontal.tsx`, etc.) to support these new assets.
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState } from "react";
|
||
import Button from "@/app/ui/Button";
|
||
import AddEventModal from "@/app/add-event/AddEventModal";
|
||
import ReminderSettingsPanel from "@/app/ui/ReminderSettingsPanel";
|
||
import { useServerHealth } from "@/hooks/useServerHealth";
|
||
import { useEventsStore } from "@/hooks/useEventsStore";
|
||
import { useTheme } from "@/hooks/useTheme";
|
||
import Link from "next/link";
|
||
import LogoHorizontal from "@/app/ui/LogoHorizontal";
|
||
|
||
type HeaderProps = {
|
||
className?: string;
|
||
};
|
||
|
||
const Header: React.FC<HeaderProps> = ({ className = "" }) => {
|
||
const [showAddEventModal, setShowAddEventModal] = useState(false);
|
||
const [showSettingsModal, setShowSettingsModal] = useState(false);
|
||
const { status } = useServerHealth();
|
||
const { events } = useEventsStore();
|
||
const { dark, toggle } = useTheme();
|
||
|
||
return (
|
||
<header className={`bg-white dark:bg-gray-800 shadow-sm ${className}`}>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex items-center justify-between h-16">
|
||
<div className="flex items-center">
|
||
<Link href="/">
|
||
<LogoHorizontal height={32} />
|
||
</Link>
|
||
</div>
|
||
<div className="flex items-center space-x-4">
|
||
<div className="hidden md:flex items-center text-sm text-gray-600 dark:text-gray-300">
|
||
<span>
|
||
<strong>{events.length}</strong>
|
||
</span>
|
||
<span className="ml-1">events</span>
|
||
{status === true ? (
|
||
<span className="ml-2 text-green-600">Online</span>
|
||
) : status === false ? (
|
||
<span className="ml-2 text-red-600">Offline</span>
|
||
) : null}
|
||
</div>
|
||
<Button variant="secondary" size="sm" onClick={() => setShowAddEventModal(true)}>
|
||
Add Event
|
||
</Button>
|
||
<button
|
||
onClick={toggle}
|
||
aria-label="Toggle dark mode"
|
||
className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
>
|
||
{dark ? "☀️" : "🌙"}
|
||
</button>
|
||
<button
|
||
onClick={() => setShowSettingsModal(true)}
|
||
aria-label="Settings"
|
||
className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
>
|
||
⚙️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AddEventModal isOpen={showAddEventModal} onClose={() => setShowAddEventModal(false)} />
|
||
{showSettingsModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm relative">
|
||
<button
|
||
onClick={() => setShowSettingsModal(false)}
|
||
className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg"
|
||
aria-label="Close settings"
|
||
>
|
||
✕
|
||
</button>
|
||
<h2 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Settings</h2>
|
||
<ReminderSettingsPanel />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</header>
|
||
);
|
||
};
|
||
|
||
export default Header;
|