<script setup>
import { ref } from 'vue';

const userInfo = ref({
    name: '用户名',
    avatar: '',
    // Add more user info as needed
})
</script>

<template>
    <div class="p-4">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex items-center gap-4 p-4 border-b border-gray-100">
                <div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden">
                    <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="头像" class="w-full h-full object-cover">
                </div>
                <h3 class="text-xl font-medium">{{ userInfo.name }}</h3>
            </div>

            <div class="grid grid-cols-3 gap-4 p-4">
                <button v-for="(item, index) in ['我的收藏', '我的点赞', '订单列表']" :key="index"
                    class="py-3 text-center text-gray-700 hover:bg-gray-50 active:bg-gray-100 rounded-lg transition-colors">
                    {{ item }}
                </button>
            </div>
        </div>
    </div>
</template>
