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.
 
 
 

77 lines
2.4 KiB

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);