mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 14:55:24 +02:00
Add persistent Undo button to TopBar
This commit is contained in:
@@ -305,6 +305,9 @@ export default function App() {
|
|||||||
hasUnsavedChanges={appState.hasUnsavedChanges}
|
hasUnsavedChanges={appState.hasUnsavedChanges}
|
||||||
userEmail={session.user.email}
|
userEmail={session.user.email}
|
||||||
onSignOut={handleSignOut}
|
onSignOut={handleSignOut}
|
||||||
|
canUndo={!!undoState}
|
||||||
|
onUndo={handleUndo}
|
||||||
|
undoMessage={undoState?.message}
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-1 overflow-hidden">
|
<div className="flex flex-1 overflow-hidden">
|
||||||
<Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
|
<Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Download, Database, LogOut } from 'lucide-react';
|
import { Download, Database, LogOut, Undo2 } from 'lucide-react';
|
||||||
|
|
||||||
interface TopBarProps {
|
interface TopBarProps {
|
||||||
stats: any;
|
stats: any;
|
||||||
@@ -8,9 +8,12 @@ interface TopBarProps {
|
|||||||
hasUnsavedChanges: boolean;
|
hasUnsavedChanges: boolean;
|
||||||
userEmail?: string;
|
userEmail?: string;
|
||||||
onSignOut?: () => void;
|
onSignOut?: () => void;
|
||||||
|
canUndo: boolean;
|
||||||
|
onUndo: () => void;
|
||||||
|
undoMessage?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut }: TopBarProps) {
|
export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut, canUndo, onUndo, undoMessage }: TopBarProps) {
|
||||||
return (
|
return (
|
||||||
<header className="bg-[#020812] border-b border-slate-700/30 h-32 flex items-center justify-between px-10 shrink-0 z-10 shadow-2xl">
|
<header className="bg-[#020812] border-b border-slate-700/30 h-32 flex items-center justify-between px-10 shrink-0 z-10 shadow-2xl">
|
||||||
<div className="flex items-center -ml-4">
|
<div className="flex items-center -ml-4">
|
||||||
@@ -65,6 +68,18 @@ export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail,
|
|||||||
{hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
|
{hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{canUndo && (
|
||||||
|
<button
|
||||||
|
onClick={onUndo}
|
||||||
|
title={`Undo: ${undoMessage}`}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md text-sm font-bold transition-all shadow-lg shadow-amber-900/40 animate-in fade-in zoom-in duration-300"
|
||||||
|
>
|
||||||
|
<Undo2 className="w-4 h-4" />
|
||||||
|
BACK / UNDO
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
{userEmail && (
|
{userEmail && (
|
||||||
<div className="flex items-center gap-2 border-l border-slate-700 pl-3">
|
<div className="flex items-center gap-2 border-l border-slate-700 pl-3">
|
||||||
<span className="text-xs text-slate-400">{userEmail}</span>
|
<span className="text-xs text-slate-400">{userEmail}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user