51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
|
|
import { CheckCircle, ArrowRight } from 'lucide-react'
|
||
|
|
|
||
|
|
// 定义Feature类型
|
||
|
|
type Feature = {
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
icon: 'CheckCircle' | 'ArrowRight'
|
||
|
|
}
|
||
|
|
|
||
|
|
// 定义组件props类型
|
||
|
|
type FeaturesProps = {
|
||
|
|
items: Feature[]
|
||
|
|
title: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// 修改组件为接受props的形式
|
||
|
|
export default function Features({ items, title }: FeaturesProps) {
|
||
|
|
// 创建图标映射
|
||
|
|
const iconMap = {
|
||
|
|
CheckCircle: <CheckCircle className="h-10 w-10 text-primary dark:text-gray-100" />,
|
||
|
|
ArrowRight: <ArrowRight className="h-10 w-10 text-primary dark:text-gray-100" />,
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="features" className="w-full py-24 md:py-32">
|
||
|
|
<div className="container mx-auto px-4 md:px-6">
|
||
|
|
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-16">
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{items &&
|
||
|
|
items.map((feature, index) => (
|
||
|
|
<Card key={index} className="n-card dark:bg-zinc-800 dark:text-gray-100">
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
{iconMap[feature.icon]}
|
||
|
|
<CardTitle>{feature.title}</CardTitle>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<p>{feature.description}</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|