51 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			51 lines
		
	
	
		
			1.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="media media-comment">
 | |
|     <img alt="Image placeholder" class="avatar avatar-lg media-comment-avatar rounded-circle" :src="userImage">
 | |
|     <div class="media-body">
 | |
|       <div class="media-comment-text">
 | |
|         <h6 class="h5 mt-0">{{userName}}</h6>
 | |
|         <p class="text-sm lh-160" v-html="text"></p>
 | |
|         <div class="icon-actions">
 | |
|           <a href="#" class="like active">
 | |
|             <i class="ni ni-like-2"></i>
 | |
|             <span class="text-muted">{{likeCount}} likes</span>
 | |
|           </a>
 | |
|           <a href="#">
 | |
|             <i class="ni ni-curved-next"></i>
 | |
|             <span class="text-muted">{{shareCount}} shares</span>
 | |
|           </a>
 | |
|         </div>
 | |
|       </div>
 | |
|     </div>
 | |
|   </div>
 | |
| </template>
 | |
| <script>
 | |
|   export default {
 | |
|     name: 'comment',
 | |
|     props: {
 | |
|       userImage: {
 | |
|         type: String,
 | |
|         default: 'img/theme/team-1.jpg'
 | |
|       },
 | |
|       userName: {
 | |
|         type: String,
 | |
|         default: 'Michael Lewis'
 | |
|       },
 | |
|       text: {
 | |
|         type: String,
 | |
|         default: 'Cras sit amet nibh libero nulla vel metus scelerisque ante sollicitudin. Cras purus odio vestibulum in vulputate viverra turpis.'
 | |
|       },
 | |
|       likeCount: {
 | |
|         type: Number,
 | |
|         default: 0
 | |
|       },
 | |
|       shareCount: {
 | |
|         type: Number,
 | |
|         default: 0
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| </script>
 | |
| <style>
 | |
| </style>
 |