Initial
This commit is contained in:
Imbus
commit
da3e992aa7
8 changed files with 1882 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
18
index.html
Normal file
18
index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
||||
<title>todo-solid</title>
|
||||
</head>
|
||||
|
||||
<body style="margin:0; background-color: black;">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script src="/src/index.tsx" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1703
package-lock.json
generated
Normal file
1703
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
20
package.json
Normal file
20
package.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "todo-solid",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"start": "vite"
|
||||
},
|
||||
"dependencies": {
|
||||
"@suid/material": "*",
|
||||
"@suid/icons-material": "*",
|
||||
"solid-js": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@suid/vite-plugin": "*",
|
||||
"typescript": "^4.8.2",
|
||||
"vite": "*",
|
||||
"vite-plugin-solid": "*"
|
||||
}
|
||||
}
|
||||
86
src/App.tsx
Normal file
86
src/App.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import Button from "@suid/material/Button";
|
||||
import { Box, Container, CssBaseline, FormGroup, Input, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography } from "@suid/material";
|
||||
|
||||
import { createTheme } from "@suid/material";
|
||||
import { ThemeProvider } from "@suid/material";
|
||||
import { Accessor, Signal, createEffect, createSignal, onMount } from "solid-js";
|
||||
import { CheckBox } from "@suid/icons-material";
|
||||
import { Checkbox } from "@suid/material";
|
||||
|
||||
let theme = createTheme({
|
||||
palette: {
|
||||
mode: "dark",
|
||||
},
|
||||
});
|
||||
|
||||
function TodoTable({ todos }: { todos: Accessor<string[]> }) {
|
||||
console.log(todos)
|
||||
return (
|
||||
<TableContainer sx={{ width: "100%", maxWidth: "200px", margin: "0 auto" }} component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell><Typography variant="h6">Done</Typography></TableCell>
|
||||
<TableCell><Typography variant="h6">Todos</Typography></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{todos().map((todo) => (
|
||||
<TableRow sx={{ "&:hover": { backgroundColor: "#FFFFFF20"}}}>
|
||||
<TableCell>
|
||||
<Checkbox />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Typography>{todo}</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [todos, setTodos] = createSignal([]);
|
||||
const [search, setSearch] = createSignal("");
|
||||
|
||||
onMount(() => {
|
||||
const todos = localStorage.getItem("todos")
|
||||
if (todos) setTodos(JSON.parse(todos))
|
||||
console.log(todos)
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
localStorage.setItem("todos", JSON.stringify(todos()))
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<ThemeProvider theme={theme} >
|
||||
<Box sx={{ backgroundColor: "background.default", color: "text.primary", margin: "0", minHeight: "100vh", width: "100%" }}>
|
||||
<Container maxWidth="sm" disableGutters sx={{ p: 4, display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||
<FormGroup row>
|
||||
<TextField label="New Todo" value={search()} variant="outlined" sx={{
|
||||
"& fieldset": {
|
||||
borderTopRightRadius: "0",
|
||||
borderBottomRightRadius: "0",
|
||||
}
|
||||
}} onChange={(e): string => setSearch(e.target.value)} />
|
||||
<Button onClick={(e): void => {
|
||||
if (search() === "") return
|
||||
setTodos(todos().concat(search()))
|
||||
setSearch("")
|
||||
}} disableElevation variant="contained" sx={{
|
||||
borderTopLeftRadius: "0",
|
||||
borderBottomLeftRadius: "0",
|
||||
}}>Add</Button>
|
||||
</FormGroup>
|
||||
</Container>
|
||||
<TodoTable todos={todos} />
|
||||
</Box>
|
||||
</ThemeProvider >
|
||||
</>
|
||||
)
|
||||
}
|
||||
5
src/index.tsx
Normal file
5
src/index.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
import App from "./App";
|
||||
|
||||
render(() => <App />, document.getElementById("root")!);
|
||||
16
tsconfig.json
Normal file
16
tsconfig.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"types": [
|
||||
"vite/client"
|
||||
],
|
||||
"noEmit": true,
|
||||
"isolatedModules": true
|
||||
}
|
||||
}
|
||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { defineConfig } from "vite";
|
||||
import suidPlugin from "@suid/vite-plugin";
|
||||
import solidPlugin from "vite-plugin-solid";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [suidPlugin(), solidPlugin()],
|
||||
build: {
|
||||
target: "esnext",
|
||||
},
|
||||
});
|
||||
Loading…
Reference in a new issue