feature: add inbox action panel

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>
+  );
+}

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;
+}

packages/frontend-design-poc/src/components/ActionPanel/index.ts

@@ -0,0 +1 @@
+export { ActionPanel } from './ActionPanel.tsx'

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"