Тиндер

package-lock.json

@@ -8,12 +8,14 @@
       "name": "hackathonficha",
       "version": "0.1.0",
       "dependencies": {
+        "@react-spring/web": "^9.5.5",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "react-tinder-card": "^1.6.2",
         "web-vitals": "^2.1.4",
         "workbox-background-sync": "^6.6.0",
         "workbox-broadcast-update": "^6.6.0",
@@ -3248,6 +3250,73 @@
         }
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.5.tgz",
+      "integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==",
+      "dependencies": {
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.5.tgz",
+      "integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==",
+      "dependencies": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.5.tgz",
+      "integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.5.tgz",
+      "integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.5.tgz",
+      "integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.5.tgz",
+      "integrity": "sha512-+moT8aDX/ho/XAhU+HRY9m0LVV9y9CK6NjSRaI+30Re150pB3iEip6QfnF4qnhSCQ5drpMF0XRXHgOTY/xbtFw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.5.5",
+        "@react-spring/core": "~9.5.5",
+        "@react-spring/shared": "~9.5.5",
+        "@react-spring/types": "~9.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -12782,6 +12851,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/p-sleep": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-sleep/-/p-sleep-1.1.0.tgz",
+      "integrity": "sha512-bwP3GKZirBUYMtiUuBrheLUQdRXVeE/pmHOaLpNJzNfAD4b5AjDn6l823brXcQFade4G/g7GMNQ3KV86E8EaEw=="
+    },
     "node_modules/p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -14713,6 +14787,27 @@
         }
       }
     },
+    "node_modules/react-tinder-card": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-tinder-card/-/react-tinder-card-1.6.2.tgz",
+      "integrity": "sha512-jtdgINFQ4bNA7YoqnoS4Z603mYCtrRHVc+K4R6JHuUzjsRsgO7hEooCUXz++HF5WE+fkOHjkuc22w+rxUlkMJw==",
+      "dependencies": {
+        "p-sleep": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@react-spring/native": "^9.5.5",
+        "@react-spring/web": "^9.5.5",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@react-spring/native": {
+          "optional": true
+        },
+        "@react-spring/web": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-spring/web": "^9.5.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-tinder-card": "^1.6.2",
     "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.6.0",
     "workbox-broadcast-update": "^6.6.0",

src/components/Tinder/Tinder.js

@@ -0,0 +1,68 @@
+import React, {useState} from 'react';
+import TinderCard from 'react-tinder-card'
+
+const db = [
+    {
+      name: 'Richard Hendricks',
+      url: './img/richard.jpg'
+    },
+    {
+      name: 'Erlich Bachman',
+      url: './img/erlich.jpg'
+    },
+    {
+      name: 'Monica Hall',
+      url: './img/monica.jpg'
+    },
+    {
+      name: 'Jared Dunn',
+      url: './img/jared.jpg'
+    },
+    {
+      name: 'Dinesh Chugtai',
+      url: './img/dinesh.jpg'
+    }
+  ]
+
+const Tinder = ()=> {
+
+    const characters = db
+    const [lastDirection, setLastDirection] = useState()
+
+    const swiped = (direction, nameToDelete) => {
+        console.log('removing: ' + nameToDelete)
+        setLastDirection(direction)
+      }
+    
+      const outOfFrame = (name) => {
+        console.log(name + ' left the screen!')
+      }
+
+    return (
+        <div style={{
+            height: '100vh',
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+        }}>
+            <link href='https://fonts.googleapis.com/css?family=Damion&display=swap' rel='stylesheet' />
+            <link href='https://fonts.googleapis.com/css?family=Alatsi&display=swap' rel='stylesheet' />
+            <h1>React Tinder Card</h1>
+            <div className='cardContainer'>
+                {characters.map((character) =>
+                <TinderCard className='swipe' key={character.name} onSwipe={(dir) => swiped(dir, character.name)} onCardLeftScreen={() => outOfFrame(character.name)}>
+                <div style={{ backgroundImage: 'url(' + character.url + ')' }} className='card'>
+                <h3>{character.name}</h3>
+            </div>
+            </TinderCard>
+            )}
+            </div>
+            {lastDirection ? <h2 className='infoText'>You swiped {lastDirection}</h2> : <h2 className='infoText' />}
+        </div>
+    )
+}
+
+export default Tinder;