Basic Components

<template>
  <div class="bg-white dark:bg-gray-700 p-4 border dark:border-gray-600 rounded-lg inline-block">
    <SliderSelector v-model="viewType" :options="viewOptions" />
    <div class="mt-3 text-gray-700 dark:text-gray-300">
      {{ $t('themeDocs.sliderSelector.selected') }}: {{ getSelectedLabel(viewType, viewOptions) }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SliderSelector from '~/components/theme/SliderSelector.vue'

const viewType = ref('grid')
const viewOptions = [
  { value: 'grid', icon: 'i-heroicons-squares-2x2', label: '网格视图' },
  { value: 'list', icon: 'i-heroicons-bars-4', label: '列表视图' }
]

function getSelectedLabel(value, options) {
  const option = options.find(opt => opt.value === value)
  return option ? option.label : value
}
</script>

<template>
  <div class="space-y-6">
    <!-- 地图类型选择 -->
    <div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
        {{ $t('themeDocs.sliderSelector.mapExample') }}
      </p>
      <div class="bg-white dark:bg-gray-700 p-4 border dark:border-gray-600 rounded-lg inline-block">
        <SliderSelector v-model="mapType" :options="mapOptions" />
      </div>
    </div>

    <!-- 排序方式选择 -->
    <div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
        {{ $t('themeDocs.sliderSelector.sortExample') }}
      </p>
      <div class="bg-white dark:bg-gray-700 p-4 border dark:border-gray-600 rounded-lg inline-block">
        <SliderSelector v-model="sortType" :options="sortOptions" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SliderSelector from '~/components/theme/SliderSelector.vue'

// 地图类型选项
const mapType = ref('amap')
const mapOptions = [
  { value: 'amap', icon: 'i-heroicons-map', label: '高德地图' },
  { value: 'google', icon: 'i-heroicons-globe-alt', label: '谷歌地图' }
]

// 排序选项
const sortType = ref('newest')
const sortOptions = [
  { value: 'newest', icon: 'i-heroicons-clock', label: '最新' },
  { value: 'popular', icon: 'i-heroicons-fire', label: '最热' },
  { value: 'recommend', icon: 'i-heroicons-star', label: '推荐' }
]
</script>