Skip to content

Commit 9f122c1

Browse files
author
roshni73
committed
Add navbar and neccessary components
1 parent 61b3881 commit 9f122c1

File tree

24 files changed

+1097
-31
lines changed

24 files changed

+1097
-31
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@togglecorp/toggle-ui": "^0.18.3",
2828
"react": "^18.2.0",
2929
"react-dom": "^18.2.0",
30+
"react-icons": "^5.5.0",
3031
"react-router-dom": "^6.11.1"
3132
},
3233
"devDependencies": {

‎pnpm-lock.yaml‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Container/index.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { _cs } from '@togglecorp/fujs';
2+
3+
import Footer from '#components/Footer';
4+
import Header from '#components/Header';
5+
import { type Props as HeadingProps } from '#components/Heading';
6+
7+
import styles from './styles.module.css';
8+
9+
interface Props {
10+
actions?: React.ReactNode;
11+
actionsContainerClassName?: string;
12+
className?: string;
13+
containerRef?: React.RefObject<HTMLDivElement>;
14+
children?: React.ReactNode;
15+
withHeaderBorder?: boolean,
16+
showHeader?: boolean,
17+
headerDescription?: string;
18+
heading?: React.ReactNode;
19+
headingClassName?: string;
20+
headingContainerClassName?: string;
21+
headingLevel?: HeadingProps['level'],
22+
headingSectionClassName?: string;
23+
icons?: React.ReactNode;
24+
iconsContainerClassName?: string;
25+
headingDescription?: React.ReactNode;
26+
headingDescriptionContainerClassName?: string;
27+
headerDescriptionContainerClassName?: string;
28+
childrenContainerClassName?: string;
29+
30+
footerActions?: React.ReactNode;
31+
footerActionsContainerClassName?: string;
32+
footerClassName?: string;
33+
footerContent?: React.ReactNode;
34+
footerContentClassName?: string;
35+
footerIcons?: React.ReactNode;
36+
withFooterBorder?: boolean;
37+
38+
}
39+
40+
function Container(props: Props) {
41+
const {
42+
actions,
43+
actionsContainerClassName,
44+
className,
45+
containerRef,
46+
children,
47+
withHeaderBorder = false,
48+
showHeader,
49+
headerDescription,
50+
heading,
51+
headingLevel,
52+
headingSectionClassName,
53+
headingClassName,
54+
headingContainerClassName,
55+
headingDescription,
56+
headerDescriptionContainerClassName,
57+
headingDescriptionContainerClassName,
58+
icons,
59+
childrenContainerClassName,
60+
iconsContainerClassName,
61+
62+
footerActions,
63+
footerActionsContainerClassName,
64+
footerClassName,
65+
footerContent,
66+
footerContentClassName,
67+
withFooterBorder,
68+
footerIcons,
69+
} = props;
70+
71+
const showFooter = footerIcons || footerContent || footerActions;
72+
73+
if (
74+
!children
75+
&& !showHeader
76+
&& !showFooter
77+
) {
78+
return null;
79+
}
80+
81+
return (
82+
<div
83+
ref={containerRef}
84+
className={_cs(className, styles.container)}
85+
>
86+
{showHeader && (
87+
<Header
88+
icons={icons}
89+
iconsContainerClassName={iconsContainerClassName}
90+
actions={actions}
91+
actionsContainerClassName={actionsContainerClassName}
92+
heading={heading}
93+
headingLevel={headingLevel}
94+
headingClassName={headingClassName}
95+
headingSectionClassName={headingSectionClassName}
96+
headingContainerClassName={headingContainerClassName}
97+
headingDescription={headingDescription}
98+
headingDescriptionContainerClassName={headingDescriptionContainerClassName}
99+
childrenContainerClassName={_cs(
100+
headerDescriptionContainerClassName,
101+
)}
102+
>
103+
{headerDescription}
104+
</Header>
105+
)}
106+
{withHeaderBorder && <div className={styles.border} />}
107+
<div className={childrenContainerClassName}>
108+
{children}
109+
</div>
110+
{showFooter && withFooterBorder && <div className={styles.border} />}
111+
{showFooter && (
112+
<Footer
113+
actions={footerActions}
114+
icons={footerIcons}
115+
childrenContainerClassName={footerContentClassName}
116+
className={_cs(
117+
styles.footer,
118+
footerClassName,
119+
)}
120+
actionsContainerClassName={footerActionsContainerClassName}
121+
>
122+
{footerContent}
123+
</Footer>
124+
)}
125+
</div>
126+
);
127+
}
128+
129+
export default Container;

‎src/components/Container/styles.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
flex-grow: 1;
5+
gap: var(--un-spacing-lg);
6+
7+
.border {
8+
flex-shrink: 0;
9+
margin: 0;
10+
}
11+
}

‎src/components/Footer/index.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import useBasicLayout from '#hooks/useBasicLayout';
2+
3+
interface Props {
4+
actions?: React.ReactNode;
5+
actionsContainerClassName?: string;
6+
children: React.ReactNode;
7+
childrenContainerClassName?: string;
8+
className?: string;
9+
icons?: React.ReactNode;
10+
iconsContainerClassName?: string;
11+
}
12+
13+
function Footer(props: Props) {
14+
const {
15+
actions,
16+
actionsContainerClassName,
17+
children,
18+
childrenContainerClassName,
19+
className,
20+
icons,
21+
iconsContainerClassName,
22+
} = props;
23+
24+
const {
25+
content,
26+
containerClassName,
27+
} = useBasicLayout({
28+
actions,
29+
actionsContainerClassName,
30+
children,
31+
childrenContainerClassName,
32+
className,
33+
icons,
34+
iconsContainerClassName,
35+
});
36+
37+
return (
38+
<div className={containerClassName}>
39+
{content}
40+
</div>
41+
);
42+
}
43+
44+
export default Footer;

‎src/components/Header/index.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import { useMemo } from 'react';
2+
import {
3+
_cs,
4+
isNotDefined,
5+
} from '@togglecorp/fujs';
6+
7+
import Heading, { Props as HeadingProps } from '#components/Heading';
8+
import useBasicLayout from '#hooks/useBasicLayout';
9+
10+
import styles from './styles.module.css';
11+
12+
interface Props {
13+
className?: string;
14+
elementRef?: React.Ref<HTMLDivElement>;
15+
16+
children?: React.ReactNode;
17+
childrenContainerClassName?: string;
18+
19+
actions?: React.ReactNode;
20+
actionsContainerClassName?: string;
21+
22+
icons?: React.ReactNode;
23+
iconsContainerClassName?: string;
24+
25+
heading: React.ReactNode;
26+
headingLevel?: HeadingProps['level'];
27+
headingSectionClassName?: string;
28+
headingContainerClassName?: string;
29+
headingClassName?: string;
30+
headingDescription?: React.ReactNode;
31+
headingDescriptionContainerClassName?: string;
32+
}
33+
34+
function Header(props: Props) {
35+
const {
36+
className,
37+
elementRef,
38+
actions,
39+
actionsContainerClassName,
40+
children,
41+
childrenContainerClassName,
42+
headingLevel,
43+
heading,
44+
headingClassName,
45+
headingSectionClassName,
46+
headingContainerClassName,
47+
headingDescription,
48+
headingDescriptionContainerClassName,
49+
icons,
50+
iconsContainerClassName,
51+
} = props;
52+
53+
const headingChildren = useMemo(
54+
() => {
55+
if (isNotDefined(heading) && isNotDefined(headingDescription)) {
56+
return null;
57+
}
58+
59+
return (
60+
<>
61+
<Heading
62+
level={headingLevel}
63+
className={headingClassName}
64+
>
65+
{heading}
66+
</Heading>
67+
{headingDescription && (
68+
<div className={headingDescriptionContainerClassName}>
69+
{headingDescription}
70+
</div>
71+
)}
72+
</>
73+
);
74+
},
75+
[
76+
heading,
77+
headingDescription,
78+
headingClassName,
79+
headingDescriptionContainerClassName,
80+
headingLevel,
81+
],
82+
);
83+
84+
const {
85+
content,
86+
containerClassName,
87+
} = useBasicLayout({
88+
actions,
89+
actionsContainerClassName,
90+
children: headingChildren,
91+
childrenContainerClassName: headingContainerClassName,
92+
className: headingSectionClassName,
93+
icons,
94+
iconsContainerClassName,
95+
});
96+
97+
if (!content && !children) {
98+
return null;
99+
}
100+
101+
return (
102+
<div
103+
className={_cs(
104+
styles.header,
105+
className,
106+
)}
107+
ref={elementRef}
108+
>
109+
{content && (
110+
<div className={containerClassName}>
111+
{content}
112+
</div>
113+
)}
114+
{children && (
115+
<div className={childrenContainerClassName}>
116+
{children}
117+
</div>
118+
)}
119+
</div>
120+
);
121+
}
122+
123+
export default Header;

‎src/components/Header/styles.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.header {
2+
display: flex;
3+
flex-direction: column;
4+
}

0 commit comments

Comments
 (0)