<script setup lang="ts">
const loginState = useLoginState()

defineProps({
  contentClass: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div v-if="!loginState.is_logged_in"
       class="w-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
    <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
    <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
    <UButton class="mt-2 font-bold" to="/login" color="black" variant="solid" size="xs">登录</UButton>
  </div>
  <div :class="contentClass" v-else>
    <slot/>
  </div>
</template>

<style scoped>

</style>