From 24337db7ebffffe8f8bbecf9b5b307d50b44bd1e Mon Sep 17 00:00:00 2001 From: Jemiiah Date: Fri, 22 Nov 2024 15:57:35 +0100 Subject: [PATCH] alert system component --- frontend/src/app/components/Alert.tsx | 30 ++++++++++ frontend/src/app/layout.tsx | 3 + frontend/src/hooks/useAlert.tsx | 80 +++++++++++++++++++++++++++ 3 files changed, 113 insertions(+) create mode 100644 frontend/src/app/components/Alert.tsx create mode 100644 frontend/src/hooks/useAlert.tsx diff --git a/frontend/src/app/components/Alert.tsx b/frontend/src/app/components/Alert.tsx new file mode 100644 index 0000000..e50592f --- /dev/null +++ b/frontend/src/app/components/Alert.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { AlertType } from '../../hooks/useAlert'; +import { useAlert } from '../../hooks/useAlert'; + +const Alert: React.FC = () => { + const { alert } = useAlert(); + + if (!alert.isVisible) return null; + + const alertStyles: Record = { + success: 'bg-green-100 border-green-500 text-green-700', + error: 'bg-red-100 border-red-500 text-red-700', + warning: 'bg-yellow-100 border-yellow-500 text-yellow-700', + info: 'bg-blue-100 border-blue-500 text-blue-700', + }; + + return ( +
+ {alert.title &&

{alert.title}

} +

{alert.message}

+
+ ); +}; + +export default Alert; \ No newline at end of file diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index e0bffe7..26264cd 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -5,6 +5,7 @@ import './globals.css'; import { bowlby_one, poppins, roboto } from './fonts'; import Footer from './components/Footer'; import NavBar from './components/Navbar'; +import Alert from './components/Alert'; const inter = Inter({ subsets: ['latin'] }); @@ -18,6 +19,7 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { + return ( {children} +