pixelfed/pixelfed

<template>
    <div>
        <!-- <p class="">
            <router-link class="btn btn-primary primary btn-sm rounded-pill font-weight-bold btn-block" to="/i/web/whats-new"><i class="fal fa-exclamation-circle mr-1"></i> New in Metro UI 2</router-link>
        </p> -->

        <notifications :profile="profile" />

        <!-- <div class="d-none card shadow-sm mb-3" style="border-radius: 15px;">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p class="text-muted">{{ $t('timeline.peopleYouMayKnow') }}</p>
                    <p class="text-lighter"><i class="far fa-cog"></i></p>
                </div>

                <div class="media-list mb-n4">
                    <div v-for="(account, index) in recommended" class="media align-items-center mb-3">
                        <img :src="account.avatar" class="avatar shadow-sm mr-3" width="40" height="40">
                        <div class="media-body">
                            <p class="lead font-weight-bold username primary">&commat;{{ account.username }}</p>
                            <p class="text-muted mb-0 display-name">{{ account.display_name }}</p>
                        </div>

                        <button class="btn btn-primary btn-sm follow">
                            {{ $t('profile.follow') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-none card shadow-sm mb-3" style="border-radius: 15px;">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p class="text-muted">Trending</p>
                    <p class="text-lighter"><i class="far fa-cog"></i></p>
                </div>

                <div class="media-list row mb-n3">
                    <div v-for="(post, index) in trending" class="col-6 mb-1 p-1">
                        <img :src="post.url" width="100%" height="100" class="bg-white p-1 shadow-sm" style="object-fit: cover;border-radius: 15px;">
                    </div>

                    <div class="col-6 mb-1 p-1 d-flex justify-content-center align-items-center">
                        <button class="btn btn-link text-dark">
                            <i class="fal fa-plus-circle fa-lg"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script type="text/javascript">
    import Notifications from './../sections/Notifications.vue';

    export default {
        components: {
            "notifications": Notifications
        },

        data() {
            return {
                profile: {},
            }
        },

        mounted() {
            this.profile = window._sharedData.user;
        }
    }
</script>

<style lang="scss" scoped>
    .avatar {
        border-radius: 15px;
    }

    .username {
        font-size: 15px;
        margin-bottom: -6px;
    }

    .display-name {
        font-size: 12px;
    }

    .follow {
        background-color: var(--primary);
        border-radius: 18px;
        font-weight: 600;
        padding: 5px 15px;
    }

    .btn-white {
        background-color: #fff;
        border: 1px solid #F3F4F6;
    }
</style>