added mock api warning

client/.env.development

@@ -1 +1,2 @@
-VITE_SHARELINK_API_BASE_URL=http://localhost:5160
+VITE_SHARELINK_API_BASE_URL=http://localhost:5160
+VITE_MOCK_API=true

client/.env.production

@@ -1 +1,2 @@
-VITE_SHARELINK_API_BASE_URL=https://sharelink-app.azurewebsites.net
+VITE_SHARELINK_API_BASE_URL=https://sharelink-app.azurewebsites.net
+VITE_MOCK_API=true

client/src/App.tsx

@@ -8,6 +8,7 @@ import {useUserStore} from './contexts/AppContext.tsx';
 import {observer} from 'mobx-react-lite';
 import Footer from './components/Footer.tsx';
 import Header from './components/Header.tsx';
+import MockApiWarning from './components/MockApiWarning.tsx';
 
 const App = observer(() => {
     const [section, setSection] = useState<'list' | 'addLink'>('list');
@@ -21,6 +22,7 @@ const App = observer(() => {
         <div className="flex flex-col justify-start min-h-screen">
             <div className="flex-grow">
                 <Toolbar />
+                <MockApiWarning />
 
                 <Layout>
                     <>

client/src/components/MockApiWarning.tsx

@@ -0,0 +1,18 @@
+import {useState} from 'react';
+import Modal from './Modal.tsx';
+
+const MockApiWarning = () => {
+    const [showMockApiWarning, setShowMockApiWarning] = useState(import.meta.env.VITE_MOCK_API === 'true');
+
+    return <>
+        { showMockApiWarning &&
+            <Modal onClose={() => setShowMockApiWarning(false)}>
+                <div className="flex flex-col justify-center items-center">
+                    <h3 className="text-xl font-medium dark:text-white mb-4">Server Offline</h3>
+                    <p className="text-sm text-black dark:text-white mb-4">The server is currently offline to save costs. Displayed data is for example purposes only. For more information, please contact me at a.golub113@gmail.com.</p>
+                </div>
+            </Modal>
+        }</>;
+};
+
+export default MockApiWarning;

client/src/components/Modal.tsx

@@ -13,7 +13,7 @@ const Modal = ({ children, onClose, priority }: ModalProps) => {
 
     return (
         <>
-            <div className="top-0 left-0 w-full h-full fixed overflow-y-auto bg-black opacity-80"></div>
+            <div className="top-0 left-0 w-full h-full fixed overflow-y-auto bg-black opacity-50"></div>
             <FadeDiv className={`fixed top-0 left-0 w-full h-full flex items-center justify-center ${priority === 'primary' ? 'z-50' : 'z-40'}`}>
                 <div ref={modalRef} className="relative w-full max-w-md rounded-lg shadow-2xl bg-white dark-background mx-3 md:mx-0">
                     <Button type="button" onClick={onClose} className="absolute top-3 right-2.5 bg-transparent text-sm items-center dark:text-zinc-400 ml-auto inline-flex justify-center dark:hover:text-zinc-300">