arsam/CShare
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Import source: cshare-app/src/pages/ContactPage

Browse Source 
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
2026-09-18 23:14:44 +03:30
parent b972376bf8
commit 536c9c6bce
1 changed files with 104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cshare-app/src/pages/ContactPage.jsx
+104
View File
@@ -0,0 +1,104 @@
import { useState } from 'react';
import { useToast } from '../components/ToastContext';
export default function ContactPage() {
const addToast = useToast();
const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
const [sending, setSending] = useState(false);
const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
const submit = (e) => {
e.preventDefault();
if (!form.name || !form.email || !form.message) {
addToast('Please fill in all required fields', 'error');
return;
}
setSending(true);
setTimeout(() => {
setSending(false);
setForm({ name: '', email: '', subject: '', message: '' });
addToast("Message sent — we'll get back to you within 48 hours", 'success');
}, 1200);
};
return (
<div className="page-enter" style={{ minHeight: '100vh', maxWidth: '720px', margin: '0 auto', padding: 'clamp(64px, 10vh, 100px) 24px 80px' }}>
<div style={{ marginBottom: '48px' }}>
<div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '20px' }}>
<span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
<span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Contact</span>
</div>
<h1 className="heading-lg" style={{ marginBottom: '16px' }}>Get in touch.</h1>
<p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.7 }}>
Questions, feedback, bugs, partnership ideas — we read everything and reply within 48 hours.
</p>
</div>
<div className="contact-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: '40px', alignItems: 'start' }}>
<form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
<div className="contact-name-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
<div>
<label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
Name <span style={{ color: 'var(--accent)' }}>*</span>
</label>
<input className="input" placeholder="Your name" value={form.name} onChange={set('name')} />
</div>
<div>
<label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
Email <span style={{ color: 'var(--accent)' }}>*</span>
</label>
<input className="input" type="email" placeholder="you@example.com" value={form.email} onChange={set('email')} />
</div>
</div>
<div>
<label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>Subject</label>
<input className="input" placeholder="What's this about?" value={form.subject} onChange={set('subject')} />
</div>
<div>
<label style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '0.875rem', color: 'var(--text-secondary)', marginBottom: '8px' }}>
Message <span style={{ color: 'var(--accent)' }}>*</span>
</label>
<textarea
className="input"
placeholder="Tell us what's on your mind..."
value={form.message}
onChange={set('message')}
rows={6}
style={{ resize: 'vertical', lineHeight: 1.7 }}
/>
</div>
<button type="submit" className="btn btn-primary btn-lg" disabled={sending} style={{ alignSelf: 'flex-start' }}>
{sending ? (
<>
<span style={{ width: '16px', height: '16px', border: '2px solid rgba(255,255,255,0.3)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.6s linear infinite', display: 'inline-block' }} />
Sending…
</>
) : 'Send message'}
</button>
</form>
{/* Contact info sidebar */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
{[
{ label: 'General', value: 'hello@cshare.app' },
{ label: 'Support', value: 'support@cshare.app' },
{ label: 'Security', value: 'security@cshare.app' },
].map(({ label, value }) => (
<div key={label} className="card" style={{ padding: '16px 20px' }}>
<div style={{ fontSize: '0.6875rem', fontFamily: 'var(--font-heading)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '4px' }}>{label}</div>
<div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--accent)' }}>{value}</div>
</div>
))}
<div className="card" style={{ padding: '16px 20px' }}>
<div style={{ fontSize: '0.6875rem', fontFamily: 'var(--font-heading)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: '4px' }}>Response time</div>
<div style={{ fontFamily: 'var(--font-body)', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>Within 48 hours</div>
</div>
</div>
</div>
</div>
);
}