DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

fix for production build

Browse Source
This commit was merged in pull request #18.
This commit is contained in:
Ebube
2024-03-18 12:31:17 +01:00
parent 37c012461f
commit f7ef9ff3a0
12 changed files with 204 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer/BottomFooterOne.tsx
+10
View File
@@ -0,0 +1,10 @@
const BottomFooterOne = () => {
return (
<footer className="pt-[1.25rem] pb-[1.875rem]">
<div className="containerMode flex flex-col"></div>
</footer>
)
}
export default BottomFooterOne
src/components/Footer/MidFooter.tsx
+1 -2
View File
@@ -1,11 +1,10 @@
import React from 'react'
import styles from "./footer.module.css" import styles from "./footer.module.css"
const MidFooter = () => { const MidFooter = () => {
return ( return (
<div className={`h-[2.3125rem] text-[1.25rem] ${styles.lower_footer}`}> <div className={`h-[2.3125rem] text-[1.25rem] ${styles.lower_footer}`}>
<div className="containerMode flex justify-end p-[.375rem] w-full text-white font-medium text-[.6875rem] md:text-[1.25rem]"> <div className="containerMode flex justify-end p-[.375rem] w-full text-white font-medium text-[.6875rem] md:text-[1.25rem]">
<div className="hidden sm:flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]"> <div className="flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
<p className="capitalize text-[20px] font-extralight">My Bank and I</p> <p className="capitalize text-[20px] font-extralight">My Bank and I</p>
</div> </div>
</div> </div>
src/components/Footer/TopFooterOne.tsx
+20 -4
View File
@@ -1,15 +1,31 @@
import { FC } from "react"; import { footerItems } from "../../utils/data";
import TopFooterOneMenu from "./TopFooterOneMenu"; import TopFooterOneMenu from "./TopFooterOneMenu";
const TopFooterOne = (): FC => { export interface TopFooterOneMenuProps {
category: string;
subItems: {
text: string;
href?: string;
}[];
}
const TopFooterOne = () => {
const footerListItems: TopFooterOneMenuProps[] = footerItems;
return ( return (
<footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5"> <footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5">
<div className="containerMode w-full flex flex-col gap-[1.875rem]"> <div className="containerMode w-full flex flex-col gap-[1.875rem]">
<h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default"> <h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default">
sitemap sitemap
</h4> </h4>
<div className="grid grid-cols-2 md:grid-cols-6"> <div className="grid grid-cols-2 md:grid-cols-6 gap-2 md:gap-0">
<TopFooterOneMenu /> {footerListItems.map(({ category, subItems }, index) => (
<TopFooterOneMenu
key={`${category}-${index}`}
category={category}
subItems={subItems}
/>
))}
</div> </div>
</div> </div>
</footer> </footer>
src/components/Footer/TopFooterOneMenu.tsx
+21 -22
View File
@@ -1,29 +1,28 @@
import { FC } from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { footerItems } from "../../utils/data"; import { TopFooterOneMenuProps } from "./TopFooterOne";
interface TopFooterOneMenuProps {
category: string;
subItems: {
text: string;
href?: string;
}[];
}
const TopFooterOneMenu = (): FC => { const TopFooterOneMenu: React.FC<TopFooterOneMenuProps> = ({
return footerItems.map( category,
({ category, subItems }): TopFooterOneMenuProps => ( subItems,
<ul className="flex gap-2 flex-col"> }) => {
<li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">{category}</li> return (
<ul className="flex flex-col gap-1"> <ul className="flex gap-2 flex-col">
{subItems.map(({ href, text }) => ( <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">
<Link to="#" className="text-[.6875rem] text-[#5e2785] hover:underline"> {category}
{text} </li>
</Link> <ul className="flex flex-col gap-1">
))} {subItems.map(({ href = "#", text }) => (
</ul> <li
key={text}
className="text-[.6875rem] text-[#5e2785] hover:underline"
>
{href ? <Link to={href}>{text}</Link> : <span>{text}</span>}
</li>
))}
</ul> </ul>
) </ul>
); );
}; };
src/components/GetStarted/BasicInfo.tsx
+58 -54
View File
@@ -1,7 +1,42 @@
import { FC } from "react"; import React, { useRef } from "react";
import { InputCompOne } from ".."; import InputCompOne from "../shared/InputCompOne";
interface Option {
value: string;
label: string;
}
const BasicInfo: React.FC = () => {
const inputRef = useRef<HTMLInputElement>(null);
// Array for marital status options
const maritalStatusOptions: Option[] = [
{ value: "", label: "Select" },
{ value: "single", label: "Single" },
{ value: "married", label: "Married" },
{ value: "divorced", label: "Divorced" },
{ value: "widowed", label: "Widowed" },
];
// Array for title options
const titleOptions: Option[] = [
{ value: "", label: "Select" },
{ value: "ms", label: "Ms" },
{ value: "mr", label: "Mr" },
{ value: "miss", label: "Miss" },
{ value: "mrs", label: "Mrs" },
];
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// Handle input value changes
console.log(e.target.value);
};
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
// Handle input events
console.log(e);
};
const BasicInfo = (): FC => {
return ( return (
<div className="mt-8"> <div className="mt-8">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
@@ -12,28 +47,11 @@ const BasicInfo = (): FC => {
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px]" selectClass="w-full h-[36px]"
selectOptions={[ selectOptions={titleOptions}
{ value=""
value: "", onChange={handleChange}
label: "Select", onInput={handleInput}
}, ref={inputRef}
{
value: "ms",
label: "Ms",
},
{
value: "mr",
label: "Mr",
},
{
value: "miss",
label: "Miss",
},
{
value: "mrs",
label: "Mrs",
},
]}
/> />
<InputCompOne <InputCompOne
label="Marital Status" label="Marital Status"
@@ -42,42 +60,24 @@ const BasicInfo = (): FC => {
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px]" selectClass="w-full h-[36px]"
selectOptions={[ selectOptions={maritalStatusOptions}
{ value=""
value: "", onChange={handleChange}
label: "Select", onInput={handleInput}
}, ref={inputRef}
{
value: "ms",
label: "Ms",
},
{
value: "mr",
label: "Mr",
},
{
value: "miss",
label: "Miss",
},
{
value: "mrs",
label: "Mrs",
},
]}
/> />
<InputCompOne <InputCompOne
label="Direct Sales Agent ID" label="Direct Sales Agent ID"
name="title" name="agentId"
parentInputClass="max-w-[224px] w-full" parentInputClass="max-w-[224px] w-full"
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
select select
selectClass="w-full h-[36px]" selectClass="w-full h-[36px]"
selectOptions={[ selectOptions={[{ value: "", label: "Select" }]}
{ value=""
value: "", onChange={handleChange}
label: "Select", onInput={handleInput}
}, ref={inputRef}
]}
/> />
<InputCompOne <InputCompOne
label="BVN" label="BVN"
@@ -89,6 +89,10 @@ const BasicInfo = (): FC => {
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]" labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
input input
inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]" inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
value=""
onChange={handleChange}
onInput={handleInput}
ref={inputRef}
/> />
</div> </div>
</div> </div>
src/components/GetStarted/GetStarted.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import { FC } from "react";
import BasicInfo from "./BasicInfo"; import BasicInfo from "./BasicInfo";
const GetStarted: FC = () => { const GetStarted = () => {
return ( return (
<div className="w-full flex items-center justify-center"> <div className="w-full flex items-center justify-center">
<div className="containerMode"> <div className="containerMode">
src/components/Header/Header.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { useState, ChangeEvent, FC } from "react"; import React, { useState, ChangeEvent } from "react";
import Logo from "../../assets/icons/logo.svg"; import Logo from "../../assets/icons/logo.svg";
import Button from "../shared/Button"; import Button from "../shared/Button";
import { lowerMenuItems } from "../../utils/data"; import { lowerMenuItems } from "../../utils/data";
@@ -15,7 +15,7 @@ type HiddenMenuItems = {
hideMenu?: boolean; hideMenu?: boolean;
}; };
const Header: FC<HiddenMenuItems> = ({ const Header: React.FC<HiddenMenuItems> = ({
hideSidebar = false, hideSidebar = false,
hideMenu = false, hideMenu = false,
}) => { }) => {
src/components/Home/Requirements/FeatureText.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import { FC } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { RouteHandler } from "../../../router/routes"; import { RouteHandler } from "../../../router/routes";
const FeatureText: FC = () => { const FeatureText = () => {
return ( return (
<div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col"> <div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col">
<div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem] cursor-default"> <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem] cursor-default">
src/components/shared/Button.tsx
+8 -6
View File
@@ -1,10 +1,12 @@
import { FC } from "react"; import React from "react";
type ButtonProps = {
className?: string;
text: string;
};
const Button = ({ text, className }: ButtonProps): FC => { interface ButtonProps {
text: string;
className?: string;
onClick?: () => void;
}
const Button: React.FC<ButtonProps> = ({ text, className }) => {
return ( return (
<button <button
className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`} className={`btn-primary uppercase text-[11px] lg:text-[13px] p-[6px] lg:px-[10px] ${className}`}
src/components/shared/InputCompOne.tsx
+78 -76
View File
@@ -1,93 +1,95 @@
import React from "react"; import React, { forwardRef } from "react";
interface InputCompOneProps { export interface InputCompOneProps {
label: string; label: string;
labelClass: string; labelClass: string;
labelSpan?: string;
labelSpanClass?: string;
placeholder?: string; placeholder?: string;
value: string; value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onInput?: (e: React.FormEvent<HTMLInputElement>) => void; onInput: (e: React.FormEvent<HTMLInputElement>) => void;
name: string; name: string;
tabIndex?: number; tabIndex?: number;
ref?: React.RefObject<HTMLInputElement>; ref?: React.RefObject<HTMLInputElement>;
selectValue?: string; selectValue?: string;
labelSpan?: string;
labelSpanClass?: string;
parentInputClass?: string;
inputClass?: string;
parentSelectClass?: string;
selectClass?: string;
input?: boolean; input?: boolean;
select?: boolean; select?: boolean;
inputType?: string;
selectOptions?: { value: string; label: string }[]; selectOptions?: { value: string; label: string }[];
icon?: string | React.ReactNode; // Type for the icon inputType?: string;
inputClass?: string;
parentInputClass?: string;
selectClass?: string;
parentSelectClass?: string;
} }
const InputCompOne: React.FC<InputCompOneProps> = ({ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
label, (
labelClass, {
labelSpan, label,
labelSpanClass, labelClass,
placeholder = "Placeholder", labelSpan,
value, labelSpanClass,
onChange, placeholder,
onInput, value,
name, onChange,
tabIndex, onInput,
ref, name,
selectValue, tabIndex,
input, selectValue,
select, input = true,
inputType = "text", select = false,
selectOptions, selectOptions = [],
icon, inputType = "text",
selectClass, inputClass,
inputClass, parentInputClass,
parentInputClass, selectClass,
parentSelectClass, parentSelectClass,
}) => { },
return ( forwardedRef
<div className={parentInputClass}> ) => {
{label && ( return (
<label htmlFor={name} className={`flex items-center ${labelClass}`}> <div>
{label} {label && (
{labelSpan && <span className={labelSpanClass}>{labelSpan}</span>} <label htmlFor="" className={labelClass}>
</label> {label}
)} {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
{input && ( </label>
<div className="flex items-center"> )}
<input {input && (
type={inputType} <div className={parentInputClass}>
placeholder={placeholder} <input
value={value} type={inputType}
onChange={onChange} placeholder={placeholder}
onInput={onInput} value={value}
name={name} onChange={onChange}
tabIndex={tabIndex} onInput={onInput}
ref={ref} name={name}
className={inputClass} tabIndex={tabIndex}
/> ref={forwardedRef}
{icon && ( className={inputClass}
<div className=""> />
{typeof icon === "string" ? <img src={icon} alt="icon" /> : icon} </div>
</div> )}
)} {select && (
</div> <div className={parentSelectClass}>
)} <select
{select && ( name={name}
<div className={parentSelectClass}> id=""
<select name={name} id="" value={selectValue} className={selectClass}> value={selectValue}
{selectOptions?.map((option) => ( className={selectClass}
<option key={option.value} value={option.value}> >
{option.label} {selectOptions.map(({ value, label }) => (
</option> <option key={value} value={value}>
))} {label}
</select> </option>
</div> ))}
)} </select>
</div> </div>
); )}
}; </div>
);
}
);
export default InputCompOne; export default InputCompOne;
src/pages/GetStartedPage.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { GetStarted as Main, Header, Footer } from "../components"; import { GetStarted as Main, Header, Footer } from "../components";
const GetStartedPage: React.FC = () => { const GetStartedPage :React.FC = () => {
return ( return (
<> <>
<Header hideSidebar={true} hideMenu={true} /> <Header hideSidebar={true} hideMenu={true} />
src/pages/HomePage.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { FC } from "react"; import React from "react";
import { import {
Hero, Hero,
Header, Header,
@@ -8,7 +8,7 @@ import {
MidFooter, MidFooter,
} from "../components"; } from "../components";
const HomePage: FC = () => { const HomePage: React.FC = () => {
return ( return (
<> <>
<TopHeader /> <TopHeader />
@@ -16,7 +16,7 @@ const HomePage: FC = () => {
<Hero /> <Hero />
<Requirements /> <Requirements />
<TopFooterOne /> <TopFooterOne />
<MidFooter /> <MidFooter />
</> </>
); );
}; };