GNXSOFT.COM

gnx-react/components/examples/ServicesList.tsx

@@ -0,0 +1,89 @@
+'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>
+                    {service.price && (
+                      <p className="text-muted">
+                        <strong>Starting at: ${service.price}</strong>
+                      </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>
+  );
+}