<script setup lang="ts">
import type { UserCardProperty } from './config';

import { IconifyIcon } from '@vben/icons';

import { Avatar } from 'ant-design-vue';

/** 用户卡片 */
defineOptions({ name: 'UserCard' });
// 定义属性
defineProps<{ property: UserCardProperty }>();
</script>
<template>
  <div class="flex flex-col">
    <div class="flex items-center justify-between px-4 py-6">
      <div class="flex flex-1 items-center gap-4">
        <Avatar class="size-14">
          <IconifyIcon icon="lucide:user" class="size-14" />
        </Avatar>
        <span class="text-lg font-bold">芋道源码</span>
      </div>
      <IconifyIcon icon="lucide:qr-code" class="size-5" />
    </div>
    <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
      <span class="text-orange-500">点击绑定手机号</span>
      <span class="rounded-lg bg-orange-500 px-2 py-1 text-white">
        去绑定
      </span>
    </div>
  </div>
</template>
