56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { ColorDict } from "@/interfaces";
|
|
|
|
interface Props {
|
|
colors: ColorDict[];
|
|
}
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<table class="color-table">
|
|
<thead class="color-table__head">
|
|
<tr class="color-table__row">
|
|
<th class="color-table__heading name">Body part</th>
|
|
<th class="color-table__heading value">Value</th>
|
|
<th class="color-table__heading color">Color</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="color-table__body">
|
|
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
|
|
<td class="color-table__cell name">{{ color.name }}</td>
|
|
<td class="color-table__cell value">{{ color.value }}</td>
|
|
<td
|
|
class="color-table__cell color"
|
|
:style="{ 'background-color': color.value }"
|
|
></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.color-table {
|
|
&__heading {
|
|
&.name {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
&__cell {
|
|
&.name {
|
|
text-align: right;
|
|
}
|
|
|
|
&.value {
|
|
font-family: monospace;
|
|
text-align: center;
|
|
}
|
|
|
|
&.color {
|
|
min-width: 10vw;
|
|
}
|
|
}
|
|
}
|
|
</style>
|