diff --git a/index.html b/index.html index 2e6ba4c..7385258 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + - fileset
+ diff --git a/package.json b/package.json index 20af124..0030bfe 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^1.8.0", "autoprefixer": "^10.4.2", "axios": "^0.26.1", + "daisyui": "^2.6.4", "filesize": "^8.0.7", "mtproton": "^6.0.0", "postcss": "^8.4.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9674dc7..1aaab58 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ specifiers: '@vitejs/plugin-react': ^1.2.0 autoprefixer: ^10.4.2 axios: ^0.26.1 + daisyui: ^2.6.4 filesize: ^8.0.7 mtproton: ^6.0.0 postcss: ^8.4.8 @@ -27,6 +28,7 @@ dependencies: '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2 autoprefixer: 10.4.2_postcss@8.4.8 axios: 0.26.1 + daisyui: 2.6.4_554c024960c0d85659bdf1e5e950b7f7 filesize: 8.0.7 mtproton: 6.0.0 postcss: 8.4.8 @@ -639,6 +641,21 @@ packages: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} dev: false + /color-string/1.9.0: + resolution: {integrity: sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==} + dependencies: + color-name: 1.1.4 + simple-swizzle: 0.2.2 + dev: false + + /color/4.2.1: + resolution: {integrity: sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw==} + engines: {node: '>=12.5.0'} + dependencies: + color-convert: 2.0.1 + color-string: 1.9.0 + dev: false + /configstore/5.0.1: resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==} engines: {node: '>=8'} @@ -673,6 +690,13 @@ packages: engines: {node: '>=8'} dev: false + /css-selector-tokenizer/0.8.0: + resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==} + dependencies: + cssesc: 3.0.0 + fastparse: 1.1.2 + dev: false + /cssesc/3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -682,6 +706,22 @@ packages: /csstype/3.0.11: resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==} + /daisyui/2.6.4_554c024960c0d85659bdf1e5e950b7f7: + resolution: {integrity: sha512-3l7WHgpOTdyUBVu2TD6uZH4+IbwaBnPXdoWjjvmzT6hxR5+WUHMl4vvPP+7/VB+CcoxSB296qaYWXQcoWcbISw==} + peerDependencies: + autoprefixer: ^10.0.2 + postcss: ^8.1.6 + dependencies: + autoprefixer: 10.4.2_postcss@8.4.8 + color: 4.2.1 + css-selector-tokenizer: 0.8.0 + postcss: 8.4.8 + postcss-js: 4.0.0_postcss@8.4.8 + tailwindcss: 3.0.23_autoprefixer@10.4.2 + transitivePeerDependencies: + - ts-node + dev: false + /debug/4.3.3: resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==} engines: {node: '>=6.0'} @@ -967,6 +1007,10 @@ packages: micromatch: 4.0.4 dev: false + /fastparse/1.1.2: + resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==} + dev: false + /fastq/1.13.0: resolution: {integrity: sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==} dependencies: @@ -1085,6 +1129,10 @@ packages: resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=} dev: false + /is-arrayish/0.3.2: + resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + dev: false + /is-binary-path/2.1.0: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} @@ -1518,6 +1566,12 @@ packages: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: false + /simple-swizzle/0.2.2: + resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=} + dependencies: + is-arrayish: 0.3.2 + dev: false + /source-map-js/1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} diff --git a/src/index.css b/src/index.css index a530c34..389b913 100644 --- a/src/index.css +++ b/src/index.css @@ -3,5 +3,5 @@ @tailwind utilities; body { - background-color: #eae4de; + letter-spacing: 0.1rem; } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 6bb5767..9dbc441 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,9 +1,25 @@ +import { useState } from "react"; + export default function Home() { + let [hiddenDrawer, setHiddenDrawer] = useState(true); return ( -
+
- + { + setHiddenDrawer(!hiddenDrawer); + }} + /> + +
); } @@ -12,7 +28,7 @@ function Logo() { return (
LOGO @@ -20,27 +36,69 @@ function Logo() { ); } -function Menu() { +function Menu(props: { onClickLogin: () => void }) { return ( -
-
定价
-
注册/登录
- - +
  • + 定价 +
    • +
  • + 注册/登录 +
    • + + ); +} + +function FileButton(props: { openLogin: () => void }) { + return ( +
    + + +
    + ); +} + +function Drawer(props: { hidden: boolean; setHidden: () => void }) { + return props.hidden ? ( + <> + ) : ( +
    +
    { + console.log("hidden"); + props.setHidden(); + }} + >
    +
    +
    + +
    +
    +
    + ); +} + +function LoginContent() { + return ( +
    + +
    ); }