chore: heygermany customer project

apps/website/components/ui/NavBar.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import {
+  Icon2fa,
+  IconBellRinging,
+  IconDatabaseImport,
+  IconFingerprint,
+  IconKey,
+  IconLogout,
+  IconReceipt2,
+  IconSettings,
+  IconSwitchHorizontal,
+} from '@tabler/icons-react';
+import { Code, Group } from '@pikku/mantine/core';
+import classes from './NavbarSimple.module.css';
+
+const data = [
+  { link: '', label: 'Notifications', icon: IconBellRinging },
+  { link: '', label: 'Billing', icon: IconReceipt2 },
+  { link: '', label: 'Security', icon: IconFingerprint },
+  { link: '', label: 'SSH Keys', icon: IconKey },
+  { link: '', label: 'Databases', icon: IconDatabaseImport },
+  { link: '', label: 'Authentication', icon: Icon2fa },
+  { link: '', label: 'Other Settings', icon: IconSettings },
+];
+
+export function NavbarSimple() {
+  const [active, setActive] = useState('Billing');
+
+  const links = data.map((item) => (
+    <a
+      className={classes.link}
+      data-active={item.label === active || undefined}
+      href={item.link}
+      key={item.label}
+      onClick={(event) => {
+        event.preventDefault();
+        setActive(item.label);
+      }}
+    >
+      <item.icon className={classes.linkIcon} stroke={1.5} />
+      <span>{item.label}</span>
+    </a>
+  ));
+
+  return (
+    <nav className={classes.navbar}>
+      <div className={classes.navbarMain}>
+        <Group className={classes.header} justify="space-between">
+        </Group>
+        {links}
+      </div>
+
+      <div className={classes.footer}>
+        <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
+          <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
+          <span>Change account</span>
+        </a>
+
+        <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
+          <IconLogout className={classes.linkIcon} stroke={1.5} />
+          <span>Logout</span>
+        </a>
+      </div>
+    </nav>
+  );
+}