diff --git a/packages/web-console/src/modules/Import/SchemaEditor/index.tsx b/packages/web-console/src/modules/Import/SchemaEditor/index.tsx
index da9f9d359..ee2029680 100644
--- a/packages/web-console/src/modules/Import/SchemaEditor/index.tsx
+++ b/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 (
+
+
+
+ )
+}
+
export const SchemaEditor = ({ data }: Props) => {
const { state, dispatch } = useContext(ImportContext)
return (
-
+
+
+ {/** NOTE: hypothetically this is the control for flow as well */}
+
+
+
+
+
+
+
+
+
Flow: {state.flow}
diff --git a/packages/web-console/src/modules/Import/panel.tsx b/packages/web-console/src/modules/Import/panel.tsx
new file mode 100644
index 000000000..7ae806c56
--- /dev/null
+++ b/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`
+ 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}
+ }
+`
\ No newline at end of file