78 lines
4.3 KiB
TypeScript
78 lines
4.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Page } from '../types';
|
|
import { supabase } from '../supabaseClient';
|
|
|
|
interface DashboardProps {
|
|
setPage: (page: Page) => void;
|
|
session: any;
|
|
}
|
|
|
|
const Dashboard: React.FC<DashboardProps> = ({ setPage, session }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
setLoading(true);
|
|
const { error } = await supabase.auth.signOut();
|
|
setLoading(false);
|
|
if (error) {
|
|
alert('Error logging out: ' + error.message);
|
|
} else {
|
|
setPage(Page.HOME);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="bg-white dark:bg-slate-900 p-8 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800 mb-8 flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div>
|
|
<h1 className="font-display text-3xl text-slate-900 dark:text-white mb-2">Willkommen zurück!</h1>
|
|
<p className="text-slate-500 dark:text-slate-400">
|
|
Eingeloggt als: <span className="font-medium text-primary">{session?.user?.email}</span>
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
disabled={loading}
|
|
className="px-6 py-3 bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-200 dark:hover:bg-slate-700 transition-all"
|
|
>
|
|
{loading ? 'Logging out...' : 'Abmelden'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{/* Example User Content */}
|
|
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-6">
|
|
<span className="material-symbols-outlined">menu_book</span>
|
|
</div>
|
|
<h3 className="font-display text-xl mb-2">Meine Kurse</h3>
|
|
<p className="text-sm text-slate-500 mb-4">Setze deine Reise fort, wo du aufgehört hast.</p>
|
|
<button className="text-primary font-bold text-sm hover:underline">Zum Kurs</button>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="w-12 h-12 bg-secondary/30 rounded-full flex items-center justify-center text-accent2 mb-6">
|
|
<span className="material-symbols-outlined">favorite</span>
|
|
</div>
|
|
<h3 className="font-display text-xl mb-2">Favoriten</h3>
|
|
<p className="text-sm text-slate-500 mb-4">Deine gespeicherten Artikel und Meditationen.</p>
|
|
<button className="text-primary font-bold text-sm hover:underline">Ansehen</button>
|
|
</div>
|
|
|
|
<div className="p-8 bg-white dark:bg-slate-900 shape-squircle border border-slate-100 dark:border-slate-800 shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="w-12 h-12 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center text-slate-500 mb-6">
|
|
<span className="material-symbols-outlined">settings</span>
|
|
</div>
|
|
<h3 className="font-display text-xl mb-2">Einstellungen</h3>
|
|
<p className="text-sm text-slate-500 mb-4">Verwalte dein Profil und Benachrichtigungen.</p>
|
|
<button className="text-primary font-bold text-sm hover:underline">Bearbeiten</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|