From 4b249ea2abad6960e15c1d543d4e798d92039e7d Mon Sep 17 00:00:00 2001
From: benkortbi <abdelhak.benkortbi@etu.univ-amu.fr>
Date: Mon, 10 Mar 2025 15:37:05 +0100
Subject: [PATCH] Footer & css
---
src/App.jsx | 4 ++-
src/components/Footer.jsx | 46 ++++++++++++++++++++++++++
src/components/dashboard/TaskStats.jsx | 2 +-
src/pages/Home.jsx | 31 ++++++++---------
4 files changed, 64 insertions(+), 19 deletions(-)
create mode 100644 src/components/Footer.jsx
diff --git a/src/App.jsx b/src/App.jsx
index 3835c81..f750cfb 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,6 +7,7 @@ import Todolist from "@pages/Todolist";
import { TasksProvider } from "@context/TasksContext";
import { ThemeProvider } from "@context/ThemeContext";
import Navbar from "@components/Navbar.jsx";
+import Footer from "@components/Footer.jsx";
function App() {
return (
@@ -15,7 +16,7 @@ function App() {
<Router>
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
<Navbar />
- <main className="pt-4">
+ <main className="flex-grow pt-4">
<Routes>
<Route path="/signin" element={<SignIn />} />
<Route path="/signup" element={<SignUp />} />
@@ -23,6 +24,7 @@ function App() {
<Route path="/todolist" element={<Todolist />} />
</Routes>
</main>
+ <Footer />
</div>
</Router>
</TasksProvider>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..4fde7a7
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { Heart } from "lucide-react";
+
+const Footer = () => {
+ const currentYear = new Date().getFullYear();
+ const teamMembers = [
+ "Abdelhak BENKORTBI",
+ "Amine ZAIME",
+ "Anas OUKASSOU",
+ "Kevin MALDONADO"
+
+ ];
+
+ return (
+ <footer className="bg-white border-t border-gray-100">
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+ <div className="flex flex-col items-center space-y-4">
+ {/* Team members */}
+ <div className="flex flex-wrap justify-center gap-2">
+ {teamMembers.map((member, index) => (
+ <React.Fragment key={member}>
+ <span className="text-gray-600 font-medium">{member}</span>
+ {index < teamMembers.length - 1 && (
+ <span className="text-gray-400">•</span>
+ )}
+ </React.Fragment>
+ ))}
+ </div>
+
+ {/* Copyright and signature */}
+ <div className="flex items-center gap-2 text-sm text-gray-500">
+ <span>© {currentYear} TaskMaster</span>
+ <span className="text-gray-400">|</span>
+ <div className="flex items-center gap-1">
+ <span>Made with</span>
+ <Heart size={14} className="text-red-500 fill-current" />
+ <span>by the team</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </footer>
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/components/dashboard/TaskStats.jsx b/src/components/dashboard/TaskStats.jsx
index 52f284d..f334de7 100644
--- a/src/components/dashboard/TaskStats.jsx
+++ b/src/components/dashboard/TaskStats.jsx
@@ -10,7 +10,7 @@ const TaskStats = () => {
const total = tasks.length;
return (
- <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<TaskCard title="Completed Tasks" count={completed} />
<TaskCard title="Incompleted Tasks" count={incompleted} />
<TaskCard title="Total Tasks" count={total} />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 8449f36..465731f 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -21,23 +21,22 @@ const Home = () => {
name: "",
isCompleted: false,
dueDate: ""
- }
- }
+ };
+ };
+
- // Fonction pour ajouter une nouvelle tâche
const saveTask = (task) => {
const newTask = {
...task,
- dueDate: task.dueDate || selectedDate.toISOString().split("T")[0], // Ajouter une dueDate par défaut
+ dueDate: task.dueDate || selectedDate.toISOString().split("T")[0],
};
setTasks([...tasks, newTask]);
};
- // Filtrer les tâches en fonction de leur dueDate
const filteredTasks = tasks.filter(task => {
- if (!task.dueDate) return false; // Vérifie si une tâche a bien une date
- const taskDate = new Date(task.dueDate); // Convertir en objet Date
- return taskDate.toDateString() === selectedDate.toDateString(); // Comparer avec la date sélectionnée
+ if (!task.dueDate) return false;
+ const taskDate = new Date(task.dueDate);
+ return taskDate.toDateString() === selectedDate.toDateString();
});
return (
@@ -46,10 +45,10 @@ const Home = () => {
<TaskStats />
</div>
<div className="min-h-screen bg-gray-100 dark:bg-gray-800 p-8">
- <div className="grid grid-cols-2 gap-6">
+ <div className="grid grid-cols-3 grid-rows-2 gap-6 h-full">
- <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+ <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 row-span-2 col-span-2">
<h3 className="text-lg font-semibold mb-4 dark:text-white">
Tasks for {selectedDate.toDateString()}
</h3>
@@ -62,22 +61,20 @@ const Home = () => {
)}
</div>
- <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+ <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
</div>
- <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]"></div>
-
- <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6 min-h-[300px]">
+ <div className="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<TasksStatPercent />
</div>
+
</div>
</div>
-
- <Modal task={newTask()} isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
+ <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask} />
</div>
);
};
-export default Home;
\ No newline at end of file
+export default Home;
--
GitLab