88 lines
4.4 KiB
TypeScript
88 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useContext } from 'react';
|
|
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { Button } from 'primereact/button';
|
|
import { classNames } from 'primereact/utils';
|
|
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
|
|
|
function Contact() {
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [content] = useState([
|
|
{ icon: 'pi pi-fw pi-phone', title: 'Phone', info: '1 (833) 597-7538' },
|
|
{
|
|
icon: 'pi pi-fw pi-map-marker',
|
|
title: 'Our Head Office',
|
|
info: 'Churchill-laan 16 II, 1052 CD, Amsterdam'
|
|
},
|
|
{ icon: 'pi pi-fw pi-print', title: 'Fax', info: '3 (833) 297-1548' }
|
|
]);
|
|
|
|
const { layoutConfig } = useContext(LayoutContext);
|
|
return (
|
|
<div className="grid card grid-nogutter" style={{ columnGap: '2rem', rowGap: '2rem' }}>
|
|
<div className="col-12">
|
|
<p className="text-900 font-bold">Contact Us</p>
|
|
</div>
|
|
<div
|
|
className="col-12 mt-3 h-20rem border-1 surface-border p-0 w-full bg-cover border-round"
|
|
style={{
|
|
backgroundImage: `url('/demo/images/contact/map-${layoutConfig.colorScheme === 'light' ? 'light' : 'dark'}.svg')`
|
|
}}
|
|
></div>
|
|
<div className="col-12 mt-5">
|
|
<div className="grid grid-nogutter px-2 flex-column md:flex-row" style={{ columnGap: '2rem', rowGap: '2rem' }}>
|
|
{content.map((item, i) => {
|
|
return (
|
|
<div key={i} className="col flex flex-column justify-content-center text-center align-items-center border-1 surface-border py-5 px-4 border-round">
|
|
<i className={classNames('pi pi-fw text-2xl text-primary', item.icon)}></i>
|
|
<span className="text-900 font-bold mt-4 mb-1">{item.title}</span>
|
|
<span className="text-500">{item.info}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 mt-5">
|
|
<p className="text-900 font-bold">Send Us Email</p>
|
|
<div className="grid flex-column md:flex-row formgrid grid-nogutter mt-6" style={{ rowGap: '2rem', columnGap: '2rem' }}>
|
|
<div className="field col">
|
|
<label htmlFor="name" className="block text-indigo-300 font-bold">
|
|
Name
|
|
</label>
|
|
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
|
|
<i className="pi pi-user" style={{ left: '1.5rem' }}></i>
|
|
<InputText id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="field col">
|
|
<label htmlFor="email" className="block text-indigo-300 font-bold">
|
|
Email Address
|
|
</label>
|
|
<span className="p-input-icon-left w-full" style={{ height: '3.5rem' }}>
|
|
<i className="pi pi-envelope" style={{ left: '1.5rem' }}></i>
|
|
<InputText type="text" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" className="w-full px-7 text-900 font-semibold" style={{ height: '3.5rem' }} />
|
|
</span>
|
|
</div>
|
|
|
|
<div className="field col-12 flex flex-column">
|
|
<label htmlFor="message" className="block text-indigo-300 font-bold">
|
|
Message
|
|
</label>
|
|
<InputTextarea className="w-full surface-border p-4 text-900 font-semibold border-round" id="message" rows={5} cols={30} value={message} onChange={(event) => setMessage(event.target.value)} />
|
|
<Button className=" ml-auto mt-3 border-round" label="Send Message"></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Contact;
|