Swipe

2023-08-25 01:06:36 +03:00 · 2023-08-25 01:06:36 +03:00 · 628b7e9caa
commit 628b7e9caa
parent 1cd3aaa6ab
3 changed files with 178 additions and 3 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12,9 +12,11 @@
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "framer": "^2.3.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
+        "react-swipeable": "^7.0.1",
        "react-tinder-card": "^1.6.2",
        "web-vitals": "^2.1.4",
        "workbox-background-sync": "^6.6.0",
@ -2279,6 +2281,23 @@
        "postcss-selector-parser": "^6.0.10"
      }
    },
+    "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==",
+      "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==",
+      "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",
@ -3136,11 +3155,80 @@
        "@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=="
+    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
    },
+    "node_modules/@motionone/animation": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
+      "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/easing": "^10.15.1",
+        "@motionone/types": "^10.15.1",
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.16.2",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.16.2.tgz",
+      "integrity": "sha512-bnuHdNbge1FutZXv+k7xub9oPWcF0hsu8y1HTH/qg6av58YI0VufZ3ngfC7p2xhMJMnoh0LXFma2EGTgPeCkeg==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/animation": "^10.15.1",
+        "@motionone/generators": "^10.15.1",
+        "@motionone/types": "^10.15.1",
+        "@motionone/utils": "^10.15.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
+      "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
+      "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/types": "^10.15.1",
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
+      "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==",
+      "peer": true
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
+      "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/types": "^10.15.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
      "version": "5.1.1-v1",
      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@ -8385,6 +8473,11 @@
        }
      }
    },
+    "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=="
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@ -8582,6 +8675,53 @@
        "url": "https://www.patreon.com/infusion"
      }
    },
+    "node_modules/framer": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/framer/-/framer-2.3.0.tgz",
+      "integrity": "sha512-sVAwMEO3LEfHElJOueRjnlBEYN3X8ztbXwZ22RvBHUftOdDpBkrJfISdAds87O8FEWsn5T7Dp3sLfmrBKXXIaQ==",
+      "hasInstallScript": true,
+      "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": "^7.6.12",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "7.10.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.10.3.tgz",
+      "integrity": "sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==",
+      "peer": true,
+      "dependencies": {
+        "@motionone/dom": "^10.15.3",
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
+      "peer": true
+    },
+    "node_modules/framer/node_modules/eventemitter3": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+    },
    "node_modules/fresh": {
      "version": "0.5.2",
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -8963,6 +9103,25 @@
        "he": "bin/he"
      }
    },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "peer": true
+    },
+    "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==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -9014,6 +9173,11 @@
        "safe-buffer": "~5.1.0"
      }
    },
+    "node_modules/hsluv": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.0.3.tgz",
+      "integrity": "sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ=="
+    },
    "node_modules/html-encoding-sniffer": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@ -14787,6 +14951,14 @@
        }
      }
    },
+    "node_modules/react-swipeable": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.1.tgz",
+      "integrity": "sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==",
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
+      }
+    },
    "node_modules/react-tinder-card": {
      "version": "1.6.2",
      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
--- a/package.json
+++ b/package.json
@ -7,9 +7,11 @@
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "framer": "^2.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
+    "react-swipeable": "^7.0.1",
    "react-tinder-card": "^1.6.2",
    "web-vitals": "^2.1.4",
    "workbox-background-sync": "^6.6.0",
--- a/src/components/Tinder/Tinder.css
+++ b/src/components/Tinder/Tinder.css
@ -25,19 +25,20 @@
    max-width: 300px;
    max-height: 400px;
    cursor: pointer;
-    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+    transition: transform 0.05s ease-in-out, opacity 0.25s ease-in-out;
  }
  
  .swipe-left {
-    transform: translateX(-100%) rotate(-5deg);
+    transform: translateX(-10%) rotate(-20deg);
    opacity: 0;
  }
  
  .swipe-right {
-    transform: translateX(100%) rotate(5deg);
+    transform: translateX(10%) rotate(20deg);
    opacity: 0;
  }
  
+  
  .card {
    width: 80px;
    max-width: 300px;