privacy policy
This commit was merged in pull request #208.
This commit is contained in:
@@ -1,56 +1,20 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import cover from "../../assets/images/profile-info-cover.png";
|
||||
import profile from "../../assets/images/profile-info-profile.png";
|
||||
|
||||
import Icons from "../Helpers/Icons";
|
||||
import Layout from "../Partials/Layout";
|
||||
import ChangePasswordTab from "./Tabs/ChangePasswordTab";
|
||||
import FaqTab from "./Tabs/FaqTab";
|
||||
import LoginActivityTab from "./Tabs/LoginActivityTab";
|
||||
import NotificationSettingTab from "./Tabs/NotificationSettingTab";
|
||||
import PaymentMathodsTab from "./Tabs/PaymentMathodsTab";
|
||||
import PersonalInfoTab from "./Tabs/PersonalInfoTab";
|
||||
import TermsConditionTab from "./Tabs/TermsConditionTab";
|
||||
import {
|
||||
ChangePasswordTab,
|
||||
FaqTab,
|
||||
LoginActivityTab,
|
||||
NotificationSettingTab,
|
||||
PaymentMathodsTab,
|
||||
PersonalInfoTab,
|
||||
PrivacyPolicyTab,
|
||||
TermsConditionTab,
|
||||
} from "./Tabs";
|
||||
|
||||
export default function Settings({faq}) {
|
||||
const tabs = [
|
||||
{
|
||||
id: 1,
|
||||
name: "personal",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "payment",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "notification",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "login_activity",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "password",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "faq",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "privacy",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "terms",
|
||||
},
|
||||
];
|
||||
const [tab, setTab] = useState(tabs[0].name);
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
export default function Settings({ faq }) {
|
||||
const [profileImg, setProfileImg] = useState(profile);
|
||||
const [coverImg, setCoverImg] = useState(cover);
|
||||
|
||||
@@ -83,6 +47,62 @@ export default function Settings({faq}) {
|
||||
}
|
||||
};
|
||||
|
||||
// Tabs Handling
|
||||
const tabs = [
|
||||
{
|
||||
id: 1,
|
||||
name: "personal",
|
||||
title: "Edit Profile",
|
||||
iconName: "people-hover",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "payment",
|
||||
title: "Payment Method",
|
||||
iconName: "bank-card",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "notification",
|
||||
title: "Notification Setting",
|
||||
iconName: "notification-setting",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "login_activity",
|
||||
title: "Login Activity",
|
||||
iconName: "login-activity",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "password",
|
||||
title: "Change Password",
|
||||
iconName: "password-hover",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "faq",
|
||||
title: "FAQ",
|
||||
iconName: "block-question",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "privacy",
|
||||
title: "Privacy Policy",
|
||||
iconName: "page-right",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "terms",
|
||||
title: "Terms and Conditions",
|
||||
iconName: "page-right",
|
||||
},
|
||||
];
|
||||
const [tab, setTab] = useState(tabs[0].name);
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
@@ -97,136 +117,28 @@ export default function Settings({faq}) {
|
||||
<div className="content-container w-full pt-10 rounded-2xl bg-white dark:bg-dark-white ">
|
||||
<div className="content-heading w-full mb-8 lg:px-10 px-4">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white antialiased">
|
||||
Parsonal Informaiton
|
||||
Personal Information
|
||||
</h1>
|
||||
</div>
|
||||
<div className="content-body w-full lg:flex lg:px-10 px-4">
|
||||
<div className="content-tab-items lg:w-[230px] w-full mr-2">
|
||||
<ul className="overflow-hidden mb-10 lg:mb-0">
|
||||
<li
|
||||
onClick={() => tabHandler("personal")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "personal"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="people-hover" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">Edit Profile</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("payment")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "payment"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="bank-card" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">Payment Method</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("notification")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "notification"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="notification-setting" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">
|
||||
Notifiction Setting
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("login_activity")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "login_activity"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="login-activity" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">Login Activity</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("password")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "password"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="password-hover" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">Change Password</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("faq")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "faq" ? "text-purple" : " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="block-question" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">FAQ</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("terms")}
|
||||
{tabs.map(({ name, id, title, iconName }) => (
|
||||
<li
|
||||
onClick={() => tabHandler(name)}
|
||||
key={id}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "privacy"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
tab === name ? "text-purple" : " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="page-right" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">
|
||||
Privacy Policy
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => tabHandler("terms")}
|
||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||
tab === "terms"
|
||||
? "text-purple"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Icons name="page-right" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">
|
||||
Terms and Conditions
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
>
|
||||
<div>
|
||||
<Icons name={iconName} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-18 tracking-wide">{title}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533] mr-10"></div>
|
||||
@@ -258,6 +170,7 @@ export default function Settings({faq}) {
|
||||
{tab === "login_activity" && <LoginActivityTab />}
|
||||
{tab === "password" && <ChangePasswordTab />}
|
||||
{tab === "faq" && <FaqTab datas={faq} />}
|
||||
{tab === "privacy" && <PrivacyPolicyTab />}
|
||||
{tab === "terms" && <TermsConditionTab />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user