master
icechen 2022-03-11 05:17:18 +08:00
parent a80d8c68d8
commit 4fba4f2b27
4 changed files with 55 additions and 13 deletions

View File

@ -24,6 +24,7 @@
}, },
"devDependencies": { "devDependencies": {
"@redux-devtools/core": "^3.11.0", "@redux-devtools/core": "^3.11.0",
"@tailwindcss/forms": "^0.5.0",
"@types/react": "^17.0.40", "@types/react": "^17.0.40",
"@types/react-dom": "^17.0.13", "@types/react-dom": "^17.0.13",
"@vitejs/plugin-react": "^1.2.0", "@vitejs/plugin-react": "^1.2.0",

View File

@ -3,6 +3,7 @@ lockfileVersion: 5.3
specifiers: specifiers:
'@redux-devtools/core': ^3.11.0 '@redux-devtools/core': ^3.11.0
'@reduxjs/toolkit': ^1.8.0 '@reduxjs/toolkit': ^1.8.0
'@tailwindcss/forms': ^0.5.0
'@types/react': ^17.0.40 '@types/react': ^17.0.40
'@types/react-dom': ^17.0.13 '@types/react-dom': ^17.0.13
'@vitejs/plugin-react': ^1.2.0 '@vitejs/plugin-react': ^1.2.0
@ -39,6 +40,7 @@ dependencies:
devDependencies: devDependencies:
'@redux-devtools/core': 3.11.0_34362ad81a919891909cf289bf01b934 '@redux-devtools/core': 3.11.0_34362ad81a919891909cf289bf01b934
'@tailwindcss/forms': 0.5.0_tailwindcss@3.0.23
'@types/react': 17.0.40 '@types/react': 17.0.40
'@types/react-dom': 17.0.13 '@types/react-dom': 17.0.13
'@vitejs/plugin-react': 1.2.0 '@vitejs/plugin-react': 1.2.0
@ -410,6 +412,15 @@ packages:
picomatch: 2.3.1 picomatch: 2.3.1
dev: true dev: true
/@tailwindcss/forms/0.5.0_tailwindcss@3.0.23:
resolution: {integrity: sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==}
peerDependencies:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
dependencies:
mini-svg-data-uri: 1.4.4
tailwindcss: 3.0.23_autoprefixer@10.4.2
dev: true
/@types/hoist-non-react-statics/3.3.1: /@types/hoist-non-react-statics/3.3.1:
resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==} resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
dependencies: dependencies:
@ -1180,6 +1191,11 @@ packages:
picomatch: 2.3.1 picomatch: 2.3.1
dev: false dev: false
/mini-svg-data-uri/1.4.4:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
dev: true
/minimist/1.2.5: /minimist/1.2.5:
resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==} resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}

View File

@ -1,3 +1,6 @@
module.exports = { module.exports = {
plugins: [require("prettier-plugin-tailwindcss")], printWidth: 80,
plugins: [
require("prettier-plugin-tailwindcss"),
],
}; };

View File

@ -1,24 +1,46 @@
export default function Home() { export default function Home() {
return ( return (
<div> <div className={"grid grid-cols-2 grid-rows-2"}>
<div <Logo />
className={
"m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 text-center"
}
>
LOGO
</div>
<Menu></Menu> <Menu />
</div>
);
}
function Logo() {
return (
<div
className={
"m-4 box-border w-16 cursor-pointer select-none border border-4 border-red-900 bg-white text-center shadow-lg"
}
>
LOGO
</div> </div>
); );
} }
function Menu() { function Menu() {
return ( return (
<div className={"container absolute top-2 right-2 flex gap-2"}> <div
<div></div> className={
<div>/</div> "top-2 right-2 flex origin-center items-center justify-end gap-2 pr-5 align-middle underline underline-offset-2"
}
>
<div className={"cursor-pointer bg-green-300"}></div>
<div className={"cursor-pointer bg-green-300"}>/</div>
<input type="date" className="mt-1 block w-full" />
<select className="form-select px-4 py-3">
<optgroup label={"xxx"}>
<title>xxx</title>
<option></option>
<option></option>
</optgroup>
<optgroup label={"www"}>
<option></option>
<option></option>
</optgroup>
</select>
</div> </div>
); );
} }