diff --git a/index.html b/index.html index f7ac4e4..8905cd6 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,21 @@ + + + + + Todo
- + diff --git a/package.json b/package.json index caf6289..e91da9b 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,23 @@ "preview": "vite preview" }, "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@fontsource/roboto": "^5.2.6", + "@mui/icons-material": "^7.1.2", + "@mui/material": "^7.1.2", + "@tailwindcss/postcss": "^4.1.10", + "@tailwindcss/vite": "^4.1.11", + "postcss": "^8.5.5", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss": "^4.1.11", + "typeface-roboto": "^1.1.13", + "zustand": "^5.0.6" }, "devDependencies": { "@eslint/js": "^9.21.0", + "@types/node": "^24.0.7", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", "@vitejs/plugin-react": "^4.3.4", diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..c2ddf74 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; diff --git a/public/plus.png b/public/plus.png new file mode 100644 index 0000000..864f8b4 Binary files /dev/null and b/public/plus.png differ diff --git a/public/trashcan-off.svg b/public/trashcan-off.svg new file mode 100644 index 0000000..2580609 --- /dev/null +++ b/public/trashcan-off.svg @@ -0,0 +1,12 @@ + + + + trashcan-filled + + + + + + + + \ No newline at end of file diff --git a/public/trashcan-on.svg b/public/trashcan-on.svg new file mode 100644 index 0000000..e50d315 --- /dev/null +++ b/public/trashcan-on.svg @@ -0,0 +1,12 @@ + + + + trashcan + + + + + + + + \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..c0b68c6 --- /dev/null +++ b/src/App.css @@ -0,0 +1,19 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; +@import "tailwindcss"; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; +} + +html, +body, +#root { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + background-color: #18181b; /* Tailwind's bg-zinc-900 */ + color: white; +} diff --git a/src/App.jsx b/src/App.jsx index 5427540..2a6e790 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,10 @@ +import "@fontsource/roboto/300.css"; +import "@fontsource/roboto/400.css"; +import "@fontsource/roboto/500.css"; +import "@fontsource/roboto/700.css"; + +import { MainCard } from "./components/MainCard"; + export const App = () => { - return ( -

React Boilerplate

- ) -} + return ; +}; diff --git a/src/components/CompletedTasks.jsx b/src/components/CompletedTasks.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/CurrentTasks.jsx b/src/components/CurrentTasks.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/MainCard.jsx b/src/components/MainCard.jsx new file mode 100644 index 0000000..63936e8 --- /dev/null +++ b/src/components/MainCard.jsx @@ -0,0 +1,37 @@ +import { NewTaskIcon } from "./NewTaskIcon"; +import { TaskCard } from "./TaskCard"; +import { TaskFormWrapper } from "./TaskFormWrapper"; +import { TaskContentStore } from "../stores/TaskContentStore"; + +export const MainCard = () => { + const tasks = TaskContentStore((state) => state.tasks); + const taskCount = tasks.length; + + const today = new Date(); + + // Format: July 2, 2025 + const formattedDate = today.toLocaleDateString(undefined, { + year: "numeric", + month: "long", + day: "numeric", + }); + + // Format: Wednesday + const dayName = today.toLocaleDateString(undefined, { weekday: "long" }); + + return ( +
+
+

{formattedDate}

+

{dayName}

+

+ Amount of tasks: {taskCount} +

+
+
+ +
+ +
+ ); +}; diff --git a/src/components/NewTaskCard.jsx b/src/components/NewTaskCard.jsx new file mode 100644 index 0000000..58beb33 --- /dev/null +++ b/src/components/NewTaskCard.jsx @@ -0,0 +1,35 @@ +import { useState } from "react"; +import { TaskContentStore } from "../stores/TaskContentStore"; +import { UseUIStore } from "../stores/UseUIStore"; +/*falsely flagged as error by vscode */ + +export const NewTaskCard = () => { + const [message, setMessage] = useState(""); + const createTask = TaskContentStore((state) => state.createTask); + const closeForm = UseUIStore((state) => state.closeForm); + + const handleSubmit = (e) => { + e.preventDefault(); + if (!message.trim()) return; // prevent empty tasks + createTask(message); + setMessage(""); + closeForm(); + }; + + return ( +
+