|
|
|
@ -1,10 +1,17 @@ |
|
|
|
|
import React from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
import { blog } from "../../../redux/actions"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import picImage from "../pic.svg"; |
|
|
|
|
|
|
|
|
|
export const Join = ({ isMobile }) => { |
|
|
|
|
export const Join = ({ isMobile, join, userId }) => { |
|
|
|
|
const [email, setEmail] = React.useState(""); |
|
|
|
|
|
|
|
|
|
const submit = (e) => { |
|
|
|
|
e.preventDefault(); |
|
|
|
|
userId ? join({ userId, email }) : join({ email }); |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<div className="w-full lg:h-72 border-2 px-3 lg:p-0 py-4 border-solid border-gray-200 dark:border-opacity-30 rounded-md flex lg:flex-row flex-col-reverse mt-7 lg:mt-32"> |
|
|
|
|
<img |
|
|
|
@ -12,22 +19,29 @@ export const Join = ({ isMobile }) => { |
|
|
|
|
alt="" |
|
|
|
|
style={{ |
|
|
|
|
height: isMobile ? "calc(100vw / 2.5)" : "115%", |
|
|
|
|
transform: isMobile ? "translateY(15%) translateX(25%)" : "translateY(-15%)", |
|
|
|
|
transform: isMobile |
|
|
|
|
? "translateY(15%) translateX(25%)" |
|
|
|
|
: "translateY(-15%)", |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
{isMobile && ( |
|
|
|
|
<div className="flex lg:hidden flex-col flex-1 h-full justify-center items-center"> |
|
|
|
|
<form className="flex flex-col w-full rounded-md mt-3 overflow-hidden"> |
|
|
|
|
<form |
|
|
|
|
className="flex flex-col w-full rounded-md mt-3 overflow-hidden" |
|
|
|
|
onSubmit={(e) => submit(e)} |
|
|
|
|
> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="flex-1 text-center py-3 mb-4 font-normal text-tiny dark:bg-transparent placeholder:text-blue5F dark:text-white border border-gray-300 border-solid outline-none" |
|
|
|
|
placeholder={"آدرس ایمیل شما"} |
|
|
|
|
value={email} |
|
|
|
|
onChange={(e) => setEmail(e.target.value)} |
|
|
|
|
/> |
|
|
|
|
<button |
|
|
|
|
className={ |
|
|
|
|
"py-3 w-full text-base bg-yellow4 text-black border-none" |
|
|
|
|
} |
|
|
|
|
// onClick={setOff}
|
|
|
|
|
type="submit" |
|
|
|
|
> |
|
|
|
|
عضویت |
|
|
|
|
</button> |
|
|
|
@ -35,30 +49,41 @@ export const Join = ({ isMobile }) => { |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
<div className="flex flex-col justify-center h-full my-4 lg:my-0 lg:mr-4"> |
|
|
|
|
<strong className="text-base lg:text-2xl bold dark:text-gray-200">اینجا خبری از اسپم نیست!</strong> |
|
|
|
|
<strong className="text-base lg:text-2xl bold dark:text-gray-200"> |
|
|
|
|
اینجا خبری از اسپم نیست! |
|
|
|
|
</strong> |
|
|
|
|
<strong |
|
|
|
|
className="text-xl lg:text-7xl bold my-4 text-red-600" |
|
|
|
|
style={{ fontSize: "clamp(30px, calc(100vw / 35), 45px)" }} |
|
|
|
|
> |
|
|
|
|
خبرنامه وبلاگ دانوین |
|
|
|
|
</strong> |
|
|
|
|
<p className="text-tiny lg:text-tiny leading-5 lg:leading-7 text-gray70 dark:text-gray-200" style={{ maxWidth: 400 }}> |
|
|
|
|
<p |
|
|
|
|
className="text-tiny lg:text-tiny leading-5 lg:leading-7 text-gray70 dark:text-gray-200" |
|
|
|
|
style={{ maxWidth: 400 }} |
|
|
|
|
> |
|
|
|
|
بهترین و آخرین اخبار علمی و آموزشی را در ایمیل خودتون دریافت کنید. هر |
|
|
|
|
زمان هم که لازم نداشتید می تونید عضویت رو لغو کنید |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
{!isMobile && ( |
|
|
|
|
<div className="hidden lg:flex flex-col flex-1 h-full justify-center items-center"> |
|
|
|
|
<form className="flex w-full flex-row-reverse rounded-md mt-3 overflow-hidden lg:w-11/12"> |
|
|
|
|
<form |
|
|
|
|
className="flex w-full flex-row-reverse rounded-md mt-3 overflow-hidden lg:w-11/12" |
|
|
|
|
onSubmit={(e) => submit(e)} |
|
|
|
|
> |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="flex-1 text-left pl-6 font-normal text-tiny dark:bg-gray2077 placeholder:text-blue5F dark:text-white border-t border-b border-l border-gray-300 border-solid outline-none lg:text-base" |
|
|
|
|
placeholder={"آدرس ایمیل شما"} |
|
|
|
|
value={email} |
|
|
|
|
onChange={(e) => setEmail(e.target.value)} |
|
|
|
|
/> |
|
|
|
|
<button |
|
|
|
|
className={ |
|
|
|
|
"py-3 w-3/12 lg:py-6 text-lg bg-yellow4 text-black border-none lg:font-semibold" |
|
|
|
|
} |
|
|
|
|
type="submit" |
|
|
|
|
// onClick={setOff}
|
|
|
|
|
> |
|
|
|
|
عضویت |
|
|
|
@ -72,8 +97,11 @@ export const Join = ({ isMobile }) => { |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
isMobile: state.publicApi.isMobile, |
|
|
|
|
userId: state.user.status?.id, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
join: blog.letterAdd, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Join); |
|
|
|
|