From 83f2cdc2a96e19d95eed958365ebb4fa618845dc Mon Sep 17 00:00:00 2001 From: Oscar Liljefors Date: Sun, 29 Jun 2025 19:53:49 +0200 Subject: [PATCH 1/7] skeleton --- index.html | 16 ++++++++++++---- package.json | 12 +++++++++++- postcss.config.mjs | 5 +++++ src/App.css | 9 +++++++++ src/components/Card.jsx | 0 src/index.css | 3 --- src/main.jsx | 19 ++++++++++++------- src/stores/AppContentStore.jsx | 4 ++++ todo.txt | 0 vite.config.js | 9 +++++---- 10 files changed, 58 insertions(+), 19 deletions(-) create mode 100644 postcss.config.mjs create mode 100644 src/App.css create mode 100644 src/components/Card.jsx delete mode 100644 src/index.css create mode 100644 src/stores/AppContentStore.jsx create mode 100644 todo.txt 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..b7d4aaf 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,21 @@ "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", + "postcss": "^8.5.5", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwindcss": "^4.1.10", + "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/src/App.css b/src/App.css new file mode 100644 index 0000000..3e0eb4c --- /dev/null +++ b/src/App.css @@ -0,0 +1,9 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +import '@fontsource/roboto/500.css'; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; +} diff --git a/src/components/Card.jsx b/src/components/Card.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/index.css b/src/index.css deleted file mode 100644 index f7c0aef..0000000 --- a/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; -} diff --git a/src/main.jsx b/src/main.jsx index 1b8ffe9..73b3626 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,12 +1,17 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' +import React from "react"; +import ReactDOM from "react-dom/client"; +import { StyledEngineProvider } from "@mui/material/styles"; +import GlobalStyles from "@mui/material/GlobalStyles"; -import { App } from './App.jsx' +import { App } from "./App.jsx"; -import './index.css' +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - + + + + -) +); diff --git a/src/stores/AppContentStore.jsx b/src/stores/AppContentStore.jsx new file mode 100644 index 0000000..a2c519b --- /dev/null +++ b/src/stores/AppContentStore.jsx @@ -0,0 +1,4 @@ +import { create } from "zustand"; + +//object +export const AppContentStore = create(() => {}); diff --git a/todo.txt b/todo.txt new file mode 100644 index 0000000..e69de29 diff --git a/vite.config.js b/vite.config.js index ba24244..13181e4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,8 @@ -import react from '@vitejs/plugin-react' -import { defineConfig } from 'vite' +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; +import tailwindcss from "@tailwindcss/vite"; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] -}) + plugins: [react(), tailwindcss()], +}); From 0b82624ccc6fe3fca6385c9b3406485f0e4c879b Mon Sep 17 00:00:00 2001 From: Oscar Liljefors Date: Sun, 29 Jun 2025 21:30:07 +0200 Subject: [PATCH 2/7] start --- package.json | 4 +++- src/App.css | 2 -- src/App.jsx | 13 +++++++++---- src/components/Card.jsx | 16 ++++++++++++++++ src/components/NewTaskCard.jsx | 0 src/components/NewTaskIcon.jsx | 0 src/main.jsx | 2 +- src/stores/AppContentStore.jsx | 4 ---- src/stores/TaskContentStore.jsx | 6 ++++++ todo.txt | 4 ++++ 10 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 src/components/NewTaskCard.jsx create mode 100644 src/components/NewTaskIcon.jsx delete mode 100644 src/stores/AppContentStore.jsx create mode 100644 src/stores/TaskContentStore.jsx diff --git a/package.json b/package.json index b7d4aaf..e91da9b 100644 --- a/package.json +++ b/package.json @@ -16,10 +16,12 @@ "@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", - "tailwindcss": "^4.1.10", + "tailwindcss": "^4.1.11", + "typeface-roboto": "^1.1.13", "zustand": "^5.0.6" }, "devDependencies": { diff --git a/src/App.css b/src/App.css index 3e0eb4c..9b3c938 100644 --- a/src/App.css +++ b/src/App.css @@ -2,8 +2,6 @@ @tailwind components; @tailwind utilities; -import '@fontsource/roboto/500.css'; - :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; } diff --git a/src/App.jsx b/src/App.jsx index 5427540..5cc65d7 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 { Card } from "./components/Card"; + export const App = () => { - return ( -

React Boilerplate

- ) -} + return ; +}; diff --git a/src/components/Card.jsx b/src/components/Card.jsx index e69de29..7741c16 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -0,0 +1,16 @@ +export const Card = () => { + return ( + <> +
+

date

+

day

+

Todo

+
+ + + + + + + ); +}; diff --git a/src/components/NewTaskCard.jsx b/src/components/NewTaskCard.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/NewTaskIcon.jsx b/src/components/NewTaskIcon.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/main.jsx b/src/main.jsx index 73b3626..4cc66f2 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,7 +5,7 @@ import GlobalStyles from "@mui/material/GlobalStyles"; import { App } from "./App.jsx"; -import "./index.css"; +import "./App.css"; ReactDOM.createRoot(document.getElementById("root")).render( diff --git a/src/stores/AppContentStore.jsx b/src/stores/AppContentStore.jsx deleted file mode 100644 index a2c519b..0000000 --- a/src/stores/AppContentStore.jsx +++ /dev/null @@ -1,4 +0,0 @@ -import { create } from "zustand"; - -//object -export const AppContentStore = create(() => {}); diff --git a/src/stores/TaskContentStore.jsx b/src/stores/TaskContentStore.jsx new file mode 100644 index 0000000..f423984 --- /dev/null +++ b/src/stores/TaskContentStore.jsx @@ -0,0 +1,6 @@ +import { create } from "zustand"; + +//object +export const TaskContentStore = create((set) => { + task: []; +}); diff --git a/todo.txt b/todo.txt index e69de29..21143c3 100644 --- a/todo.txt +++ b/todo.txt @@ -0,0 +1,4 @@ +full site view - white and black +implement local storage +all - completed - uncompleted +date and date-stamp on card \ No newline at end of file From 6a55523897d6013fd01114a14defd30037a9e28e Mon Sep 17 00:00:00 2001 From: Oscar Liljefors Date: Wed, 2 Jul 2025 21:04:24 +0200 Subject: [PATCH 3/7] update --- public/plus.png | Bin 0 -> 5127 bytes public/trashcan-off.svg | 12 +++++++++++ public/trashcan-on.svg | 12 +++++++++++ src/App.css | 1 + src/App.jsx | 4 ++-- src/components/Card.jsx | 16 --------------- src/components/CompletedTasks.jsx | 0 src/components/CurrentTasks.jsx | 0 src/components/MainCard.jsx | 13 ++++++++++++ src/components/TaskCard.jsx | 32 ++++++++++++++++++++++++++++++ src/components/TaskList.jsx | 9 +++++++++ src/main.jsx | 7 +------ src/stores/TaskContentStore.js | 12 +++++++++++ src/stores/TaskContentStore.jsx | 6 ------ 14 files changed, 94 insertions(+), 30 deletions(-) create mode 100644 public/plus.png create mode 100644 public/trashcan-off.svg create mode 100644 public/trashcan-on.svg delete mode 100644 src/components/Card.jsx create mode 100644 src/components/CompletedTasks.jsx create mode 100644 src/components/CurrentTasks.jsx create mode 100644 src/components/MainCard.jsx create mode 100644 src/components/TaskCard.jsx create mode 100644 src/components/TaskList.jsx create mode 100644 src/stores/TaskContentStore.js delete mode 100644 src/stores/TaskContentStore.jsx diff --git a/public/plus.png b/public/plus.png new file mode 100644 index 0000000000000000000000000000000000000000..864f8b457356713039e649612f5b08e8522c280c GIT binary patch literal 5127 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 literal 0 HcmV?d00001 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 index 9b3c938..2fb5e74 100644 --- a/src/App.css +++ b/src/App.css @@ -4,4 +4,5 @@ :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + color: black; } diff --git a/src/App.jsx b/src/App.jsx index 5cc65d7..2a6e790 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,8 +3,8 @@ import "@fontsource/roboto/400.css"; import "@fontsource/roboto/500.css"; import "@fontsource/roboto/700.css"; -import { Card } from "./components/Card"; +import { MainCard } from "./components/MainCard"; export const App = () => { - return ; + return ; }; diff --git a/src/components/Card.jsx b/src/components/Card.jsx deleted file mode 100644 index 7741c16..0000000 --- a/src/components/Card.jsx +++ /dev/null @@ -1,16 +0,0 @@ -export const Card = () => { - return ( - <> -
-

date

-

day

-

Todo

-
- - - - - - - ); -}; 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..747dec2 --- /dev/null +++ b/src/components/MainCard.jsx @@ -0,0 +1,13 @@ +import { TaskCard } from "./TaskCard"; + +export const MainCard = () => { + return ( + <> +
+

date

+

day

+
+ + + ); +}; diff --git a/src/components/TaskCard.jsx b/src/components/TaskCard.jsx new file mode 100644 index 0000000..9d5708f --- /dev/null +++ b/src/components/TaskCard.jsx @@ -0,0 +1,32 @@ +import { TaskContentStore } from "../stores/TaskContentStore"; +import { TaskList } from "./TaskList"; + +export const TaskCard = () => { + const Tasks = TaskContentStore((state) => state.tasks); + + if (Tasks.length === 0) { + return ( + <> +
+

Todo

+
+
+

you have nothing to do!

+
+ + ); + } else { + return ( + <> +
+

Todo

+
+
+ {Tasks.map((task) => { + ; + })} +
+ + ); + } +}; diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx new file mode 100644 index 0000000..f15270d --- /dev/null +++ b/src/components/TaskList.jsx @@ -0,0 +1,9 @@ +export const TaskList = () => { + return ( +
+ +

title

+

date and time

+
+ ); +}; diff --git a/src/main.jsx b/src/main.jsx index 4cc66f2..9489ab2 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,7 +1,5 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import { StyledEngineProvider } from "@mui/material/styles"; -import GlobalStyles from "@mui/material/GlobalStyles"; import { App } from "./App.jsx"; @@ -9,9 +7,6 @@ import "./App.css"; ReactDOM.createRoot(document.getElementById("root")).render( - - - - + ); diff --git a/src/stores/TaskContentStore.js b/src/stores/TaskContentStore.js new file mode 100644 index 0000000..27843bd --- /dev/null +++ b/src/stores/TaskContentStore.js @@ -0,0 +1,12 @@ +import { create } from "zustand"; + +const InitialState = { + tasks: ["hi"], +}; + +//object +export const TaskContentStore = create((set) => ({ + ...InitialState, +})); + +/*Vite despises the jsx extension together with Zustand */ diff --git a/src/stores/TaskContentStore.jsx b/src/stores/TaskContentStore.jsx deleted file mode 100644 index f423984..0000000 --- a/src/stores/TaskContentStore.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import { create } from "zustand"; - -//object -export const TaskContentStore = create((set) => { - task: []; -}); From dc1a1708fbdac5029f161a7b6a5d1a9555f843ab Mon Sep 17 00:00:00 2001 From: Oscar Liljefors Date: Wed, 2 Jul 2025 21:29:33 +0200 Subject: [PATCH 4/7] heads are flying and i am trying --- src/components/MainCard.jsx | 2 ++ src/components/NewTaskCard.jsx | 24 ++++++++++++++++++++++ src/components/NewTaskIcon.jsx | 7 +++++++ src/components/TaskCard.jsx | 37 ++++++++++------------------------ src/components/TaskList.jsx | 18 ++++++++++++----- src/stores/TaskContentStore.js | 18 ++++++++++++++++- 6 files changed, 74 insertions(+), 32 deletions(-) diff --git a/src/components/MainCard.jsx b/src/components/MainCard.jsx index 747dec2..24968eb 100644 --- a/src/components/MainCard.jsx +++ b/src/components/MainCard.jsx @@ -1,3 +1,4 @@ +import { NewTaskIcon } from "./NewTaskIcon"; import { TaskCard } from "./TaskCard"; export const MainCard = () => { @@ -8,6 +9,7 @@ export const MainCard = () => {

day

+ ); }; diff --git a/src/components/NewTaskCard.jsx b/src/components/NewTaskCard.jsx index e69de29..6ba19f0 100644 --- a/src/components/NewTaskCard.jsx +++ b/src/components/NewTaskCard.jsx @@ -0,0 +1,24 @@ +import { useState } from "react"; +import { TaskContentStore } from "../stores/TaskContentStore"; + +export const NewTaskCard = () => { + const [message, setMessage] = useState(""); + const createTask = TaskContentStore((state) => state.createTask); + + const handleSubmit = (e) => { + e.preventDefault(); + createTask(message); + setMessage(""); + }; + + return ( +
+