- {/* Navbar component will go here */}
-
+
+
+
-
-
-
-
- Edit src/App.jsx and save to test HMR
-
-
-
-
- {count}
-
-
+
+ {/* This renders the current page (Home or Tasks) */}
-
- Implement your TaskManager component here
+ {/* API data placeholder */}
+
+
API Data
+
+ Fetch and display data from an API here
-
- {/* API data display will go here */}
-
-
API Data
-
- Fetch and display data from an API here
-
-
-
+
- {/* Footer component will go here */}
-
-
+ )
}
-export default App;
\ No newline at end of file
+export default App
diff --git a/src/assets/Home.png b/src/assets/Home.png
new file mode 100644
index 000000000..1b2d3d50d
Binary files /dev/null and b/src/assets/Home.png differ
diff --git a/src/assets/Light Mode.png b/src/assets/Light Mode.png
new file mode 100644
index 000000000..ea74aed07
Binary files /dev/null and b/src/assets/Light Mode.png differ
diff --git a/src/assets/Tasks.png b/src/assets/Tasks.png
new file mode 100644
index 000000000..6a3c2c6a4
Binary files /dev/null and b/src/assets/Tasks.png differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/ApiData.jsx b/src/components/ApiData.jsx
new file mode 100644
index 000000000..a4e672550
--- /dev/null
+++ b/src/components/ApiData.jsx
@@ -0,0 +1,117 @@
+// src/components/ApiData.jsx
+import React, { useEffect, useState } from 'react'
+
+const ApiData = () => {
+ const [tasks, setTasks] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [searchTerm, setSearchTerm] = useState('')
+ const [currentPage, setCurrentPage] = useState(1)
+ const tasksPerPage = 2
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch('https://jsonplaceholder.typicode.com/todos')
+ const data = await response.json()
+
+ const simpleTasks = data.slice(0, 5).map((task, index) => ({
+ ...task,
+ title: [
+ 'Buy groceries',
+ 'Clean the room',
+ 'Finish homework',
+ 'Call a friend',
+ 'Water the plants'
+ ][index],
+ }))
+ setTasks(simpleTasks)
+ } catch (err) {
+ setError('Failed to fetch tasks')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ fetchData()
+ }, [])
+
+ if (loading) return
Loading tasks...
+ if (error) return
{error}
+
+ const filteredTasks = tasks.filter(task =>
+ task.title.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+
+ const indexOfLastTask = currentPage * tasksPerPage
+ const indexOfFirstTask = indexOfLastTask - tasksPerPage
+ const currentTasks = filteredTasks.slice(indexOfFirstTask, indexOfLastTask)
+ const totalPages = Math.ceil(filteredTasks.length / tasksPerPage)
+
+ return (
+
+ {/* Search Input */}
+
{
+ setSearchTerm(e.target.value)
+ setCurrentPage(1)
+ }}
+ className="w-full p-2 rounded border dark:bg-gray-600 dark:text-gray-100"
+ />
+
+ {/* Tasks List */}
+ {currentTasks.map(task => (
+
+
{task.title}
+
+ Status:{' '}
+
+ {task.completed ? 'Completed' : 'Pending'}
+
+
+
+ ))}
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
+
+ {[...Array(totalPages)].map((_, i) => (
+
+ ))}
+
+
+
+ )}
+
+ )
+}
+
+export default ApiData
\ No newline at end of file
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 389724dca..322147ba3 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -1,69 +1,26 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+// src/components/Button.jsx
+import React from 'react'
+
+const Button = ({ children, variant = 'primary', onClick }) => {
+ let base = "px-4 py-2 rounded font-semibold transition-colors duration-200"
+ let style = ''
+
+ switch (variant) {
+ case 'secondary':
+ style = "bg-gray-200 text-gray-800 hover:bg-gray-300"
+ break
+ case 'danger':
+ style = "bg-red-500 text-white hover:bg-red-600"
+ break
+ default:
+ style = "bg-blue-600 text-white hover:bg-blue-700"
+ }
-/**
- * Button component with different variants
- * @param {Object} props - Component props
- * @param {string} props.variant - Button variant (primary, secondary, danger)
- * @param {string} props.size - Button size (sm, md, lg)
- * @param {boolean} props.disabled - Whether the button is disabled
- * @param {function} props.onClick - Click handler function
- * @param {React.ReactNode} props.children - Button content
- * @returns {JSX.Element} - Button component
- */
-const Button = ({
- variant = 'primary',
- size = 'md',
- disabled = false,
- onClick,
- children,
- className = '',
- ...rest
-}) => {
- // Base classes
- const baseClasses = 'inline-flex items-center justify-center font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors';
-
- // Variant classes
- const variantClasses = {
- primary: 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
- secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800 focus:ring-gray-500',
- danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
- success: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
- warning: 'bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500',
- };
-
- // Size classes
- const sizeClasses = {
- sm: 'px-2 py-1 text-sm',
- md: 'px-4 py-2',
- lg: 'px-6 py-3 text-lg',
- };
-
- // Disabled classes
- const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
-
- // Combine all classes
- const buttonClasses = `${baseClasses} ${variantClasses[variant] || variantClasses.primary} ${sizeClasses[size] || sizeClasses.md} ${disabledClasses} ${className}`;
-
return (
-