Add top-posts component

src/components/routes/AdminDashboard.vue

@@ -16,6 +16,8 @@
 		</div>
 		<div class='admin_dashboard__row'>
 			<div class='admin_dashboard__card admin_dashboard__card--2'>
+				<top-posts></top-posts>
+				<div class='admin_dashboard__card__title'>Top threads by page views today</div>
 			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
 				<line-chart color='#84dec0'></line-chart>
@@ -31,13 +33,15 @@
 	import NewPosts from '../widgets/NewPosts'
 	import LineChart from '../widgets/LineChart'
 	import CategoriesChart from '../widgets/CategoriesChart'
+	import TopPosts from '../widgets/TopPosts'
 
 	export default {
 		name: 'AdminDashboard',
 		components: {
 			NewPosts,
 			LineChart,
-			CategoriesChart
+			CategoriesChart,
+			TopPosts
 		}
 	}
 </script>

src/components/widgets/TopPosts.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class='widgets__top_posts'>
+		<div class='widgets__top_posts__overlay' :class='{ "widgets__top_posts__overlay--show" : loading }'>
+			<loading-icon></loading-icon>
+		</div>
+	</div>
+</template>
+
+<script>
+	import LoadingIcon from '../LoadingIcon'
+
+	export default {
+		name: 'TopPosts',
+		components: { LoadingIcon },
+		data () {
+			return {
+				loading: false
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../../assets/scss/variables.scss';
+
+	.widgets__top_posts {
+		background-color: #fff;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 0.25rem 0.25rem 0 0;
+		position: relative;
+
+		@at-root #{&}__overlay {
+			@include loading-overlay(#2ecc71, 0.25rem 0.25rem 0 0);
+		}
+	}
+</style>