icechen
/
tbeg-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

master
icechen 2022-03-14 04:45:19 +08:00
parent 87b2ccb3cf
commit b0ae509531
4 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="light"> <html lang="en" data-theme="lofi">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

1
package.json
View File

@ -8,6 +8,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@react-spring/web": "^9.4.4",
"@reduxjs/toolkit": "^1.8.0", "@reduxjs/toolkit": "^1.8.0",
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"axios": "^0.26.1", "axios": "^0.26.1",

56
pnpm-lock.yaml
View File

@ -1,6 +1,7 @@
lockfileVersion: 5.3 lockfileVersion: 5.3
specifiers: specifiers:
'@react-spring/web': ^9.4.4
'@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 '@tailwindcss/forms': ^0.5.0
@ -25,6 +26,7 @@ specifiers:
vite: ^2.8.6 vite: ^2.8.6
dependencies: dependencies:
'@react-spring/web': 9.4.4_react-dom@17.0.2+react@17.0.2
'@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2 '@reduxjs/toolkit': 1.8.0_react-redux@7.2.6+react@17.0.2
autoprefixer: 10.4.2_postcss@8.4.8 autoprefixer: 10.4.2_postcss@8.4.8
axios: 0.26.1 axios: 0.26.1
@ -360,6 +362,60 @@ packages:
fastq: 1.13.0 fastq: 1.13.0
dev: false dev: false
/@react-spring/animated/9.4.4_react@17.0.2:
resolution: {integrity: sha512-e9xnuBaUTD+NolKikUmrGWjX8AVCPyj1GcEgjgq9E+0sXKv46UY7cm2EmB6mUDTxWIDVKebARY++xT4nGDraBQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
dependencies:
'@react-spring/shared': 9.4.4_react@17.0.2
'@react-spring/types': 9.4.4
react: 17.0.2
dev: false
/@react-spring/core/9.4.4_react@17.0.2:
resolution: {integrity: sha512-llgb0ljFyjMB0JhWsaFHOi9XFT8n1jBMVs1IFY2ipIBerWIRWrgUmIpakLPHTa4c4jwqTaDSwX90s2a0iN7dxQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
dependencies:
'@react-spring/animated': 9.4.4_react@17.0.2
'@react-spring/rafz': 9.4.4
'@react-spring/shared': 9.4.4_react@17.0.2
'@react-spring/types': 9.4.4
react: 17.0.2
dev: false
/@react-spring/rafz/9.4.4:
resolution: {integrity: sha512-5ki/sQ06Mdf8AuFstSt5zbNNicRT4LZogiJttDAww1ozhuvemafNWEHxhzcULgCPCDu2s7HsroaISV7+GQWrhw==}
dev: false
/@react-spring/shared/9.4.4_react@17.0.2:
resolution: {integrity: sha512-ySVgScDZlhm/+Iy2smY9i/DDrShArY0j6zjTS/Re1lasKnhq8qigoGiAxe8xMPJNlCaj3uczCqHy3TY9bKRtfQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
dependencies:
'@react-spring/rafz': 9.4.4
'@react-spring/types': 9.4.4
react: 17.0.2
dev: false
/@react-spring/types/9.4.4:
resolution: {integrity: sha512-KpxKt/D//q/t/6FBcde/RE36LKp8PpWu7kFEMLwpzMGl9RpcexunmYOQJWwmJWtkQjgE1YRr7DzBMryz6La1cQ==}
dev: false
/@react-spring/web/9.4.4_react-dom@17.0.2+react@17.0.2:
resolution: {integrity: sha512-iJmOLdhcuizriUlu/xqBc5y8KaFts+UI+iC+GxyTwBtzxA9czKiSAZW2ESuhG8stafa3jncwjfTQQp84KN36cw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
dependencies:
'@react-spring/animated': 9.4.4_react@17.0.2
'@react-spring/core': 9.4.4_react@17.0.2
'@react-spring/shared': 9.4.4_react@17.0.2
'@react-spring/types': 9.4.4
react: 17.0.2
react-dom: 17.0.2_react@17.0.2
dev: false
/@redux-devtools/core/3.11.0_34362ad81a919891909cf289bf01b934: /@redux-devtools/core/3.11.0_34362ad81a919891909cf289bf01b934:
resolution: {integrity: sha512-LE8GF/9pttlIOYJWqOfwbAvYAokRNHCEtCu0DfA11tksYVwIX79CpB2jIJH/KH7n1LzwXPCCl4MOFnyZH4przg==} resolution: {integrity: sha512-LE8GF/9pttlIOYJWqOfwbAvYAokRNHCEtCu0DfA11tksYVwIX79CpB2jIJH/KH7n1LzwXPCCl4MOFnyZH4przg==}
peerDependencies: peerDependencies:

17
src/pages/home/index.tsx
View File

@ -1,4 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { animated, useSpring } from "@react-spring/web";
export default function Home() { export default function Home() {
let [hiddenDrawer, setHiddenDrawer] = useState(true); let [hiddenDrawer, setHiddenDrawer] = useState(true);
@ -70,20 +71,23 @@ function FileButton(props: { openLogin: () => void }) {
} }
function Drawer(props: { hidden: boolean; setHidden: () => void }) { function Drawer(props: { hidden: boolean; setHidden: () => void }) {
return props.hidden ? ( const styles = useSpring({
<></> opacity: !props.hidden ? 1 : 0,
) : ( visibility: !props.hidden ? "visible" : "hidden",
<div className={"absolute right-0 z-0 h-screen w-screen transition-all"}> });
return (
<animated.div style={styles}>
<div className={"absolute right-0 z-0 h-screen w-screen"}>
<div <div
className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"} className={"absolute z-40 h-screen w-screen bg-gray-400 opacity-60"}
onClick={() => { onClick={() => {
console.log("hidden");
props.setHidden(); props.setHidden();
}} }}
></div> ></div>
<div <div
className={ className={
"absolute right-0 z-50 h-screen w-1/3 origin-right animate-fade-in-down bg-base-100" "absolute right-0 z-50 h-screen w-1/3 origin-right bg-base-100"
} }
> >
<div className={"container mt-20 flex items-center justify-center"}> <div className={"container mt-20 flex items-center justify-center"}>
@ -91,6 +95,7 @@ function Drawer(props: { hidden: boolean; setHidden: () => void }) {
</div> </div>
</div> </div>
</div> </div>
</animated.div>
); );
} }