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

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;
+    //   </div>
+    );
+  };
+  
+  export default Tinder;