From 853a713ad6394dabb387f935a001de1a54bc0e83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Schr=C3=B6tler?= Date: Sun, 4 Apr 2021 22:21:31 +0200 Subject: [PATCH] Added CopyrightNotice ToDo: Fix VisibilitySensor --- package.json | 2 + src/components/CopyrightNotice/index.tsx | 83 ++++++++++++++++++++++++ src/pages/index.tsx | 6 +- yarn.lock | 54 ++++++++++++++- 4 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 src/components/CopyrightNotice/index.tsx diff --git a/package.json b/package.json index 3280b6f..d4b0b06 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "build-storybook": "build-storybook -s public" }, "dependencies": { + "framer-motion": "^4.1.2", "fs": "^0.0.1-security", "next": "10.0.5", "react": "17.0.1", "react-calendar-heatmap": "^1.8.1", "react-dom": "17.0.1", + "react-visibility-sensor": "^5.1.1", "swr": "^0.5.5" }, "devDependencies": { diff --git a/src/components/CopyrightNotice/index.tsx b/src/components/CopyrightNotice/index.tsx new file mode 100644 index 0000000..d3266e7 --- /dev/null +++ b/src/components/CopyrightNotice/index.tsx @@ -0,0 +1,83 @@ +import React from "react"; +import 'react-calendar-heatmap/dist/styles.css'; +import {AnimatePresence, motion} from "framer-motion"; +import VisibilitySensor from "react-visibility-sensor"; + + +export default class CopyrightNotice extends React.Component { + constructor(props) { + super(props); + + this.state = { + currentStep: 0 + } + } + + + render() { + let content; + + switch (this.state.currentStep) { + case 0: + content = ( + <> + copyright networkException ${new Date().getFullYear()} + + ); + break; + case 1: + content = ( + <> + copyright networkException  + $ + { + new  + Date + ( + ) + . + getFullYear + ( + ) + } + + ); + break; + case 2: + content = ( + <>copyright networkException {new Date().getFullYear()}; + ); + break; + } + + return ( +
+ { + console.log(visible); + + if(visible) { + setTimeout(() => { + this.setState({currentStep: 1}); + }, 4000); + + setTimeout(() => { + this.setState({currentStep: 2}); + }, 8000); + } + }}> + + + {content} + + + +
+ ); + } +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1faa619..25c9617 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,5 @@ import Head from "next/head" -import {GitActivity} from "../components/GitActivity"; +import CopyrightNotice from "../components/CopyrightNotice"; export default function Home() { return ( @@ -8,7 +8,9 @@ export default function Home() { nwex.de - +
+ +
) } diff --git a/yarn.lock b/yarn.lock index 6606511..71da83c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1127,7 +1127,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6": +"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.6": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -6259,6 +6259,26 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" +framer-motion@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.2.tgz#2fffb7700ca1c3405e697294d155b1aae51c1031" + integrity sha512-nVieffLWWmK5gog46PsoecgJCsFV+n6A5GOqoGXkWtvB9jWcscRVIdGzAaPKo2uiJHkGSyXUHU8+lt6YOQVRqw== + dependencies: + framesync "5.3.0" + hey-listen "^1.0.8" + popmotion "9.3.5" + style-value-types "4.1.4" + tslib "^2.1.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + +framesync@5.3.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b" + integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA== + dependencies: + tslib "^2.1.0" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -6822,6 +6842,11 @@ he@1.2.0, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +hey-listen@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" + integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== + highlight.js@^10.1.1, highlight.js@~10.5.0: version "10.5.0" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f" @@ -9805,6 +9830,16 @@ polished@^3.4.4: dependencies: "@babel/runtime" "^7.9.2" +popmotion@9.3.5: + version "9.3.5" + resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.5.tgz#e821aff3424a021b0f2c93922db31c55cfe64149" + integrity sha512-Lr2rq8OP0j8D7CO2/6eO17ALeFCxjx1hfTGbMg+TLqFj+KZSGOoj6gRBVTzDINGqo6LQrORQSSSDaCL5OrB3bw== + dependencies: + framesync "5.3.0" + hey-listen "^1.0.8" + style-value-types "4.1.4" + tslib "^2.1.0" + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -10588,6 +10623,13 @@ react-textarea-autosize@^8.1.1: use-composed-ref "^1.0.0" use-latest "^1.0.0" +react-visibility-sensor@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9" + integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w== + dependencies: + prop-types "^15.7.2" + react@17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" @@ -11946,6 +11988,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" +style-value-types@4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75" + integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg== + dependencies: + hey-listen "^1.0.8" + tslib "^2.1.0" + styled-jsx@3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.2.tgz#2474601a26670a6049fb4d3f94bd91695b3ce018" @@ -12390,7 +12440,7 @@ tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3: +tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a" integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==