@wecodesolutions/shared-react-components-ts 0.7.6 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type NavItem = {
|
|
3
|
+
label: string;
|
|
4
|
+
icon?: React.ReactNode;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
visible: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare type BottomNavBarProps = {
|
|
9
|
+
navItems: NavItem[];
|
|
10
|
+
};
|
|
11
|
+
export declare const BottomNavBar: React.FC<BottomNavBarProps>;
|
|
12
|
+
export {};
|
package/package.json
CHANGED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* BottomNavigationBar.module.css */
|
|
2
|
+
|
|
3
|
+
.bottomNav {
|
|
4
|
+
position: fixed;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
width: 100%;
|
|
7
|
+
background-color: #001f3f;
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: space-around;
|
|
10
|
+
align-items: center;
|
|
11
|
+
padding: 10px 0;
|
|
12
|
+
color: #fff;
|
|
13
|
+
font-family: Arial, sans-serif;
|
|
14
|
+
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
|
|
15
|
+
z-index: 1000; /* Ensure the navbar stays on top */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.navButton {
|
|
19
|
+
background: none;
|
|
20
|
+
border: none;
|
|
21
|
+
color: inherit;
|
|
22
|
+
font: inherit;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
padding: 5px;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
align-items: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.navButton:focus {
|
|
31
|
+
outline: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.navButton:hover .icon,
|
|
35
|
+
.navButton:hover .label {
|
|
36
|
+
color: #f0ad4e; /* Change to your desired hover color */
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.icon {
|
|
40
|
+
font-size: 24px;
|
|
41
|
+
margin-bottom: 5px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.label {
|
|
45
|
+
font-size: 12px;
|
|
46
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styles from './BottomNavBar.module.css';
|
|
3
|
+
|
|
4
|
+
type NavItem = {
|
|
5
|
+
label: string;
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
visible: boolean;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
type BottomNavBarProps = {
|
|
12
|
+
navItems: NavItem[];
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const BottomNavBar: React.FC<BottomNavBarProps> = ({ navItems }) => {
|
|
16
|
+
return (
|
|
17
|
+
<nav className={styles.bottomNav}>
|
|
18
|
+
{navItems.map(
|
|
19
|
+
(item, index) =>
|
|
20
|
+
item.visible && (
|
|
21
|
+
<button
|
|
22
|
+
key={index}
|
|
23
|
+
className={styles.navButton}
|
|
24
|
+
onClick={item.onClick}
|
|
25
|
+
>
|
|
26
|
+
{item.icon && <span className={styles.icon}>{item.icon}</span>}
|
|
27
|
+
<span className={styles.label}>{item.label}</span>
|
|
28
|
+
</button>
|
|
29
|
+
)
|
|
30
|
+
)}
|
|
31
|
+
</nav>
|
|
32
|
+
);
|
|
33
|
+
};
|