-
Task Manager
-
- {/* Task input form */}
-
-
- {/* Filter buttons */}
-
-
-
-
-
+
+
+
+
+ My Tasks
+
+
+ {/* Updated Task input form */}
+
- {/* Task list */}
-
-
-
- ))
- )}
-
-
- {/* Task stats */}
-
-
- {tasks.filter((task) => !task.completed).length} tasks remaining
-
+
+
toggleTask(task.id)}
+ className="h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
+ />
+
+
+ {task.text}
+
+
+ {task.date} • {task.startTime} - {task.endTime}
+
+
+
+
+
+
+
+
+ ))
+ )}
+
+
+ {/* Task stats */}
+
+
+ {tasks.filter((task) => !task.completed).length} tasks remaining
+
+
+
);
};
-export default TaskManager;
\ No newline at end of file
+export default TaskManager;
\ No newline at end of file
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 000000000..15ca742d3
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+ const [darkMode, setDarkMode] = useState(() => {
+ if (typeof window !== 'undefined') {
+ return localStorage.getItem('theme') === 'dark' ||
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+ }
+ return false;
+ });
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+ root.classList.remove(darkMode ? 'light' : 'dark');
+ root.classList.add(darkMode ? 'dark' : 'light');
+ localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+ }, [darkMode]);
+
+ const toggleTheme = () => setDarkMode(!darkMode);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useTheme = () => useContext(ThemeContext);
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 000000000..3d536b7f3
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,18 @@
+/* This is the import from your Step 4 */
+@import "tailwindcss";
+
+/* This is the NEW v4 way to enable class-based dark mode.
+ It REPLACES the old "darkMode: 'class'" in your config file.
+*/
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+/* OPTIONAL BUT RECOMMENDED:
+ You can add default base styles here for your app,
+ so the automatically responds to the theme.
+*/
+@layer base {
+ body {
+ @apply bg-white text-gray-900 transition-colors duration-300 ease-in-out dark:bg-gray-900 dark:text-gray-100;
+ }
+}
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 000000000..b9a1a6dea
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+
+
+ ,
+)
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 000000000..6f7b146fc
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,58 @@
+// Home.jsx
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Home = () => {
+ return (
+
+ {/* Hero Section */}
+
+
+
+ Welcome to Your Task Manager
+
+
+ Organize, track, and manage your tasks efficiently with our powerful task management system.
+
+
+ Go to Tasks
+
+
+
+
+ {/* Features Section */}
+
+
+
+
Easy Task Management
+
Create, organize, and track your tasks with our intuitive interface.
+
+
+
Time Tracking
+
Set start and end times for your tasks to manage your schedule effectively.
+
+
+
Progress Monitoring
+
Track your task completion and monitor your productivity over time.
+
+
+
+
+ {/* Call to Action */}
+
+
Ready to get started?
+
+ Start Managing Tasks
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/pages/Posts.jsx b/src/pages/Posts.jsx
new file mode 100644
index 000000000..4cb1654dc
--- /dev/null
+++ b/src/pages/Posts.jsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { fetchPosts, searchPosts } from '../api/fetchposts';
+
+const Posts = () => {
+ const [posts, setPosts] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [page, setPage] = useState(1);
+ const [totalPages, setTotalPages] = useState(0);
+ const [searchQuery, setSearchQuery] = useState('');
+
+ const loadPosts = async () => {
+ try {
+ setLoading(true);
+ const { data, totalCount } = await fetchPosts(page);
+ setPosts(data);
+ setTotalPages(Math.ceil(totalCount / 10));
+ setError(null);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleSearch = async (e) => {
+ e.preventDefault();
+ if (!searchQuery.trim()) {
+ loadPosts();
+ return;
+ }
+ try {
+ setLoading(true);
+ const results = await searchPosts(searchQuery);
+ setPosts(results);
+ setError(null);
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadPosts();
+ }, [page]);
+
+ return (
+
+
+
+
+
+
+ {loading ? (
+
+ ) : error ? (
+
{error}
+ ) : (
+ <>
+
+ {posts.map((post) => (
+
+
{post.title}
+
{post.body}
+
+ ))}
+
+
+
+
+
+ Page {page} of {totalPages}
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default Posts;
diff --git a/src/pages/Tasks.jsx b/src/pages/Tasks.jsx
new file mode 100644
index 000000000..000e3fc9f
--- /dev/null
+++ b/src/pages/Tasks.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import TaskManager from '../components/TaskManager';
+
+const Tasks = () => {
+ return (
+
+
+
+ );
+};
+
+export default Tasks;
diff --git a/src/uselocalStorage.js b/src/uselocalStorage.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 000000000..5a6fd08be
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react(),
+ tailwindcss()
+ ],
+})