You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

199 lines
9.5 KiB

import React, { useState } from "react";
import Button from "../../components/Button";
import Input from "../../components/input";
import Map from '../../components/Map'
import { connect } from "react-redux";
const ContactUs = ({isMobile}) => {
const departments = [
{
title: 'انتخاب دپارتمان'
},
{
title: 'انتخاب دپارتمان'
},
{
title: 'انتخاب دپارتمان'
},
{
title: 'انتخاب دپارتمان'
},
{
title: 'انتخاب دپارتمان'
},
{
title: 'انتخاب دپارتمان'
},
]
const [phase, setPhase] = useState(1);
return (
isMobile ?
<div className="w-full flex flex-col py-20 px-4 pb-40">
<h1 className="w-full text-right text-red52 font-bold">تماس با ما</h1>
<div className="flex w-full rtl mt-4 justify-between py-1 bg-gray-100 border border-gray-300 rounded-xl">
<button className={`w-1/2 rounded-xl mx-1 h-12 ${phase == 1 ? 'bg-red5B font-bold text-white' : 'text-red5B'}`}
onClick={() => setPhase(1)}
>
فرم تماس با ما
</button>
<button className={`w-1/2 rounded-xl mx-1 font-bold h-12 ${phase == 2 ? 'bg-red5B text-white' : 'text-red5B'}`}
onClick={() => setPhase(2)}
>
اطلاعات تماس
</button>
</div>
{
phase == 1 ?
<div className="w-full rtl">
<form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%', background: 'rgba(249, 249, 249, 0.75)' }} type="email" onChange={(e) => {
let value = e.target.value
value = value.replace(/[^A-Za-z]/ig, '')
this.setState({
value,
})
}}/>
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<textarea className="w-full border-gray-200 border p-3 rounded-lg text-gray-400 outline-red52" rows='7' cols='70' placeholder="متن پیام را اینجا تایپ کنید">
</textarea>
<div className="w-full flex" style={{direction: 'ltr'}}>
<Button title='ارسال پیام' className='w-full'/>
</div>
</form>
</div>
:
<div className="flex flex-col w-full rtl mr-32 mt-4">
<div className="w-full rounded-xl overflow-hidden my-4 " style={{height:'215px'}}>
<Map />
</div>
<div className="flex w-full text-right flex-col mb-4 items-start">
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black">آدرس ما</h1>
<p className="text-gray-400 text-sm">تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2</p>
</div>
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black">شماره تماس</h1>
<p className="text-gray-400 text-sm"> 02163462405 - 02163462406 </p>
</div>
<div className="w-full p-2 border-b border-gray-200">
<h1 className="text-red52 text-md p-1 pr-0 font-black"> ایمیل سازمانی </h1>
<p className="text-gray-400 text-sm">Info@Azmoonsample.ir</p>
</div>
<div className="w-full p-2 ">
<h1 className="text-red52 text-md p-1 pr-0 font-black"> شماره پیامک </h1>
<p className="text-gray-400 text-sm">300000000008762144</p>
<p className="text-gray-400 text-sm">توجه داشته باشید تمامی پیامک ها از سامانه آزمون از طریق همین سرشماره برای شما ارسال خواهد شد</p>
</div>
</div>
</div>
}
</div>
:
<div className=" w-full text-right" style={{ direction: 'rtl', marginTop: '6.5%', paddingRight: '8.5%' }}>
<h1 className="w-2/3 border-b border-gray-300 text-3xl font-bold text-red52 py-4">تماس با ما</h1>
<div className="flex ">
<div className="w-1/3">
<form className="flex flex-col w-full">
<Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
<Input title='ایمیل' type={'email'} gapSize='8' id={1} style={{ width: '100%' }} onChange={(e) => {
let value = e.target.value
value = value.replace(/[^A-Za-z]/ig, '')
this.setState({
value,
})
}} />
<select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<select className="bg-white border border-solid border-gray-200 w-full my-4 mt-0 p-3 rounded-lg text-gray-400 outline-red52">
<option>انتخاب محصول / خدمات</option>
{departments.map((item, index) => (
<option key={`Grade__${index}`}>{item.title}</option>
))}
</select>
<textarea className="w-full border-gray-200 border p-3 rounded-lg text-gray-400 outline-red52" rows='7' cols='70' placeholder="متن پیام را اینجا تایپ کنید">
</textarea>
<div className="w-full flex" style={{direction: 'ltr'}}>
<Button title='ارسال پیام' className='w-32'/>
</div>
</form>
</div>
<div className="flex flex-col w-1/3 mr-32 mt-4">
<div className="flex w-full justify-between mb-4 items-start">
<div className="w-1/2 p-2">
<h1 className="text-red52 text-xl p-1 pr-0 font-black">آدرس ما</h1>
<p className="text-gray-400 text-sm">تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2</p>
</div>
<div className="w-1/2 p-2">
<h1 className="text-red52 text-xl p-1 pr-0 font-black">شماره تماس</h1>
<p className="text-gray-400 text-sm"> 02163462405 - 02163462406 </p>
</div>
</div>
<div className="w-full flex justify-between mb-4 items-start">
<div className="w-1/2 p-2">
<h1 className="text-red52 text-xl p-1 pr-0 font-black"> شماره پیامک </h1>
<p className="text-gray-400 text-sm">300000000008762144</p>
<p className="text-gray-400 text-sm">توجه داشته باشید تمامی پیامک ها از سامانه آزمون از طریق همین سرشماره برای شما ارسال خواهد شد</p>
</div>
<div className="w-1/2 p-2">
<h1 className="text-red52 text-xl p-1 pr-0 font-black"> ایمیل سازمانی </h1>
<p className="text-gray-400 text-sm">Info@Azmoonsample.ir</p>
</div>
</div>
<div className="w-full border-t border-gray-300"></div>
<div className="w-full rounded-xl overflow-hidden my-4 " style={{height:'215px'}}>
<Map />
</div>
</div>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
};
export default connect(mapStateToProps, mapDispatchToProps)(ContactUs);