feat: move searchbar to header

FuelLabs · Sep 24, 2024 · 32dac21 · 32dac21
1 parent dc9eff6
commit 32dac21
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 30 deletions.
diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchForm.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchForm.tsx
@@ -8,14 +8,9 @@ import { styles } from './styles';
 type SearchFormProps = {
   className: string;
   autoFocus?: boolean;
-  variablePosition?: boolean;
 };
 
-export function SearchForm({
-  className,
-  autoFocus,
-  variablePosition,
-}: SearchFormProps) {
+export function SearchForm({ className, autoFocus }: SearchFormProps) {
   const classes = styles();
   const [results, action] = useFormState(
     (_: GQLSearchResult | null, formData: FormData) => {
@@ -27,7 +22,6 @@ export function SearchForm({
   return (
     <form action={action} className={classes.searchSize()}>
       <SearchInput
-        variablePosition={variablePosition}
         className={className}
         searchResult={results}
         autoFocus={autoFocus}

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx
@@ -20,7 +20,6 @@ type SearchInputProps = BaseProps<InputProps> & {
   onSubmit?: (value: string) => void;
   searchResult?: Maybe<GQLSearchResult>;
   alwaysDisplayActionButtons?: boolean;
-  variablePosition?: boolean;
 };
 
 export function SearchInput({
@@ -29,7 +28,6 @@ export function SearchInput({
   autoFocus,
   placeholder = 'Search here...',
   searchResult,
-  variablePosition,
   ...props
 }: SearchInputProps) {
   const classes = styles();
@@ -92,7 +90,6 @@ export function SearchInput({
     <div className="relative">
       <VStack
         gap="0"
-        data-variable-position={variablePosition}
         className={classes.searchBox()}
         data-active={isFocused || openDropdown}
       >

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts
@@ -6,9 +6,9 @@ export const styles = tv({
       'transition-all duration-200 [&[data-active=false]]:ease-in [&[data-active=true]]:ease-out',
       'group justify-center items-center',
       'block left-0 w-full', // needed for properly execution of transitions
-      '[&[data-variable-position=true]]:[&[data-active=true]]:w-[calc(100vw+1px)] [&[data-variable-position=true]]:[&[data-active=true]]:left-[-64px] tablet:[&[data-variable-position=true]]:[&[data-active=true]]:w-full',
-      '[&[data-active=true]]:absolute tablet:[&[data-variable-position=true]]:[&[data-active=true]]:left-0 [&[data-active=true]]:right-0',
-      '[&[data-variable-position=true]]:[&[data-active=true]]:top-[-14px] [&[data-variable-position=true]]:tablet:[&[data-active=true]]:top-[-4px] [&[data-variable-position=true]]:desktop:[&[data-active=true]]:top-[-20px]',
+      '[&[data-active=true]]:w-[calc(100vw+1px)] [&[data-active=true]]:left-[-64px] tablet:[&[data-active=true]]:w-full',
+      '[&[data-active=true]]:absolute tablet:[&[data-active=true]]:left-0 [&[data-active=true]]:right-0',
+      '[&[data-active=true]]:top-[-14px] tablet:[&[data-active=true]]:top-[-4px] desktop:[&[data-active=true]]:top-[-20px]',
       '[&[data-active=true]]:z-50',
     ],
     inputContainer: 'w-full',

diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchWidget.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchWidget.tsx
@@ -12,24 +12,16 @@ export const SearchContext = createContext<{
 
 type SearchWidgetProps = {
   autoFocus?: boolean;
-  variablePosition?: boolean;
 };
 
-export const SearchWidget = ({
-  autoFocus,
-  variablePosition,
-}: SearchWidgetProps) => {
+export const SearchWidget = ({ autoFocus }: SearchWidgetProps) => {
   const classes = styles();
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   return (
     <SearchContext.Provider value={{ dropdownRef }}>
       <Flex className="items-center gap-0 laptop:gap-4 justify-center flex-1 self-start">
-        <SearchForm
-          className={classes.searchSize()}
-          autoFocus={autoFocus}
-          variablePosition={variablePosition}
-        />
+        <SearchForm className={classes.searchSize()} autoFocus={autoFocus} />
       </Flex>
     </SearchContext.Provider>
   );

diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx
@@ -22,7 +22,6 @@ export function TopNav() {
     PortalRoutes.bridgeHistory,
   ]);
   const isEcosystemBridge = isRoute(pathname, [PortalRoutes.ecosystem]);
-  const isHomePage = pathname === '/';
   const isExplorer = !isBridge && !isEcosystemBridge;
 
   useEffect(() => {
@@ -82,7 +81,9 @@ export function TopNav() {
           {logo}
           {externalLinks}
         </Nav.Menu>
-        <Nav.Menu>{!isHomePage && <SearchWidget variablePosition />}</Nav.Menu>
+        <Nav.Menu>
+          <SearchWidget />
+        </Nav.Menu>
         <Nav.Menu>
           {tooling}
           {themeToggle}
@@ -91,7 +92,7 @@ export function TopNav() {
       <Nav.Mobile>
         <Nav.MobileContent>
           {logo}
-          {!isHomePage && <SearchWidget variablePosition />}
+          <SearchWidget />
           {themeToggle}
         </Nav.MobileContent>
         <Nav.Menu>

diff --git a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx
@@ -2,7 +2,6 @@
 
 import { Box, Container, Heading } from '@fuels/ui';
 import { tv } from 'tailwind-variants';
-import { SearchWidget } from '~/systems/Core/components/Search/SearchWidget';
 
 export function Hero() {
   const classes = styles();
@@ -13,9 +12,6 @@ export function Hero() {
         <Heading as="h1" className={classes.title()}>
           Explore Fuel
         </Heading>
-        <Box className={classes.searchWrapper()}>
-          <SearchWidget autoFocus={true} />
-        </Box>
       </Container>
     </Box>
   );