trendplays/resources/js/panel/services.vue

<template>
<div>
	<div class="services-menu">
	<button class="selected">Services</button>
	<button>Credits</button>
	<div class="menu-slider">
	<div></div></div>
	</div>
	<div class="services-legend"><h5>Name</h5>
<h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
	<section class="services-pane youtube">
	<h4>Youtube</h4>
	<ul>
		<li><span>Unique Views and Engagements</span><span>11</span><span>1000</span><span>500,000</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
</svg>
		</li>
	</ul>
	</section>
	<section class="services-pane instagram">
	<h4>Instagram</h4>
	</section>
	<section class="services-pane twitter">
	<h4>Twitter</h4>
	</section>
</div>
</template>

<script>

export default {
	data() {
		return {servicePane: true}
	},
	props: ['orders']
}
</script>