From 5e9607170b252d35e9ea04e76bd5c75ce415f2f4 Mon Sep 17 00:00:00 2001
From: Jithin7777 <133039735+Jithin7777@users.noreply.github.com>
Date: Wed, 12 Mar 2025 12:03:36 +0530
Subject: [PATCH] feature1

---
 src/App.js | 249 +++++++++++------------------------------------------
 1 file changed, 51 insertions(+), 198 deletions(-)

diff --git a/src/App.js b/src/App.js
index e7c05b5..b108ed9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,199 +1,52 @@
-import {
-	Button,
-	Container,
-	Text,
-	Title,
-	Modal,
-	TextInput,
-	Group,
-	Card,
-	ActionIcon,
-	Code,
-} from '@mantine/core';
-import { useState, useRef, useEffect } from 'react';
-import { MoonStars, Sun, Trash } from 'tabler-icons-react';
-
-import {
-	MantineProvider,
-	ColorSchemeProvider,
-	ColorScheme,
-} from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
-import { useHotkeys, useLocalStorage } from '@mantine/hooks';
-
-export default function App() {
-	const [tasks, setTasks] = useState([]);
-	const [opened, setOpened] = useState(false);
-
-	const preferredColorScheme = useColorScheme();
-	const [colorScheme, setColorScheme] = useLocalStorage({
-		key: 'mantine-color-scheme',
-		defaultValue: 'light',
-		getInitialValueInEffect: true,
-	});
-	const toggleColorScheme = value =>
-		setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
-
-	useHotkeys([['mod+J', () => toggleColorScheme()]]);
-
-	const taskTitle = useRef('');
-	const taskSummary = useRef('');
-
-	function createTask() {
-		setTasks([
-			...tasks,
-			{
-				title: taskTitle.current.value,
-				summary: taskSummary.current.value,
-			},
-		]);
-
-		saveTasks([
-			...tasks,
-			{
-				title: taskTitle.current.value,
-				summary: taskSummary.current.value,
-			},
-		]);
-	}
-
-	function deleteTask(index) {
-		var clonedTasks = [...tasks];
-
-		clonedTasks.splice(index, 1);
-
-		setTasks(clonedTasks);
-
-		saveTasks([...clonedTasks]);
-	}
-
-	function loadTasks() {
-		let loadedTasks = localStorage.getItem('tasks');
-
-		let tasks = JSON.parse(loadedTasks);
-
-		if (tasks) {
-			setTasks(tasks);
-		}
-	}
-
-	function saveTasks(tasks) {
-		localStorage.setItem('tasks', JSON.stringify(tasks));
-	}
-
-	useEffect(() => {
-		loadTasks();
-	}, []);
-
-	return (
-		<ColorSchemeProvider
-			colorScheme={colorScheme}
-			toggleColorScheme={toggleColorScheme}>
-			<MantineProvider
-				theme={{ colorScheme, defaultRadius: 'md' }}
-				withGlobalStyles
-				withNormalizeCSS>
-				<div className='App'>
-					<Modal
-						opened={opened}
-						size={'md'}
-						title={'New Task'}
-						withCloseButton={false}
-						onClose={() => {
-							setOpened(false);
-						}}
-						centered>
-						<TextInput
-							mt={'md'}
-							ref={taskTitle}
-							placeholder={'Task Title'}
-							required
-							label={'Title'}
-						/>
-						<TextInput
-							ref={taskSummary}
-							mt={'md'}
-							placeholder={'Task Summary'}
-							label={'Summary'}
-						/>
-						<Group mt={'md'} position={'apart'}>
-							<Button
-								onClick={() => {
-									setOpened(false);
-								}}
-								variant={'subtle'}>
-								Cancel
-							</Button>
-							<Button
-								onClick={() => {
-									createTask();
-									setOpened(false);
-								}}>
-								Create Task
-							</Button>
-						</Group>
-					</Modal>
-					<Container size={550} my={40}>
-						<Group position={'apart'}>
-							<Title
-								sx={theme => ({
-									fontFamily: `Greycliff CF, ${theme.fontFamily}`,
-									fontWeight: 900,
-								})}>
-								My Tasks
-							</Title>
-							<ActionIcon
-								color={'blue'}
-								onClick={() => toggleColorScheme()}
-								size='lg'>
-								{colorScheme === 'dark' ? (
-									<Sun size={16} />
-								) : (
-									<MoonStars size={16} />
-								)}
-							</ActionIcon>
-						</Group>
-						{tasks.length > 0 ? (
-							tasks.map((task, index) => {
-								if (task.title) {
-									return (
-										<Card withBorder key={index} mt={'sm'}>
-											<Group position={'apart'}>
-												<Text weight={'bold'}>{task.title}</Text>
-												<ActionIcon
-													onClick={() => {
-														deleteTask(index);
-													}}
-													color={'red'}
-													variant={'transparent'}>
-													<Trash />
-												</ActionIcon>
-											</Group>
-											<Text color={'dimmed'} size={'md'} mt={'sm'}>
-												{task.summary
-													? task.summary
-													: 'No summary was provided for this task'}
-											</Text>
-										</Card>
-									);
-								}
-							})
-						) : (
-							<Text size={'lg'} mt={'md'} color={'dimmed'}>
-								You have no tasks
-							</Text>
-						)}
-						<Button
-							onClick={() => {
-								setOpened(true);
-							}}
-							fullWidth
-							mt={'md'}>
-							New Task
-						</Button>
-					</Container>
-				</div>
-			</MantineProvider>
-		</ColorSchemeProvider>
-	);
+import React, { useState } from "react";
+
+function App() {
+  // State to manage tasks
+  const [tasks, setTasks] = useState([]);
+  const [newTask, setNewTask] = useState("");
+
+  // Add task function
+  const addTask = () => {
+    if (newTask.trim() === "") return;
+    setTasks([...tasks, newTask]);
+    setNewTask("");
+  };
+
+  // Remove task function
+  const removeTask = (index) => {
+    const updatedTasks = tasks.filter((_, i) => i !== index);
+    setTasks(updatedTasks);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
+      <h1 className="text-2xl font-bold mb-4">To-Do List</h1>
+
+      {/* Input & Add Button */}
+      <div className="flex gap-2">
+        <input
+          type="text"
+          className="border p-2 rounded"
+          placeholder="Enter task..."
+          value={newTask}
+          onChange={(e) => setNewTask(e.target.value)}
+        />
+        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={addTask}>
+          Add Task
+        </button>
+      </div>
+
+      {/* Task List */}
+      <ul className="mt-4 w-64">
+        {tasks.map((task, index) => (
+          <li key={index} className="flex justify-between bg-white p-2 mb-2 shadow rounded">
+            {task}
+            <button className="text-red-500" onClick={() => removeTask(index)}>❌</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
 }
+
+export default App;