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.
 
 
 

107 lines
3.8 KiB

import React from "react";
import { connect } from "react-redux";
import { blog } from "../../../redux/actions";
//assets
import picImage from "../pic.svg";
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
src={picImage}
alt=""
style={{
height: isMobile ? "calc(100vw / 2.5)" : "115%",
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"
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"
}
type="submit"
>
عضویت
</button>
</form>
</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-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>
</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"
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}
>
عضویت
</button>
</form>
</div>
)}
</div>
);
};
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
userId: state.user.status?.id,
});
const mapDispatchToProps = {
join: blog.letterAdd,
};
export default connect(mapStateToProps, mapDispatchToProps)(Join);