<template>
    <div class="flex flex-col gap-2">
        <UButton
            leading-icon="i-heroicons-home"
            color="gray"
            variant="ghost"
            size="md"
            label="首页"
            to="/"
        />
        <UButton
            leading-icon="i-heroicons-rectangle-stack"
            color="gray"
            variant="ghost"
            size="md"
            label="收藏夹"
            to="/library"
        />
        <div class="flex justify-between">
            <UButton
                class="flex-grow"
                leading-icon="i-heroicons-magnifying-glass"
                color="gray"
                variant="ghost"
                size="md"
                label="搜索记录"
            />
            <UButton
                label="清空"
                size="md"
                variant="link"
            />
        </div>
        <div class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
            <template v-for="(item, index) in searchHistory" :key="index">
                <UButton
                    color="gray"
                    variant="ghost"
                    size="xs"
                >
                    <div class="truncate">{{ item.title }}</div>
                </UButton>
            </template>
        </div>
        <UButton
            class="flex flex-grow gap-2 justify-center"
            size="lg"
            label="登录"
        />
    </div>
</template>
<script setup>
const searchHistory = ref([
    {
        title: 'Vue 的 v-model 怎么用'
    },
    {
        title: '帮我写一个爬虫，爬取豆瓣热门电影top250'
    },
    {
        title: 'grid 的 grid-template-columns 除了 minmax 和 repeat，还有哪些值'
    },
    {
        title: 'flex 各种布局的区别'
    }
])
</script>
