70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
|
|
interface TemplateCardsProps {
|
|
t: any; // i18n translation function
|
|
}
|
|
|
|
export const TemplateCards: React.FC<TemplateCardsProps> = ({ t }) => {
|
|
const templates = [
|
|
{
|
|
key: 'restaurant',
|
|
title: t.templates.restaurant,
|
|
icon: '🍽️',
|
|
color: 'bg-red-50 border-red-200',
|
|
iconBg: 'bg-red-100',
|
|
},
|
|
{
|
|
key: 'business',
|
|
title: t.templates.business,
|
|
icon: '💼',
|
|
color: 'bg-blue-50 border-blue-200',
|
|
iconBg: 'bg-blue-100',
|
|
},
|
|
{
|
|
key: 'vcard',
|
|
title: t.templates.vcard,
|
|
icon: '👤',
|
|
color: 'bg-purple-50 border-purple-200',
|
|
iconBg: 'bg-purple-100',
|
|
},
|
|
{
|
|
key: 'event',
|
|
title: t.templates.event,
|
|
icon: '🎫',
|
|
color: 'bg-green-50 border-green-200',
|
|
iconBg: 'bg-green-100',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-16">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
|
|
{t.templates.title}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{templates.map((template) => (
|
|
<Card key={template.key} className={`${template.color} text-center hover:scale-105 transition-transform cursor-pointer`}>
|
|
<div className={`w-16 h-16 ${template.iconBg} rounded-full flex items-center justify-center mx-auto mb-4`}>
|
|
<span className="text-2xl">{template.icon}</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
|
{template.title}
|
|
</h3>
|
|
<Button variant="outline" size="sm" className="w-full">
|
|
{t.templates.use_template}
|
|
</Button>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |