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