Implement component with dummmy data

src/components/widgets/TopPosts.vue

@@ -3,6 +3,20 @@
 		<div class='widgets__top_posts__overlay' :class='{ "widgets__top_posts__overlay--show" : loading }'>
 			<loading-icon></loading-icon>
 		</div>
+
+		<div
+			class='widgets__top_posts__item'
+			:class='"widgets__top_posts__item--" + $index'
+			v-for='(thread, $index) in data'
+		>
+			<div class='widgets__top_posts__item__number'>{{$index + 1}}</div>
+			<div class='widgets__top_posts__item__info'>
+				<div class='widgets__top_posts__item__title'>{{thread.title}}</div>
+				<div class='widgets__top_posts__item__views'>
+					{{thread.views}} {{thread.views | pluralize('page view')}}
+				</div>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -14,7 +28,14 @@
 		components: { LoadingIcon },
 		data () {
 			return {
-				loading: false
+				loading: false,
+
+				data: [
+					{ title: 'Post title here', views: 20 },
+					{ title: 'Another', views: 18 },
+					{ title: 'Lorem ipsum dolor sit amet loremp', views: 10 },
+					{ title: 'Post here', views: 2 }
+				]
 			}
 		}
 	}
@@ -27,12 +48,65 @@
 		background-color: #fff;
 		width: 100%;
 		height: 100%;
-		overflow: hidden;
+		overflow: auto;
 		border-radius: 0.25rem 0.25rem 0 0;
 		position: relative;
 
+
 		@at-root #{&}__overlay {
 			@include loading-overlay(#2ecc71, 0.25rem 0.25rem 0 0);
 		}
+
+		@at-root #{&}__item {
+			display: flex;
+			flex-direction: row;
+			padding: 0.25rem 1rem;
+			cursor: default;
+			height: 25%;
+			overflow: hidden;
+			padding-top: 0.125rem;
+			transition: filter 0.2s;
+
+			&:hover {
+				filter: brightness(0.9);
+			}
+
+			@for $i from 0 through 3 {
+				@at-root #{&}--#{$i} {
+					$alpha: null;
+
+					@if $i == 3 {
+						$alpha: 0.075;
+					} @else {
+						$alpha: 0.8 - ($i + 1) / 5
+					}
+					
+					background-color: rgba(0, 222, 56, $alpha);
+				}
+			}
+
+			@at-root #{&}__number {
+				font-size: 1.75rem;
+				font-family: $font--role-emphasis;
+				margin-right: 1rem;
+				width: 1rem;
+				@include user-select(none);				
+			}
+
+			@at-root #{&}__title {
+				font-size: 1.125rem;
+				text-overflow: ellipsis;
+				width: 13rem;
+				cursor: pointer;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+
+			@at-root #{&}__views {
+				color: $color__text--secondary;
+				font-size: 0.9rem;
+				margin-top: -0.125rem;
+			}
+		}
 	}
 </style>