diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
index 0a7562ece..5312db4ce 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/Header/index.tsx
@@ -1,38 +1,71 @@
+import { useState } from 'react'
import styled from 'styled-components'
+import { AutoComplete, TAutocompleteOption } from '~/components/common/AutoComplete'
import { Flex } from '~/components/common/Flex'
import ClearIcon from '~/components/Icons/ClearIcon'
import FamilyHistoryIcon from '~/components/Icons/FamilyHistoryIcon'
+import SearchIcon from '~/components/Icons/SearchIcon'
+import { Schema } from '~/network/fetchSourcesData'
import { colors } from '~/utils/colors'
interface HeaderProps {
onClose: () => void
activeTab: 'all' | 'parent'
setActiveTab: (tab: 'all' | 'parent') => void
+ onSchemaSelect: (schemaId: string) => void
+ schemas: Schema[]
}
interface TabProps {
active: boolean
}
-export const Header = ({ onClose, activeTab, setActiveTab }: HeaderProps) => (
-
-
-
- Blueprint
-
-
- setActiveTab('all')}>
- Show All
-
- setActiveTab('parent')}>
- Parent Only
-
-
-
-
-
-
-)
+export const Header = ({ onClose, activeTab, setActiveTab, onSchemaSelect, schemas }: HeaderProps) => {
+ const [searchTerm, setSearchTerm] = useState('')
+
+ const searchOptions = schemas
+ .filter((schema): schema is Schema & { ref_id: string } => schema.ref_id !== undefined && schema.type !== undefined)
+ .map((schema) => ({
+ label: schema.type,
+ value: schema.ref_id,
+ }))
+
+ return (
+
+
+
+ Blueprint
+
+
+
+ setSearchTerm(value)}
+ onSelect={(option: TAutocompleteOption | null) => {
+ if (option?.value) {
+ onSchemaSelect(option.value)
+ }
+ }}
+ options={searchOptions}
+ placeholder="Search"
+ />
+ {searchTerm?.trim() ? null : }
+
+
+
+ setActiveTab('all')}>
+ Show All
+
+ setActiveTab('parent')}>
+ Parent Only
+
+
+
+
+
+
+
+ )
+}
const HeaderWrapper = styled(Flex)`
background-color: ${colors.BG1};
@@ -43,6 +76,7 @@ const HeaderWrapper = styled(Flex)`
justify-content: space-between;
padding: 17px;
border-bottom: 1px solid ${colors.black};
+ z-index: 2000;
`
const IconWrapper = styled.div`
@@ -66,6 +100,20 @@ const Title = styled.span`
font-size: 22px;
`
+const InputButton = styled(Flex).attrs({
+ align: 'center',
+ justify: 'center',
+ p: 5,
+})`
+ font-size: 32px;
+ color: ${colors.mainBottomIcons};
+ cursor: pointer;
+ transition-duration: 0.2s;
+ margin-left: -42px;
+ z-index: 2;
+ width: 30px;
+`
+
const TabsWrapper = styled.div`
display: flex;
position: absolute;
@@ -106,3 +154,65 @@ const CloseButton = styled.div`
height: 32px;
}
`
+
+const SearchSection = styled.div`
+ display: flex;
+ align-items: center;
+ width: 300px;
+ position: fixed;
+ transform: translateY(-6px);
+ margin-left: 11%;
+
+ &:has(.MuiTextField-root:focus-within) {
+ ${InputButton} {
+ color: ${colors.primaryBlue};
+ }
+ }
+`
+
+const StyledAutoComplete = styled(AutoComplete)`
+ .MuiTextField-root {
+ pointer-events: auto;
+ height: 40px !important;
+ z-index: 2;
+ box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ color: #fff;
+ box-shadow: none;
+ border: none;
+ border-radius: 200px !important;
+ background: ${colors.BG2};
+
+ .MuiInput-input.MuiInputBase-input {
+ padding: 1px 40px 1px 18px;
+ height: 40px !important;
+
+ -webkit-autofill,
+ -webkit-autocomplete,
+ -webkit-contacts-auto-fill,
+ -webkit-credentials-auto-fill {
+ display: none !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+ position: absolute !important;
+ right: 0 !important;
+ }
+ }
+
+ &:focus-within {
+ outline: 1px solid ${colors.primaryBlue};
+ }
+
+ &:hover {
+ background: ${colors.black};
+ }
+
+ input::placeholder {
+ color: ${colors.GRAY7};
+ }
+
+ .MuiAutocomplete-endAdornment {
+ display: none;
+ }
+ }
+`
diff --git a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
index 260af531b..fac393da6 100644
--- a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
+++ b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx
@@ -138,7 +138,15 @@ export const Body = ({ Close }: BodyProps) => {
return (
<>
-
+ {
+ setSelectedSchemaId(schemaId)
+ }}
+ schemas={schemas}
+ setActiveTab={setActiveTab}
+ />