From 61e74df5e48662d051fbbf7d3df21150f30eeee7 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Mon, 13 Mar 2023 00:25:58 +0000
Subject: [PATCH] Simple nav menu component
---
.../src/components/navigation/NavMenuItem.tsx | 22 +++++++++++++++++++
.../src/styles/NavMenuItem.module.css | 15 +++++++++++++
2 files changed, 37 insertions(+)
create mode 100644 daily-thought-frontend/src/components/navigation/NavMenuItem.tsx
create mode 100644 daily-thought-frontend/src/styles/NavMenuItem.module.css
diff --git a/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx b/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx
new file mode 100644
index 00000000..5f93da30
--- /dev/null
+++ b/daily-thought-frontend/src/components/navigation/NavMenuItem.tsx
@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren } from 'react';
+import styles from '../../styles/NavMenuItem.module.css'
+
+type NavMenuItemProps = {
+ label: string;
+ icon: any;
+}
+
+const NavMenuItem:FC<PropsWithChildren<NavMenuItemProps>> = ({
+ label,
+ icon
+}) => {
+
+ return (
+ <div className={styles.menuItem}>
+ {icon}
+ <p className={styles.label}>{label}</p>
+ </div>
+ )
+}
+
+export default NavMenuItem;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/NavMenuItem.module.css b/daily-thought-frontend/src/styles/NavMenuItem.module.css
new file mode 100644
index 00000000..f84a194a
--- /dev/null
+++ b/daily-thought-frontend/src/styles/NavMenuItem.module.css
@@ -0,0 +1,15 @@
+.menuItem {
+ margin: 8px 0px;;
+ padding: 16px 24px;
+ /* color:rgb(100 116 139); */
+
+ border-radius: 32px;
+ border: 1px solid rgb(226 232 240);
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+}
+
+.label {
+ margin-left: 8px;
+}
\ No newline at end of file
--
GitLab