41 lines
803 B
Vue
41 lines
803 B
Vue
<template>
|
|
<div
|
|
class="grid gap-y-8 gap-x-10
|
|
grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]">
|
|
|
|
<div
|
|
v-for="(feat, idx) in features"
|
|
:key="idx"
|
|
class="flex items-start gap-4">
|
|
|
|
<UIcon
|
|
:name="`i-lucide-${feat.icon}`"
|
|
class="w-6 h-6 shrink-0 text-primary-600 mt-0.5"
|
|
/>
|
|
|
|
<div>
|
|
<h3 class="font-semibold text-neutral-700 leading-tight">
|
|
{{ feat.label }}
|
|
</h3>
|
|
<p
|
|
v-if="feat.detail"
|
|
class="text-sm text-neutral-600">
|
|
{{ feat.detail }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Feature {
|
|
icon: string
|
|
label: string
|
|
detail?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
features: Feature[]
|
|
}>()
|
|
</script>
|