feat: add top bar

packages/components/_provisional/src/top-bar/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export interface TopBarProps extends React.HTMLAttributes<HTMLElement> {
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}
+
+export const TopBar = ({
+  before,
+  after,
+  className,
+  children,
+  ...otherProps
+}: Readonly<TopBarProps>): React.ReactElement => (
+  <nav className={classNames(styles.root, className)} {...otherProps}>
+    {before ? <div className={styles.section}>{before}</div> : null}
+    <div className={styles.section}>{children}</div>
+    {after ? <div className={styles.section}>{after}</div> : null}
+  </nav>
+);

packages/components/_provisional/src/top-bar/styles/index.module.scss

@@ -0,0 +1,29 @@
+@import "@react-ck/theme";
+@import "@react-ck/text";
+
+.root {
+  @include text-base;
+  @include text-type(h3);
+
+  display: flex;
+  align-items: center;
+  gap: get-spacing(4);
+  background-color: get-color(neutral-light-2);
+  padding: get-spacing(1);
+
+  .section {
+    flex-basis: 33%;
+    display: flex;
+    align-items: center;
+    gap: get-spacing(2);
+    justify-content: center;
+
+    &:first-child {
+      justify-content: flex-start;
+    }
+
+    &:last-child {
+      justify-content: flex-end;
+    }
+  }
+}