Subheader items

packages/web-console/src/modules/Import/SchemaEditor/index.tsx

@@ -6,15 +6,51 @@ import { PaneContent, PaneWrapper } from "../../../components"
 import { Panel } from "../../../components/Panel"
 import { ColumnType, RequestColumn, SchemaRequest } from "./types"
 import styled from "styled-components"
+import { Nav, NavGroup, Subheader } from "../panel"
+import { Search2 } from "@styled-icons/remix-line"
+import { Input } from "../../../components"
+import { StyledIconBase } from "@styled-icons/styled-icon"
 
 type Props = { data: SchemaRequest }
 type Column = RequestColumn
 
+const StyledSearchNav = styled(Nav)`
+  padding-block: 0;
+
+  ${StyledIconBase} {
+    margin-right: -3rem;
+  }
+`
+
+const StyledSearchInput = styled(Input)`
+  background-color: transparent;
+
+  padding-left: 3rem;
+`
+const SearchInput = (props: any) => {
+  return (
+    <StyledSearchNav>
+      <Search2 size="18px" /> <StyledSearchInput {...props} />
+    </StyledSearchNav>
+  )
+}
+
 export const SchemaEditor = ({ data }: Props) => {
   const { state, dispatch } = useContext(ImportContext)
   return (
     <PaneWrapper>
-      <Panel.Header title="Schema" shadow />
+      <Subheader>
+        <NavGroup>
+          {/** NOTE: hypothetically this is the control for flow as well */}
+          <SearchInput />
+          <Nav>Delimiter</Nav>
+          <Nav>Partition by hour</Nav>
+        </NavGroup>
+        <NavGroup>
+          <Nav>X</Nav>
+          <Nav>Y</Nav>
+        </NavGroup>
+      </Subheader>
       <PaneContent>
         <p>Flow: {state.flow}</p>
         <Table<Column>

packages/web-console/src/modules/Import/panel.tsx

@@ -0,0 +1,43 @@
+import { PaneContent, PaneWrapper } from "../../components"
+import styled from "styled-components"
+
+type SubheaderProps = {
+  children: React.ReactNode
+}
+
+export const Subheader = styled.nav<SubheaderProps>`
+  position: relative;
+  height: 4.5rem;
+  padding: 0.5rem 0.5rem;
+  font-size: 12px;
+
+  display: flex;
+  justify-content: space-between;
+
+  background: ${({ theme }) => theme.color.backgroundLighter};
+  border-block: 1px solid black;
+`
+
+export const NavGroup = styled.section`
+  display: flex;
+  gap: 1rem;
+  height: 100%;
+`
+
+export const Nav = styled.div`
+  all: unset;  
+  background: ${({ theme }) => theme.color.transparent};
+  color: ${({ theme }) => theme.color.foreground};
+  
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+
+  padding: .25rem .75rem;
+
+  border-bottom: 1px solid ${({ theme }) => theme.color.transparent};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.color.selection}
+  }
+`