From 9e1e3f5774491e289fede079ba9576daaf7c9636 Mon Sep 17 00:00:00 2001
From: Sean Scully <seanscully@Sean-sin-MBP.home>
Date: Mon, 19 Feb 2024 13:55:34 +0100
Subject: [PATCH] feature: add inbox action panel

---
 .../src/components/ActionPanel/ActionPanel.tsx    | 15 +++++++++++++++
 .../components/ActionPanel/actionPanel.module.css | 12 ++++++++++++
 .../src/components/ActionPanel/index.ts           |  1 +
 .../frontend-design-poc/src/pages/Inbox/Inbox.tsx |  2 ++
 4 files changed, 30 insertions(+)
 create mode 100644 packages/frontend-design-poc/src/components/ActionPanel/ActionPanel.tsx
 create mode 100644 packages/frontend-design-poc/src/components/ActionPanel/actionPanel.module.css
 create mode 100644 packages/frontend-design-poc/src/components/ActionPanel/index.ts

diff --git a/packages/frontend-design-poc/src/components/ActionPanel/ActionPanel.tsx b/packages/frontend-design-poc/src/components/ActionPanel/ActionPanel.tsx
new file mode 100644
index 000000000..d99a3e41f
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/ActionPanel/ActionPanel.tsx
@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+
+import styles from "./actionPanel.module.css";
+
+interface ActionPanelProps {
+}
+
+export function ActionPanel() {
+  const { t } = useTranslation();
+  return (
+    <nav className={styles.actionPanel}>
+
+    </nav>
+  );
+}
diff --git a/packages/frontend-design-poc/src/components/ActionPanel/actionPanel.module.css b/packages/frontend-design-poc/src/components/ActionPanel/actionPanel.module.css
new file mode 100644
index 000000000..dcb66ad58
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/ActionPanel/actionPanel.module.css
@@ -0,0 +1,12 @@
+.actionPanel {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
+    flex-shrink: 0;
+    border-radius: 20px;
+    border: 2px solid #00315D;
+    background: #E6EFF8;
+    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10);
+    min-height: 50px;
+}
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/components/ActionPanel/index.ts b/packages/frontend-design-poc/src/components/ActionPanel/index.ts
new file mode 100644
index 000000000..d34402fae
--- /dev/null
+++ b/packages/frontend-design-poc/src/components/ActionPanel/index.ts
@@ -0,0 +1 @@
+export { ActionPanel } from './ActionPanel.tsx'
\ No newline at end of file
diff --git a/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx b/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
index 85cc50596..7c17328b5 100644
--- a/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
+++ b/packages/frontend-design-poc/src/pages/Inbox/Inbox.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PersonIcon, PersonSuitIcon, SealIcon, StarIcon } from '@navikt/aksel-icons';
 import { InboxItems, InboxItem } from "../../components/InboxItem";
+import { ActionPanel } from '../../components/ActionPanel';
 
 export const Inbox = () => {
   const { t } = useTranslation();
@@ -11,6 +12,7 @@ export const Inbox = () => {
   return (
     <section>
       <h1>{t('example.your_inbox')}</h1>
+      <ActionPanel />
       <InboxItems>
         <InboxItem
           checkboxValue="test"