the-grid-cc 1.4.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,27 +0,0 @@
1
- {
2
- "name": "todo-app",
3
- "private": true,
4
- "version": "0.0.0",
5
- "type": "module",
6
- "scripts": {
7
- "dev": "vite",
8
- "build": "vite build",
9
- "lint": "eslint .",
10
- "preview": "vite preview"
11
- },
12
- "dependencies": {
13
- "react": "^19.2.0",
14
- "react-dom": "^19.2.0"
15
- },
16
- "devDependencies": {
17
- "@eslint/js": "^9.39.1",
18
- "@types/react": "^19.2.5",
19
- "@types/react-dom": "^19.2.3",
20
- "@vitejs/plugin-react": "^5.1.1",
21
- "eslint": "^9.39.1",
22
- "eslint-plugin-react-hooks": "^7.0.1",
23
- "eslint-plugin-react-refresh": "^0.4.24",
24
- "globals": "^16.5.0",
25
- "vite": "^7.2.4"
26
- }
27
- }
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -1,125 +0,0 @@
1
- .todo-app {
2
- max-width: 500px;
3
- width: 100%;
4
- }
5
-
6
- h1 {
7
- color: #646cff;
8
- margin-bottom: 1.5rem;
9
- }
10
-
11
- .input-section {
12
- display: flex;
13
- gap: 0.5rem;
14
- margin-bottom: 1rem;
15
- }
16
-
17
- .input-section input {
18
- flex: 1;
19
- padding: 0.75rem 1rem;
20
- font-size: 1rem;
21
- border: 2px solid #333;
22
- border-radius: 8px;
23
- background: #1a1a1a;
24
- color: inherit;
25
- outline: none;
26
- transition: border-color 0.25s;
27
- }
28
-
29
- .input-section input:focus {
30
- border-color: #646cff;
31
- }
32
-
33
- .input-section button {
34
- padding: 0.75rem 1.5rem;
35
- background: #646cff;
36
- color: white;
37
- border: none;
38
- border-radius: 8px;
39
- cursor: pointer;
40
- font-weight: 600;
41
- transition: background 0.25s;
42
- }
43
-
44
- .input-section button:hover {
45
- background: #535bf2;
46
- }
47
-
48
- .counter {
49
- color: #888;
50
- font-size: 0.9rem;
51
- margin-bottom: 1rem;
52
- }
53
-
54
- .todo-list {
55
- list-style: none;
56
- padding: 0;
57
- margin: 0;
58
- }
59
-
60
- .todo-list li {
61
- display: flex;
62
- align-items: center;
63
- gap: 0.75rem;
64
- padding: 0.75rem 1rem;
65
- background: #1a1a1a;
66
- border-radius: 8px;
67
- margin-bottom: 0.5rem;
68
- transition: opacity 0.25s;
69
- }
70
-
71
- .todo-list li.completed {
72
- opacity: 0.6;
73
- }
74
-
75
- .todo-list li.completed .todo-text {
76
- text-decoration: line-through;
77
- color: #666;
78
- }
79
-
80
- .todo-list input[type="checkbox"] {
81
- width: 1.2rem;
82
- height: 1.2rem;
83
- cursor: pointer;
84
- accent-color: #646cff;
85
- }
86
-
87
- .todo-text {
88
- flex: 1;
89
- text-align: left;
90
- word-break: break-word;
91
- }
92
-
93
- .delete-btn {
94
- padding: 0.25rem 0.5rem;
95
- background: transparent;
96
- color: #ff4444;
97
- border: 1px solid #ff4444;
98
- border-radius: 4px;
99
- cursor: pointer;
100
- font-size: 0.8rem;
101
- font-weight: bold;
102
- transition: all 0.25s;
103
- }
104
-
105
- .delete-btn:hover {
106
- background: #ff4444;
107
- color: white;
108
- }
109
-
110
- .empty-message {
111
- color: #666;
112
- font-style: italic;
113
- margin-top: 2rem;
114
- }
115
-
116
- @media (prefers-color-scheme: light) {
117
- .input-section input {
118
- background: #f9f9f9;
119
- border-color: #ddd;
120
- }
121
-
122
- .todo-list li {
123
- background: #f5f5f5;
124
- }
125
- }
@@ -1,84 +0,0 @@
1
- import { useState } from 'react'
2
- import './App.css'
3
-
4
- function App() {
5
- const [todos, setTodos] = useState([])
6
- const [inputValue, setInputValue] = useState('')
7
-
8
- const addTodo = () => {
9
- if (inputValue.trim() === '') return
10
- const newTodo = {
11
- id: Date.now(),
12
- text: inputValue.trim(),
13
- completed: false
14
- }
15
- setTodos([...todos, newTodo])
16
- setInputValue('')
17
- }
18
-
19
- const toggleTodo = (id) => {
20
- setTodos(todos.map(todo =>
21
- todo.id === id ? { ...todo, completed: !todo.completed } : todo
22
- ))
23
- }
24
-
25
- const deleteTodo = (id) => {
26
- setTodos(todos.filter(todo => todo.id !== id))
27
- }
28
-
29
- const handleKeyPress = (e) => {
30
- if (e.key === 'Enter') {
31
- addTodo()
32
- }
33
- }
34
-
35
- const completedCount = todos.filter(todo => todo.completed).length
36
-
37
- return (
38
- <div className="todo-app">
39
- <h1>Todo App</h1>
40
-
41
- <div className="input-section">
42
- <input
43
- type="text"
44
- value={inputValue}
45
- onChange={(e) => setInputValue(e.target.value)}
46
- onKeyPress={handleKeyPress}
47
- placeholder="Add a new todo..."
48
- />
49
- <button onClick={addTodo}>Add</button>
50
- </div>
51
-
52
- {todos.length > 0 && (
53
- <p className="counter">
54
- {completedCount} of {todos.length} completed
55
- </p>
56
- )}
57
-
58
- <ul className="todo-list">
59
- {todos.map(todo => (
60
- <li key={todo.id} className={todo.completed ? 'completed' : ''}>
61
- <input
62
- type="checkbox"
63
- checked={todo.completed}
64
- onChange={() => toggleTodo(todo.id)}
65
- />
66
- <span className="todo-text">{todo.text}</span>
67
- <button
68
- className="delete-btn"
69
- onClick={() => deleteTodo(todo.id)}
70
- >
71
- X
72
- </button>
73
- </li>
74
- ))}
75
- </ul>
76
-
77
- {todos.length === 0 && (
78
- <p className="empty-message">No todos yet. Add one above!</p>
79
- )}
80
- </div>
81
- )
82
- }
83
-
84
- export default App
@@ -1,68 +0,0 @@
1
- :root {
2
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
5
-
6
- color-scheme: light dark;
7
- color: rgba(255, 255, 255, 0.87);
8
- background-color: #242424;
9
-
10
- font-synthesis: none;
11
- text-rendering: optimizeLegibility;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
14
- }
15
-
16
- a {
17
- font-weight: 500;
18
- color: #646cff;
19
- text-decoration: inherit;
20
- }
21
- a:hover {
22
- color: #535bf2;
23
- }
24
-
25
- body {
26
- margin: 0;
27
- display: flex;
28
- place-items: center;
29
- min-width: 320px;
30
- min-height: 100vh;
31
- }
32
-
33
- h1 {
34
- font-size: 3.2em;
35
- line-height: 1.1;
36
- }
37
-
38
- button {
39
- border-radius: 8px;
40
- border: 1px solid transparent;
41
- padding: 0.6em 1.2em;
42
- font-size: 1em;
43
- font-weight: 500;
44
- font-family: inherit;
45
- background-color: #1a1a1a;
46
- cursor: pointer;
47
- transition: border-color 0.25s;
48
- }
49
- button:hover {
50
- border-color: #646cff;
51
- }
52
- button:focus,
53
- button:focus-visible {
54
- outline: 4px auto -webkit-focus-ring-color;
55
- }
56
-
57
- @media (prefers-color-scheme: light) {
58
- :root {
59
- color: #213547;
60
- background-color: #ffffff;
61
- }
62
- a:hover {
63
- color: #747bff;
64
- }
65
- button {
66
- background-color: #f9f9f9;
67
- }
68
- }
@@ -1,10 +0,0 @@
1
- import { StrictMode } from 'react'
2
- import { createRoot } from 'react-dom/client'
3
- import './index.css'
4
- import App from './App.jsx'
5
-
6
- createRoot(document.getElementById('root')).render(
7
- <StrictMode>
8
- <App />
9
- </StrictMode>,
10
- )
@@ -1,7 +0,0 @@
1
- import { defineConfig } from 'vite'
2
- import react from '@vitejs/plugin-react'
3
-
4
- // https://vite.dev/config/
5
- export default defineConfig({
6
- plugins: [react()],
7
- })