<script lang="ts" setup>
import { NiButton } from './components/button/index'
</script>

<template>
  <div class="container">
    <h1>Ni UI 组件库示例</h1>
    
    <section class="demo-section">
      <h2>按钮组件</h2>
      <div class="demo-row">
        <NiButton>默认按钮</NiButton>
        <NiButton type="primary">主要按钮</NiButton>
        <NiButton type="success">成功按钮</NiButton>
        <NiButton type="warning">警告按钮</NiButton>
        <NiButton type="danger">危险按钮</NiButton>
      </div>
      
      <div class="demo-row">
        <NiButton size="small">小型按钮</NiButton>
        <NiButton>默认大小</NiButton>
        <NiButton size="large">大型按钮</NiButton>
      </div>
      
      <div class="demo-row">
        <NiButton disabled>禁用按钮</NiButton>
        <NiButton type="primary" disabled>禁用主要按钮</NiButton>
      </div>
    </section>
  </div>
</template>

<style lang="scss">
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  h1 {
    text-align: center;
    margin-bottom: 40px;
  }
}

.demo-section {
  margin-bottom: 40px;
  
  h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }
}

.demo-row {
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>
