From 4c651d6835ee3ff05174b9e1b8aa851147a74492 Mon Sep 17 00:00:00 2001
From: VITALY-VORON <142410419+VITALY-VORON@users.noreply.github.com>
Date: Thu, 24 Aug 2023 19:40:38 +0300
Subject: [PATCH] =?UTF-8?q?=D1=82=D0=B8=D0=BD=D0=B4=D0=B5=D1=80=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D1=87=D1=82=D0=B8=20=D0=B3=D0=BE=D1=82=D0=BE=D0=B2,=20?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B5=D1=81=D1=82=D1=8C=20=D0=BD=D0=B0=20=D1=87?=
 =?UTF-8?q?=D1=82=D0=BE=20=D0=BF=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B5?=
 =?UTF-8?q?=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tinder/Tinder.css | 68 +++++++++++++++++++++++++
 src/components/Tinder/Tinder.js  | 85 +++++++++++++++++++-------------
 2 files changed, 118 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Tinder/Tinder.css

diff --git a/src/components/Tinder/Tinder.css b/src/components/Tinder/Tinder.css
new file mode 100644
index 0000000..af195a4
--- /dev/null
+++ b/src/components/Tinder/Tinder.css
@@ -0,0 +1,68 @@
+/* Tinder.css */
+
+.tinder-container {
+    margin-top: 30%;
+    height: 50vh;
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+
+  }
+  
+  .card-container {
+    position: relative;
+    display: flex;
+    height: 80px;
+    width: 120px;
+    flex-direction: column;
+  }
+  
+  .swipe {
+    position: absolute;
+    width: 100%;
+    max-width: 300px;
+    max-height: 400px;
+    cursor: pointer;
+    transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+  }
+  
+  .swipe-left {
+    transform: translateX(-100%) rotate(-5deg);
+    opacity: 0;
+  }
+  
+  .swipe-right {
+    transform: translateX(100%) rotate(5deg);
+    opacity: 0;
+  }
+  
+  .card {
+    width: 80px;
+    max-width: 300px;
+    max-height: 400px;
+    border-radius: 10px;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding: 16px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+
+  }
+  
+  .card-content {
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    padding: 8px;
+    text-align: center;
+  }
+  
+  .infoText {
+    margin-top: 16px;
+  }
+  
\ No newline at end of file
diff --git a/src/components/Tinder/Tinder.js b/src/components/Tinder/Tinder.js
index a80fce7..233564a 100644
--- a/src/components/Tinder/Tinder.js
+++ b/src/components/Tinder/Tinder.js
@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
-import TinderCard from 'react-tinder-card'
+import TinderCard from 'react-tinder-card';
+import './Tinder.css'
 
 const db = [
     {
@@ -24,46 +25,60 @@ const db = [
     }
   ]
 
-const Tinder = ()=> {
-
-    const characters = db
-    const [lastDirection, setLastDirection] = useState()
-
+  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!')
-      }
-
+      console.log('removing: ' + nameToDelete);
+      setLastDirection(direction);
+    };
+  
+    const outOfFrame = (name) => {
+      console.log(name + ' left the screen!');
+    };
+  
     return (
-        <div style={{
-            height: '100vh',
-            width: '100%',
+      <div className='tinder-container'>
+        {/* <div style={{
             display: 'flex',
-            justifyContent: 'center',
             flexDirection: 'column',
+            height: '100%',
+            width: '100%',
+            alignContent: 'center',
             flexWrap: 'wrap',
+            justifyContent: 'space-evenly',
             alignItems: 'center',
-            overflow: 'hidden',
-        }}>
-            <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>
+            background: 'white',
+        }}> */}
+            <h1>Card</h1>
+            <div className='card-container'>
+            {characters.map((character) => (
+                <TinderCard
+                className='swipe'
+                key={character.name}
+                onSwipe={(dir) => swiped(dir, character.name)}
+                onCardLeftScreen={() => outOfFrame(character.name)}
+                >
+                <div className='card'>
+                    <div
+                    className='card-content'
+                    style={{ backgroundImage: `url(${character.url})` }}
+                    >
+                    <h3>{character.name}</h3>
+                    </div>
+                </div>
+                </TinderCard>
+            ))}
             </div>
-            </TinderCard>
+            {lastDirection ? (
+            <h2 className='infoText'>You swiped {lastDirection}</h2>
+            ) : (
+            <h2 className='infoText' />
             )}
-            </div>
-            {lastDirection ? <h2 className='infoText'>You swiped {lastDirection}</h2> : <h2 className='infoText' />}
         </div>
-    )
-}
-
-export default Tinder;
\ No newline at end of file
+    //   </div>
+    );
+  };
+  
+  export default Tinder;
\ No newline at end of file