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