GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
137
gnx-react/components/examples/ContactForm.tsx
Normal file
137
gnx-react/components/examples/ContactForm.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ContactForm() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
setSuccess(true);
|
||||
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="alert alert-success" role="alert">
|
||||
<h4 className="alert-heading">Message Sent!</h4>
|
||||
<p>Thank you for your message. We'll get back to you soon.</p>
|
||||
<button
|
||||
className="btn btn-outline-success"
|
||||
onClick={() => setSuccess(false)}
|
||||
>
|
||||
Send Another Message
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container py-5">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-8">
|
||||
<h2 className="text-center mb-4">Contact Us</h2>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="row">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label htmlFor="name" className="form-label">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label htmlFor="email" className="form-label">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="subject" className="form-label">Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="message" className="form-label">Message *</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="message"
|
||||
name="message"
|
||||
rows={5}
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-lg"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status"></span>
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
'Send Message'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
89
gnx-react/components/examples/ServicesList.tsx
Normal file
89
gnx-react/components/examples/ServicesList.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user