From 32dac217e708ceb4734b70891641c41545fe4158 Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Tue, 24 Sep 2024 20:40:37 -0300 Subject: [PATCH] feat: move searchbar to header --- .../systems/Core/components/Search/SearchForm.tsx | 8 +------- .../components/Search/SearchInput/SearchInput.tsx | 3 --- .../Core/components/Search/SearchInput/styles.ts | 6 +++--- .../systems/Core/components/Search/SearchWidget.tsx | 12 ++---------- .../src/systems/Core/components/TopNav/TopNav.tsx | 7 ++++--- .../src/systems/Home/components/Hero/Hero.tsx | 4 ---- 6 files changed, 10 insertions(+), 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 index e8accce9..f74c660d 100644 --- 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 (
& { onSubmit?: (value: string) => void; searchResult?: Maybe; 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({
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 index 33946267..77b61b85 100644 --- 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 index e596bcae..144a01d8 100644 --- 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(null); return ( - + ); diff --git a/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx b/packages/app-explorer/src/systems/Core/components/TopNav/TopNav.tsx index e2bbaa02..10b06fb4 100644 --- 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} - {!isHomePage && } + + + {tooling} {themeToggle} @@ -91,7 +92,7 @@ export function TopNav() { {logo} - {!isHomePage && } + {themeToggle} diff --git a/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx b/packages/app-explorer/src/systems/Home/components/Hero/Hero.tsx index 9730ad90..3c96f642 100644 --- 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() { Explore Fuel - - - );