Uzupełnienie sekcji footer, zamiana na przyciski i dodanie treści

Author: gmaxsoft

src/components/contact/Contact.tsx

@@ -0,0 +1,42 @@
+export default function Contact() {
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold text-gray-800 mb-6">Kontakt</h1>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">Skontaktuj się z nami</h2>
+        <div className="prose prose-gray max-w-none">
+          <p>
+            Jeśli masz pytania, sugestie lub potrzebujesz pomocy technicznej, skontaktuj się z nami.
+          </p>
+
+          <div className="mt-6 space-y-4">
+            <div>
+              <h3 className="text-lg font-medium text-gray-800">Email</h3>
+              <p className="text-gray-700">biuro@maxsoft.pl</p>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-medium text-gray-800">Telefon</h3>
+              <p className="text-gray-700">+48791821908</p>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-medium text-gray-800">Godziny pracy</h3>
+              <p className="text-gray-700">
+                Poniedziałek - Piątek: 9:00 - 17:00<br />
+                Sobota - Niedziela: Zamknięte
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-8 p-4 bg-blue-50 rounded-lg">
+            <p className="text-blue-800">
+              <strong>Uwaga:</strong> W przypadku problemów technicznych, prosimy o podanie szczegółowego opisu problemu oraz informacji o używanym systemie operacyjnym i przeglądarce.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/help/Help.tsx

@@ -0,0 +1,36 @@
+export default function Help() {
+  return (
+    <div className="p-6">
+      <h1 className="text-3xl font-bold text-gray-800 mb-6">Pomoc</h1>
+
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">Jak korzystać z aplikacji</h2>
+        <div className="prose prose-gray max-w-none">
+          <p>
+            Witaj w aplikacji Task Manager! Poniżej znajdziesz podstawowe informacje na temat korzystania z systemu.
+          </p>
+
+          <h3 className="text-lg font-medium text-gray-800 mt-6 mb-2">Zarządzanie zadaniami</h3>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>Przejdź do sekcji "Zadania" w menu nawigacyjnym</li>
+            <li>Użyj przycisku "Dodaj zadanie" aby utworzyć nowe zadanie</li>
+            <li>W tabeli zadań możesz edytować istniejące zadania</li>
+            <li>Zadania są automatycznie przypisywane do aktualnie zalogowanego użytkownika</li>
+          </ul>
+
+          <h3 className="text-lg font-medium text-gray-800 mt-6 mb-2">Zarządzanie użytkownikami (tylko administratorzy)</h3>
+          <ul className="list-disc list-inside space-y-2 text-gray-700">
+            <li>Przejdź do sekcji "Użytkownicy" w menu nawigacyjnym</li>
+            <li>Możesz dodawać nowych użytkowników</li>
+            <li>Możesz edytować role i status aktywności użytkowników</li>
+          </ul>
+
+          <h3 className="text-lg font-medium text-gray-800 mt-6 mb-2">Dashboard</h3>
+          <p className="text-gray-700">
+            Na stronie głównej znajdziesz statystyki swoich zadań oraz listę ostatnio dodanych zadań.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/layout/Content.tsx

@@ -3,6 +3,8 @@ import { useNavigation } from '../../context/NavigationContext';
 import { useTaskStore } from '../../store/taskStore';
 import UsersSettings from '../users/Settings';
 import TasksSettings from '../tasks/Settings';
+import HelpSettings from '../help/Help';
+import ContactSettings from '../contact/Contact';
 
 export default function Content() {
   const { currentView } = useNavigation();
@@ -46,6 +48,22 @@ export default function Content() {
     );
   }
 
+  if (currentView === 'help') {
+    return (
+      <main className="flex-1 overflow-y-auto bg-gray-50">
+        <HelpSettings />
+      </main>
+    );
+  }
+
+  if (currentView === 'contact') {
+    return (
+      <main className="flex-1 overflow-y-auto bg-gray-50">
+        <ContactSettings />
+      </main>
+    );
+  }
+
   return (
     <main className="flex-1 overflow-y-auto bg-gray-50">
       <div className="p-6">

src/components/layout/Footer.tsx

@@ -1,4 +1,7 @@
+import { useNavigation } from '../../context/NavigationContext';
+
 export default function Footer() {
+  const { setCurrentView } = useNavigation();
   return (
     <footer className="bg-white border-t border-gray-200 py-4">
       <div className="px-6">
@@ -7,24 +10,18 @@ export default function Footer() {
             © {new Date().getFullYear()} Menadżer Zadań. Wszelkie prawa zastrzeżone.
           </p>
           <div className="flex items-center space-x-4">
-            <a
-              href="#"
+            <button
+              onClick={() => setCurrentView('help')}
               className="text-sm text-gray-600 hover:text-gray-800 transition-colors"
             >
               Pomoc
-            </a>
-            <a
-              href="#"
+            </button>
+            <button
+              onClick={() => setCurrentView('contact')}
               className="text-sm text-gray-600 hover:text-gray-800 transition-colors"
             >
               Kontakt
-            </a>
-            <a
-              href="#"
-              className="text-sm text-gray-600 hover:text-gray-800 transition-colors"
-            >
-              Dokumentacja
-            </a>
+            </button>
           </div>
         </div>
       </div>

src/context/NavigationContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, type ReactNode } from 'react';
 
-type View = 'dashboard' | 'users' | 'tasks';
+type View = 'dashboard' | 'users' | 'tasks' | 'help' | 'contact';
 
 interface NavigationContextType {
   currentView: View;