EasyTravel/FichaFrontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

global
Some checks failed
Create and publish a Docker image / Publish image (push) Failing after 38s
Details
Create and publish a Docker image / Deploy image (push) Has been skipped
Details

Browse Source
This commit is contained in:
VITALY-VORON
2023-08-26 02:41:03 +03:00
parent e108630fb9
commit e258d3261f
15 changed files with 424 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/Tinder/Tinder.js
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import TinderCard from 'react-tinder-card';
import './Tinder.css';
import axios from 'axios';
const Tinder = (props) => {
@@ -21,6 +20,16 @@ const Tinder = (props) => {
};
};
const handleDislike = (id) => {
console.log('left');
swiped('left', id);
};
const handleLike = (id) => {
console.log('right');
swiped('right', id);
};
return (
<div className='tinder-container'>
<h1>Card</h1>
@@ -35,24 +44,76 @@ const Tinder = (props) => {
var uniqueIds = [...new Set(allIds)];
if(uniqueIds.length === cardInfo.length) {
route('/map');
console.log(unique);
}
}}
>
<div className='card'>
<div
className='card-content'
style={{
backgroundImage: `url(${card.imageURL})`,
width: '300px',
height: '400px',
borderRadius: '10px',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}}
>
<h3>{card.question}</h3>
<div
className='card-content'
style={{
width: '300px',
height: '400px',
borderRadius: '10px',
display: 'flex',
flexDirection: 'column',
paddingTop: '10px',
}}
>
<div style={{
height: '188px',
width: '245px',
borderRadius: '10px',
backgroundImage: `url(${card.imageURL})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}}/>
<div style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: '150px',
width: '100%',
}}>
<h3>{card.question}</h3>
<div style={{
display: 'flex',
justifyContent: 'space-between',
marginLeft: '3px',
marginRight: '3px',
}}>
<button
style={{
height: '69px',
width: '69px',
backgroundColor: 'rgb(0,0,0,0)',
border: 'none',
}}
onClick={() => handleDislike(card.id)}
>
<img src="./Dis.png" alt='#' style={{
height: '100%',
width: '100%',
}} onClick={() => handleDislike(card.id)}/>
</button>
<button
style={{
height: '69px',
width: '69px',
backgroundColor: 'rgb(0,0,0,0)',
border: 'none',
}}
onClick={() => handleLike(card.id)}
>
<img src="./Like.png" alt='#' style={{
height: '100%',
width: '100%',
}} onClick={() => handleLike(card.id)}/>
</button>
</div>
</div>
</div>
</div>
</TinderCard>