85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function ServicesList() {
|
|
// Static services data
|
|
const services = [
|
|
{
|
|
id: 1,
|
|
title: "Web Development",
|
|
description: "Custom web applications built with modern technologies",
|
|
slug: "web-development",
|
|
icon: "code",
|
|
price: 2500,
|
|
featured: true,
|
|
display_order: 1,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Mobile Apps",
|
|
description: "Native and cross-platform mobile applications",
|
|
slug: "mobile-apps",
|
|
icon: "phone",
|
|
price: 3500,
|
|
featured: false,
|
|
display_order: 2,
|
|
created_at: new Date().toISOString(),
|
|
updated_at: new Date().toISOString()
|
|
}
|
|
];
|
|
|
|
const handleDeleteService = (id: number) => {
|
|
if (!confirm('Are you sure you want to delete this service?')) {
|
|
return;
|
|
}
|
|
// Note: This is a demo - in a real app, you'd handle deletion differently
|
|
console.log('Service deletion requested for ID:', id);
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="container py-5">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<h2 className="mb-4">Our Services</h2>
|
|
<div className="row">
|
|
{services.map((service) => (
|
|
<div key={service.id} className="col-md-6 col-lg-4 mb-4">
|
|
<div className="card h-100">
|
|
<div className="card-body">
|
|
<div className="d-flex justify-content-between align-items-start mb-3">
|
|
<h5 className="card-title">{service.title}</h5>
|
|
{service.featured && (
|
|
<span className="badge bg-primary">Featured</span>
|
|
)}
|
|
</div>
|
|
<p className="card-text">{service.description}</p>
|
|
<div className="mt-auto">
|
|
<a
|
|
href={`/services/${service.slug}`}
|
|
className="btn btn-primary me-2"
|
|
>
|
|
Learn More
|
|
</a>
|
|
<button
|
|
className="btn btn-outline-danger btn-sm"
|
|
onClick={() => handleDeleteService(service.id)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|