|
|
import React from "react"; |
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
export const Panel = ({ isDesktop }) => { |
|
|
const items = React.useMemo(() => { |
|
|
return [ |
|
|
{ |
|
|
title: "آمار بازدید و تعامل", |
|
|
color: "text-secondary-3", |
|
|
}, |
|
|
{ |
|
|
title: "مدیریت آسان منابع مصرفی", |
|
|
color: "text-secondary-1", |
|
|
}, |
|
|
{ |
|
|
title: "مدیریت پیشرفته کاربران", |
|
|
color: "text-dark-1", |
|
|
}, |
|
|
{ |
|
|
title: "احراز هویت پیامکی", |
|
|
color: "text-secondary-2", |
|
|
}, |
|
|
]; |
|
|
}, [isDesktop]); |
|
|
|
|
|
return ( |
|
|
<div |
|
|
className="w-10/12 flex items-center justify-between" |
|
|
style={{ height: "calc(100vh / 2)" }} |
|
|
> |
|
|
<div className="flex flex-col"> |
|
|
<strong className="text-primary-3 font-6 text-5x"> |
|
|
پنل مدیریتی |
|
|
<br /> فوق پیشرفته و فضایی |
|
|
</strong> |
|
|
<strong className="text-primary-6 font-6 text-2x my-2"> |
|
|
تنها پنل مدیریتی که بدرد شما میخورد |
|
|
</strong> |
|
|
<p className="text-primary-1 text-6xl font-4 text-2x"> |
|
|
برای یک مدیر ابزار و منابع مدیریتی یکی |
|
|
<br /> از مهمترین مسائل و مخاطرات است |
|
|
<br /> با استفاده از پنل پیشرفته داستان بازی |
|
|
<br /> همه چیز در کنترل شماست |
|
|
</p> |
|
|
</div> |
|
|
<div |
|
|
className="flex flex-col justify-center bg-dark-2 w-1/2 rounded-md" |
|
|
style={{ |
|
|
height: "calc((100vw - 16vw) / 2 * 9 /16)", |
|
|
width: "calc((100vw - 16vw) / 2)", |
|
|
}} |
|
|
> |
|
|
<ul className="flex flex-col w-full h-4/5 justify-around"> |
|
|
{items.map((item, index) => ( |
|
|
<li |
|
|
className={`bg-secondary-8 p-2 rounded-md flex items-center text-1x text-white transform ${ |
|
|
index === 1 ? "translate-x-1/2" : "translate-x-1/3" |
|
|
}`} |
|
|
style={{ maxWidth: "calc((100vw - 16vw) / 2 / 2.8)" }} |
|
|
> |
|
|
<span className={`${item.color} ml-2`}>#</span> |
|
|
{item.title} |
|
|
</li> |
|
|
))} |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
}; |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isDesktop: state.developer.device === "desktop", |
|
|
}); |
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Panel);
|
|
|
|