70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="d-flex align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar me-2" v-if="unknown">
|
|
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
|
|
</div>
|
|
<div class="me-2">
|
|
<h6 class="mb-0">{{ profileName }}</h6>
|
|
<div class="profile-detail">
|
|
<span>2024.12.10 10:46</span>
|
|
<template v-if="showDetail">
|
|
<span>
|
|
<i class="fa-regular fa-eye"></i> 1
|
|
</span>
|
|
<span>
|
|
<i class="fa-regular fa-thumbs-up"></i> 1
|
|
</span>
|
|
<span>
|
|
<i class="fa-regular fa-thumbs-down"></i> 1
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<template v-if="showDetail">
|
|
<button class="btn btn-label-primary btn-icon">
|
|
<i class='bx bx-edit-alt'></i>
|
|
</button>
|
|
<button class="btn btn-label-primary btn-icon">
|
|
<i class='bx bx-trash' ></i>
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BoardRecommendBtn from './BoardRecommendBtn.vue';
|
|
|
|
defineProps({
|
|
profileName : {
|
|
type: String,
|
|
default: '익명',
|
|
},
|
|
unknown : {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showDetail : {
|
|
type: Boolean,
|
|
default: true,
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.profile-detail span ~ span {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.ms-auto button + button {
|
|
margin-left: 5px;
|
|
}
|
|
</style> |