siimee/frontend/src/components/ProfileCard.vue

<template>
    <div class="tinder__card">
        <div class="tinder__card__container">
            <div
                v-for="user in users"
                :key="user.id"
                @throwout="swipped(user)"
                :config="config"
                class="swipe"
            >
                <div
                    class="card"
                    :style="{ 'background-image': `url(${user.avatar})` }"
                >
                    <div class="card__content">
                        <h3>{{ user.name }}</h3>
                    </div>
                </div>
            </div>

            <div class="swipe__icons">// Icons</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'tinder-cards',
    props: {
        users: {
            type: [Object, Array],
            default: function () {
                return [
                    {
                        uid: '1',
                        name: 'Fullname',
                        avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                        metadata: { age: '21', rawMetadata: 'Some Text Here!' },
                    },
                ]
            },
        },
        uid: {
            type: String,
        },
    },
    data() {
        return {
            config: {
                // allowedDirections: [VueSwing.Direction.LEFT, VueSwing.Direction.RIGHT],
                minThrowOutDistance: 250,
                maxThrowOutDistance: 300,
            },
            favorites: [],
            requests: [],
        }
    },
    created() {
        this.getUser()
    },
    components: {},
    methods: {
        logOut() {},
        reject() {
            this.swipped(this.currentCard)
        },
        swipped(user) {
            const index = this.users.findIndex(u => u.uid == user.uid)
            this.users.splice(index, 1)
            user.id = Date.now() + (Math.random() * 100000).toFixed()
            this.users.unshift({ ...user })
        },
        getUser() {
            return
        },
        onRequest() {
            const data = { ...this.currentCard }
            return
        },
    },
    computed: {
        currentCard() {
            return this.users[this.users.length - 1]
        },
    },
}
</script>
<style lang="postcss">
.card
  position: relative
  background-color: #fff
  width: 250px
  padding: 20px
  max-width: 85vw
  height: 50vh
  border-radius: 9px
  background-size: cover
  background-position: center

.tinder__card__container
  display: flex
  justify-content: center
  margin-top: 10vh

.swipe
  position: absolute

.card__content
  width: 100%
  height: 100%

.card h3
  position: absolute
  bottom: 0
  margin: 10px
  color: #fff
  background: linear-gradient(
    109deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 100%
  )
  border-radius: 9px
  padding: 5px

.swipe__icons__container
  display: flex
  justify-content: center

.swipe__icons
  position: fixed
  bottom: 5vh
  display: flex
  width: 250px
  justify-content: space-evenly

.swipe__icon__close:hover,
.swipe__icon__star:hover,
.swipe__icon__heart:hover
  transform: scale(1.06)
  transition: all 0.2s ease-in-out

.swipe__icons .material-design-icon__svg
  background-color: white
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) !important
  border-radius: 30px
  padding: 10px

@media only screen and (min-width: 768px)
  .swipe__icon__power
    display: none
</style>