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.
|
|
import React from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
//assets |
|
|
import iosImage from "./assets/ios.svg"; |
|
|
import androidImage from "./assets/android.svg"; |
|
|
import pwaImage from "./assets/pwa.svg"; |
|
|
|
|
|
export const CrossPlatform = ({}) => { |
|
|
const links = React.useMemo(() => { |
|
|
return [ |
|
|
{ |
|
|
link: "/android", |
|
|
image: androidImage, |
|
|
width: "calc(14.43vw)", |
|
|
height: "calc(14.43vw * 0.4379)", |
|
|
}, |
|
|
{ |
|
|
link: "/ios", |
|
|
image: iosImage, |
|
|
width: "calc(14.43vw * 0.8148)", |
|
|
height: "calc(14.43vw * 0.2554)", |
|
|
}, |
|
|
{ |
|
|
link: "/pwa", |
|
|
image: pwaImage, |
|
|
width: "calc(14.43vw * 0.8759)", |
|
|
height: "calc(14.43vw * 0.2919)", |
|
|
}, |
|
|
]; |
|
|
}); |
|
|
|
|
|
return ( |
|
|
<div |
|
|
className="w-10/12 flex items-center justify-between my-28" |
|
|
> |
|
|
<div className="flex flex-col"> |
|
|
<strong className="text-primary-3 font-6 text-5x"> |
|
|
قابل استفاده برای{" "} |
|
|
</strong> |
|
|
<strong className="text-primary-6 font-6 text-2x my-2"> |
|
|
گوشیهای اندرویدی و آی او اس و PWA |
|
|
</strong> |
|
|
</div> |
|
|
|
|
|
<div className="flex gap-4 items-center"> |
|
|
{links.map((link, index) => ( |
|
|
<a href={link.link} download> |
|
|
<img |
|
|
src={link.image} |
|
|
alt={link} |
|
|
key={index} |
|
|
style={{ |
|
|
width: link.width, |
|
|
height: link.height, |
|
|
}} |
|
|
/> |
|
|
</a> |
|
|
))} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({}); |
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CrossPlatform);
|
|
|
|