include contact details in .env

This commit is contained in:
2024-05-07 14:33:46 +01:00
parent 6bd533c7ca
commit b4bf96e841
4 changed files with 444 additions and 323 deletions
+48 -36
View File
@@ -1,26 +1,27 @@
import { useState } from "react";
import { Link, useLocation } from "react-router-dom";
import Logo from "../../assets/icons/logo.svg";
import { Icons } from "../../components";
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Logo from '../../assets/icons/logo.svg';
import { Icons } from '../../components';
import { contactDetails } from '../../utils/data';
type Props = {
asideDisplay?: () => void;
logoutUser: () => void
logoutUser: () => void;
};
export default function Aside({ asideDisplay, logoutUser }: Props) {
const { pathname } = useLocation();
const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
{ name: "" }
{ name: '' }
);
const handleOpenNestedLink = (e: any) => {
if (!e || !e.target) {
return setOpenNestedLink({ name: "" });
return setOpenNestedLink({ name: '' });
}
if (openNestedLink.name && openNestedLink.name == e.target.name) {
setOpenNestedLink({ name: "" });
setOpenNestedLink({ name: '' });
} else {
setOpenNestedLink({ name: e.target.name });
}
@@ -45,8 +46,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
onClick={(e) => handleOpenNestedLink(e)}
className={`py-2 pl-2 text-left relative w-full overflow-hidden rounded-lg flex justify-between items-center z-10 bg-inherit ${
allNestedLinks.includes(pathname)
? " text-[#5C2684]"
: " text-[#585858]"
? ' text-[#5C2684]'
: ' text-[#585858]'
}`}
>
{link.name}
@@ -60,8 +61,8 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
<div
className={`transition-all duration-300 w-full z-1 ${
openNestedLink.name == link.name
? "relative top-0"
: "absolute -top-[500px]"
? 'relative top-0'
: 'absolute -top-[500px]'
}`}
>
{link.nestedLink.map((nextLink, index) => (
@@ -70,17 +71,17 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
asideDisplay && asideDisplay();
}}
key={index}
to={nextLink.link ? nextLink.link : "#"}
to={nextLink.link ? nextLink.link : '#'}
className={`w-full my-1 flex items-center gap-2 py-2 pl-5 text-base font-medium ${
pathname == nextLink.link
? " text-[#5C2684]"
: "text-[#585858]"
? ' text-[#5C2684]'
: 'text-[#585858]'
}`}
>
<Icons
name={nextLink.icon}
fillColor={`${
pathname == nextLink.link ? "#5C2684" : "#585858"
pathname == nextLink.link ? '#5C2684' : '#585858'
}`}
/>
{nextLink.name}
@@ -96,14 +97,14 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
asideDisplay && asideDisplay();
}}
key={index}
to={link.link ? link.link : "#"}
to={link.link ? link.link : '#'}
className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${
pathname == link.link ? "text-[#5C2684]" : "text-[#585858]"
pathname == link.link ? 'text-[#5C2684]' : 'text-[#585858]'
}`}
>
<Icons
name={link.icon}
fillColor={`${pathname == link.link ? "#5C2684" : "#585858"}`}
fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`}
/>
{link.name}
</Link>
@@ -119,19 +120,25 @@ export default function Aside({ asideDisplay, logoutUser }: Props) {
Log out
</button>
<div className="flex flex-col gap-[.4375rem] text-[.75rem]">
<p className="font-extrabold tracking-[3%] text-[#FBB700] underline">
For more enquiries and support
</p>
<p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
{/* <p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
Call: 09099000000
</p>
<p className="font-extrabold tracking-[3%] text-[#5A5A5A]">
Email: fcmbloan@support.com
</p>
</p> */}
{contactDetails.map(({ name, value }) => (
<p
key={name}
className="font-extrabold tracking-[3%] text-[#5A5A5A]"
>
{name}: {value}
</p>
))}
</div>
</div>
</div>
);
@@ -149,29 +156,34 @@ type AsideLinksType = {
}[];
const asideLinks: AsideLinksType = [
{ name: "Dashboard", link: "/dashboard/home", icon: "dash-icon", nestedLink: [] },
{
name: "Your Profile",
link: "/dashboard/profile",
icon: "dash-icon",
name: 'Dashboard',
link: '/dashboard/home',
icon: 'dash-icon',
nestedLink: [],
},
{
name: "Employment Details",
link: "/dashboard/verification",
icon: "dash-icon",
name: 'Your Profile',
link: '/dashboard/profile',
icon: 'dash-icon',
nestedLink: [],
},
{
name: "Reference Details",
link: "/dashboard/payments",
icon: "dash-icon",
name: 'Employment Details',
link: '/dashboard/verification',
icon: 'dash-icon',
nestedLink: [],
},
{
name: "Agreements",
link: "/dashboard/legals",
icon: "dash-icon",
name: 'Reference Details',
link: '/dashboard/payments',
icon: 'dash-icon',
nestedLink: [],
},
{
name: 'Agreements',
link: '/dashboard/legals',
icon: 'dash-icon',
nestedLink: [],
},
// {name: 'Nested Link', icon: 'home', nestedLink:[