тиндер почти готов, но есть на что посмотреть

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;
+  }
+  

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)
-      }
+      console.log('removing: ' + nameToDelete);
+      setLastDirection(direction);
+    };
   
     const outOfFrame = (name) => {
-        console.log(name + ' left the screen!')
-      }
+      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'>
+            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>
+            {lastDirection ? (
+            <h2 className='infoText'>You swiped {lastDirection}</h2>
+            ) : (
+            <h2 className='infoText' />
             )}
         </div>
-            {lastDirection ? <h2 className='infoText'>You swiped {lastDirection}</h2> : <h2 className='infoText' />}
-        </div>
-    )
-}
+    //   </div>
+    );
+  };
   
-export default Tinder;
+  export default Tinder;