68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
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; |