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

Added routes and navbar

Browse Source
This commit was merged in pull request #2.
This commit is contained in:
Ebube
2024-03-05 15:57:26 +01:00
parent c43a21794f
commit 4e60c4b4c7
23 changed files with 2125 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1
View File
@@ -0,0 +1 @@
DIGIFI_PORT=5173
.env.production
+1
View File
@@ -0,0 +1 @@
DIGIFI_PORT=5173
package-lock.json
Generated
+1846 -69
View File
File diff suppressed because it is too large Load Diff
package.json
+14 -1
View File
@@ -10,8 +10,19 @@
"preview": "vite preview"
},
"dependencies": {
"@reduxjs/toolkit": "^2.2.1",
"clsx": "2.1.0",
"formik": "2.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "6.3.0",
"react-select": "^5.8.0",
"redux": "^4.2.0",
"slick-carousel": "^1.8.1",
"tailwind-merge": "^1.13.2",
"tailwindcss": "3.3.3",
"yup": "^1.0.0"
},
"devDependencies": {
"@types/react": "^18.2.56",
@@ -19,9 +30,11 @@
"@typescript-eslint/eslint-plugin": "^7.0.2",
"@typescript-eslint/parser": "^7.0.2",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.18",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
postcss.config.cjs
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
src/App.css
+11 -40
View File
@@ -1,42 +1,13 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
.btn-primary {
background: #5A2C82;
color: #FFFFFF;
padding: 6px 10px;
display: block;
text-decoration: none;
font-weight: 500;
cursor: pointer;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
.btn-active {
background: #D10056;
}
src/App.tsx
+5 -28
View File
@@ -1,35 +1,12 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Routers from "./router/Router";
import "./App.css";
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<Routers />
</>
)
);
}
export default App
export default App;
src/assets/icons/logo.svg
+9
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

src/assets/images/topbar_back.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/Header/Header.tsx
+83
View File
@@ -0,0 +1,83 @@
import React from "react";
import Logo from "../../assets/icons/logo.svg";
import Button from "../shared/Button";
import { lowerMenuItems } from "../../utils/data";
const Header = () => {
return (
<div className="relative my-2 items-center justify-center flex">
<div className="container px-8 flex justify-between">
<img src={Logo} alt="" />
{/* Right Part of the navbar */}
<div className="flex flex-col justify-between items-end">
<ul className={`flex gap-4 items-center`}>
<li>
<a href="#">
<Button className="btn-active" text="Open An Account" />
</a>
</li>
<li>
<a href="#">
<Button text="Internet Banking" />
</a>
</li>
<li>
<a href="#">
<Button text="Contact Us" />
</a>
</li>
<li>
<SearchInput />
</li>
</ul>
<ul className="flex gap-4 items-center">
{lowerMenuItems.map((item) => (
<li
key={item.id}
className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
>
{item.name}
</li>
))}
</ul>
</div>
</div>
</div>
);
};
export default Header;
const SearchInput = ({ value, onChange }) => {
return (
<div className="flex items-center border border-[#5A2C82] overflow-hidden">
<input
type="text"
value={value}
onChange={onChange}
className="py-[6px] px-[12px] w-full outline-none text-[#333] text-sm"
placeholder="Search..."
/>
<button
type="button"
className="flex items-center justify-center bg-transparent text-[#5A2C82] p-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</button>
</div>
);
};
src/components/Header/TopHeader.tsx
+22
View File
@@ -0,0 +1,22 @@
import { top_header_data } from "../../utils/data";
import styles from "./header.module.css";
const TopHeader = () => {
return (
<div className={styles.top_header}>
<div className="container flex justify-between w-full text-white font-medium">
<ul className="flex gap-8 items-center px-4">
{top_header_data.map(({ id, name }): {} => (
<li key={id}>{name}</li>
))}
</ul>
<div className="flex gap-2">
<p className="uppercase">Today's Share price:</p>
<span className="text-[#F8B51F]">$ 4.00</span>
</div>
</div>
</div>
);
};
export default TopHeader;
src/components/Header/header.module.css
+8
View File
@@ -0,0 +1,8 @@
.top_header{
background: url(../../assets/images/topbar_back.jpg) no-repeat;
background-size: cover;
height: 2.535rem;
display: flex;
align-items: center;
justify-content: center;
}
src/components/Header/index.ts
+4
View File
@@ -0,0 +1,4 @@
import TopHeader from "./TopHeader";
import Header from "./Header";
export { TopHeader, Header };
src/components/index.ts
+3
View File
@@ -0,0 +1,3 @@
import { Header } from "./Header";
export {Header}
src/components/shared/Button.tsx
+12
View File
@@ -0,0 +1,12 @@
import React from "react";
type ButtonProps = {
className?: string;
text: string;
};
const Button = ({ text, className }: ButtonProps) => {
return <button className={`btn-primary uppercase text-[13px] ${className}`}>{text}</button>;
};
export default Button;
src/index.css
+3 -68
View File
@@ -1,68 +1,3 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
src/main.tsx
+11 -8
View File
@@ -1,10 +1,13 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";
import "./index.css";
ReactDOM.createRoot(document.getElementById('root')!).render(
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
src/pages/HomePage.tsx
+13
View File
@@ -0,0 +1,13 @@
import React from 'react'
import { Header, TopHeader } from '../components/Header'
const HomePage = () => {
return (
<>
<TopHeader />
<Header />
</>
)
}
export default HomePage
src/pages/index.ts
+3
View File
@@ -0,0 +1,3 @@
import HomePage from "./HomePage";
export {HomePage}
src/router/Router.tsx
+13
View File
@@ -0,0 +1,13 @@
import { Route, Routes } from "react-router-dom";
import { RouteHandler } from "./routes";
import { HomePage } from "../pages";
const Routers = () => {
return (
<Routes>
<Route exact path={RouteHandler.homepage} element={<HomePage />} />
</Routes>
);
};
export default Routers;
src/router/routes.tsx
+3
View File
@@ -0,0 +1,3 @@
export class RouteHandler {
static homepage = "/"
}
src/utils/data.tsx
+39
View File
@@ -0,0 +1,39 @@
export const top_header_data = [
{ id: 1, name: "HOME" },
{ id: 2, name: "PERSONAL" },
{ id: 3, name: "BUSINESS" },
{ id: 4, name: "CORPORATE" },
];
export const lowerMenuItems = [
{
id: 1,
name: "PERSONAL BANKING",
linkPath: "/personal-banking",
},
{
id: 2,
name: "BUSINESS BANKING",
linkPath: "/business-banking",
},
{
id: 3,
name: "CORPORATE BANKING",
linkPath: "/corporate-banking",
},
{
id: 4,
name: "GROUP & SUBSIDIARIES",
linkPath: "",
},
{
id: 5,
name: "ABOUT US",
linkPath: "/about-us",
},
{
id: 6,
name: "MY BANK AND I",
linkPath: "",
},
];
tailwind.config.js
+15
View File
@@ -0,0 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {},
screens: {
xxs: "400px",
xxl: "1900px",
},
},
},
plugins: [],
};