Skip to content
Snippets Groups Projects
Commit 4b249ea2 authored by BENKORTBI Abdelhak's avatar BENKORTBI Abdelhak
Browse files

Footer & css

parent 4cb7c8d3
No related branches found
No related tags found
1 merge request!17Footer & css
......@@ -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>
......
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>&copy; {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
......@@ -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} />
......
......@@ -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,20 +61,18 @@ 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>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment