From 496b7b14922225e2f1299fb61e148b292e3b1278 Mon Sep 17 00:00:00 2001 From: tymur999 Date: Sat, 19 Oct 2024 15:40:56 -0400 Subject: [PATCH] feat: front --- .idea/inspectionProfiles/Project_Default.xml | 6 ++ declarations.d.ts | 3 + package-lock.json | 108 ++++++++++++++++++- package.json | 12 ++- src/app/landing/page.tsx | 31 ++++-- src/app/landing/time.tsx | 26 +++++ src/app/layout.tsx | 1 - 7 files changed, 169 insertions(+), 18 deletions(-) create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 declarations.d.ts create mode 100644 src/app/landing/time.tsx diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/declarations.d.ts b/declarations.d.ts new file mode 100644 index 0000000..0d95b37 --- /dev/null +++ b/declarations.d.ts @@ -0,0 +1,3 @@ +// NOTE: The declaration below was injected by `"framer"` +// see https://www.framer.com/docs/guides/handshake for more information. +declare module "https://framer.com/m/*"; diff --git a/package-lock.json b/package-lock.json index 61dcddf..7f9abd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "braintok-2", "version": "0.1.0", "dependencies": { + "framer": "^2.4.1", "next": "14.2.15", "react": "^18", + "react-circular-progressbar": "^2.1.0", "react-dom": "^18" }, "devDependencies": { @@ -36,6 +38,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -234,6 +255,12 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", + "license": "Apache-2.0" + }, "node_modules/@next/env": { "version": "14.2.15", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz", @@ -2171,6 +2198,12 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz", + "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==", + "license": "MIT" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2297,6 +2330,12 @@ "dev": true, "license": "ISC" }, + "node_modules/fontfaceobserver": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz", + "integrity": "sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==", + "license": "BSD-2-Clause" + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2324,6 +2363,50 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/framer/-/framer-2.4.1.tgz", + "integrity": "sha512-kInsb+tmtNEvOeRa8wT2oRAl8Xe1L8ev4ahinB875Xh0zPBLt5Di6fuvBUILnDUU6mqmM+6QPiNxg62Va66V4Q==", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "@juggle/resize-observer": "^3.3.1", + "eventemitter3": "^3.1.0", + "fontfaceobserver": "^2.1.0", + "hoist-non-react-statics": "^3.3.2", + "hsluv": "^0.0.3" + }, + "peerDependencies": { + "framer-motion": "^10.13.1", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/framer-motion": { + "version": "10.18.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz", + "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==", + "license": "MIT", + "peer": true, + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2645,6 +2728,21 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hsluv": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz", + "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ==", + "license": "MIT" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -4112,6 +4210,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-circular-progressbar": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz", + "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==", + "license": "MIT", + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4129,7 +4236,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/read-cache": { diff --git a/package.json b/package.json index d7a5673..19f3db8 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,20 @@ "lint": "next lint" }, "dependencies": { + "framer": "^2.4.1", + "next": "14.2.15", "react": "^18", - "react-dom": "^18", - "next": "14.2.15" + "react-circular-progressbar": "^2.1.0", + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.15", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.15" + "typescript": "^5" } } diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx index 9b695a0..cfc2174 100644 --- a/src/app/landing/page.tsx +++ b/src/app/landing/page.tsx @@ -3,20 +3,29 @@ import arrow from "../../img/arrow.png"; import gradient from "../../img/gradient.png"; import Image from "next/image"; +import { useState } from "react"; +import { Time } from "@/app/landing/time"; export default function Landing() { + const [clicked, setClicked] = useState(false); + return ( -
-
-
- Swipe to start grinding + clicked ? +
- -
) } \ No newline at end of file diff --git a/src/app/landing/time.tsx b/src/app/landing/time.tsx new file mode 100644 index 0000000..648d75a --- /dev/null +++ b/src/app/landing/time.tsx @@ -0,0 +1,26 @@ +"use client" +import 'react-circular-progressbar/dist/styles.css'; +import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'; +// import { useState } from "react"; + +export function Time() { + // const [secondsLeft, _setSecondsLeft] = useState(100); + const percentage = 66; + + return
+

+ { + Math.trunc(100 / 60) + } +

+
+ +
+
+} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d4103fb..8815d66 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,7 +22,6 @@ export default function RootLayout({ className="antialiased h-[100vh] flex flex-col" >
- mindmap

logo