<script setup lang="ts">
import { CfPageHeader, CfButton, CfBreadcrumb } from '@chufix-design/vue';
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader
      title="项目设置"
      description="管理项目成员、权限以及通知偏好。"
    >
      <template #breadcrumb>
        <CfBreadcrumb
          :items="[
            { label: '工作台', href: '#' },
            { label: '项目', href: '#' },
            { label: '设置' },
          ]"
        />
      </template>
      <template #actions>
        <CfButton variant="tertiary">取消</CfButton>
        <CfButton variant="primary">保存</CfButton>
      </template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader
title="Project settings"
description="Manage members, permissions, and notification preferences."
breadcrumb={
  <CfBreadcrumb items={[
    { label: 'Workbench', href: '#' },
    { label: 'Projects', href: '#' },
    { label: 'Settings' },
  ]} />
}
actions={
  <>
    <CfButton variant="tertiary">Cancel</CfButton>
    <CfButton variant="primary">Save</CfButton>
  </>
}
/>

<script setup lang="ts">
import { ref } from 'vue';
import { CfPageHeader, CfButton, CfTabs, CfTag } from '@chufix-design/vue';

const tab = ref('overview');
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfPageHeader>
      <template #title>
        <span style="display:inline-flex; gap: 8px; align-items: center;">
          chufix
          <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag>
        </span>
      </template>
      <template #description>
        Vue 3 + React 双框架同源的基础组件库
      </template>
      <template #actions>
        <CfButton variant="tertiary" size="sm">分享</CfButton>
        <CfButton variant="primary" size="sm">部署</CfButton>
      </template>
      <template #tabs>
        <CfTabs
          v-model="tab"
          variant="line"
          :items="[
            { value: 'overview', label: '概览' },
            { value: 'members', label: '成员' },
            { value: 'settings', label: '设置' },
            { value: 'logs', label: '日志' },
          ]"
        />
      </template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader
title={<>chufix <CfTag tone="primary" variant="solid" size="sm">v0.0.1</CfTag></>}
description="Single-source Vue 3 + React component library"
actions={<><CfButton size="sm" variant="tertiary">Share</CfButton><CfButton size="sm" variant="primary">Deploy</CfButton></>}
tabs={<CfTabs value={tab} items={items} onChange={setTab} />}
/>

<script setup lang="ts">
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-stack">
    <CfPageHeader title="size = sm" description="紧凑头部，适合详情子页或弹窗内" size="sm">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = md" description="默认尺寸" size="md">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
    <CfPageHeader title="size = lg" description="落地页或主页强调" size="lg">
      <template #actions><CfButton size="sm">操作</CfButton></template>
    </CfPageHeader>
  </div>
</template>

<CfPageHeader title="size = sm" description="Compact header" size="sm" />
<CfPageHeader title="size = md" description="Default size" size="md" />
<CfPageHeader title="size = lg" description="Landing-page emphasis" size="lg" />

<script setup lang="ts">
import { CfPageHeader, CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfPageHeader
    title="无底边的页头"
    description="bordered=false 把底部分隔线去掉，紧贴页面背景"
    :bordered="false"
  >
    <template #actions>
      <CfButton variant="primary">保存</CfButton>
    </template>
  </CfPageHeader>
</template>

<CfPageHeader
title="Header without bottom border"
description="bordered=false drops the bottom divider"
bordered={false}
/>