<script setup>
import { defineProps } from "vue";

const props = defineProps({
    thread: Object,
});
console.log(props.thread);
</script>

<template>
    <div class="room">
        {{ props.thread.roomName }}
    </div>
</template>

<style scoped>
.room {
    box-sizing: border-box;
    contain: content;
    display: flex;
    margin: -4px 4px 1px 4px;
    padding: 4px;
    cursor: pointer;
    color: #a9b2bc;
}

.room:hover,
.selected {
    background-color: #41474f;
    border-radius: 8px;
}

.room::before {
    border-right: 1px solid white;
    margin: 0 10px;
    content: "";
}
</style>
