108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Button } from "@/components/ui/button";
|
|
import { LogOut, Menu } from 'lucide-react';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import DashboardContainer from '../dashboard/DashboardContainer';
|
|
import { cn } from '@/lib/utils';
|
|
const Main: React.FC = () => {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [hasActiveEvent, setHasActiveEvent] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
// Check for active events - This will be replaced with actual API call
|
|
useEffect(() => {
|
|
// TODO: Replace with actual API call to check for active events
|
|
const checkActiveEvents = async () => {
|
|
try {
|
|
// const response = await fetch('/api/events/active');
|
|
// const data = await response.json();
|
|
// setHasActiveEvent(data.hasActiveEvent);
|
|
|
|
// For now, we'll set it to false
|
|
setHasActiveEvent(false);
|
|
} catch (error) {
|
|
console.error('Error checking active events:', error);
|
|
}
|
|
};
|
|
|
|
checkActiveEvents();
|
|
}, []);
|
|
|
|
const handleAction = (action: string) => {
|
|
console.log('Selected action:', action);
|
|
// Handle navigation or other actions based on the selected card
|
|
switch (action) {
|
|
case 'event':
|
|
// Navigate to events page or open event form
|
|
break;
|
|
case 'blog':
|
|
// Navigate to blog page or open blog form
|
|
break;
|
|
case 'quick-post':
|
|
// Open quick post dialog
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container flex h-16 items-center justify-between px-4">
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle menu</span>
|
|
</Button>
|
|
<div
|
|
className="flex items-center gap-2 cursor-pointer"
|
|
onClick={() => navigate('/')}
|
|
>
|
|
<img
|
|
src="/Logo.png"
|
|
alt="Logo"
|
|
className="h-10 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<div className="hidden md:block text-sm text-muted-foreground">
|
|
Hallo, {user?.name?.split(' ')[0] || 'Benutzer'}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="gap-1.5 text-sm"
|
|
onClick={logout}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Abmelden</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="container py-6 px-0 md:px-4">
|
|
<div className="mx-auto md:max-w-5xl">
|
|
<DashboardContainer
|
|
onActionClick={handleAction}
|
|
hasActiveEvent={hasActiveEvent}
|
|
/>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Main; |