-
Notifications
You must be signed in to change notification settings - Fork 0
/
TinderSwiper.js
57 lines (52 loc) · 1.33 KB
/
TinderSwiper.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
"use client";
import styles from "./TinderSwiper.module.css";
import TinderCard from "react-tinder-card";
import React, { useMemo, useRef } from "react";
const TinderSwiper = ({ tasks }) => {
const cardRefs = useMemo(
() =>
Array(tasks.length)
.fill(0)
.map((i) => React.createRef()),
[tasks]
);
const swipe = (direction) => {
// swipe the topmost card.
const lastCardIndex = tasks.length - 1;
if (cardRefs[lastCardIndex].current) {
cardRefs[lastCardIndex].current.swipe(direction);
}
};
return (
<>
<div className={styles.cardStack}>
{tasks.map(({ id, name }, index) => (
<TinderCard key={id} className={styles.card} ref={cardRefs[index]}>
<div className={styles.container}>
<span className="h1">{name}</span>
</div>
</TinderCard>
))}
</div>
<div className={styles.decissionTriggers}>
<button
className="h2 circle bgRed colorWhite"
onClick={() => {
swipe("left");
}}
>
Later
</button>
<button
className="h2 circle bgGreen colorWhite"
onClick={() => {
swipe("right");
}}
>
Yes!
</button>
</div>
</>
);
};
export default TinderSwiper;