just commit

itsmegood · Feb 18, 2024 · 1a3f080 · 1a3f080
1 parent d357d1e
commit 1a3f080
Show file tree

Hide file tree

Showing 10 changed files with 576 additions and 155 deletions.
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
@@ -14,6 +14,7 @@ export function SearchBar({
 	onSubmitHandler,
 	className,
 	searchParam,
+	searchRef,
 }: {
 	action: string
 	status: 'idle' | 'pending' | 'success' | 'error'
@@ -22,6 +23,7 @@ export function SearchBar({
 	autoSubmit?: boolean
 	className?: string
 	searchParam?: string
+	searchRef?: React.RefObject<HTMLInputElement>
 }) {
 	const id = useId()
 	const [searchParams] = useSearchParams()
@@ -38,38 +40,38 @@ export function SearchBar({
 	}, 400)
 
 	return (
-		<Form
-			method="GET"
-			action={action}
-			className={cn(
-				'flex w-full flex-wrap items-center justify-center gap-2',
-				className,
-			)}
-			onChange={e => autoSubmit && handleFormChange(e.currentTarget)}
-			onSubmit={onSubmitHandler}
-		>
-			<div className="flex-1" key={defaultValue}>
-				<Label htmlFor={id} className="sr-only">
-					Search
-				</Label>
-				<Input
-					type="search"
-					name={searchParam ?? 'search'}
-					id={id}
-					defaultValue={defaultValue}
-					placeholder="Search"
-					className="h-full w-full"
-					autoFocus={autoFocusSearch}
-				/>
-			</div>
+		<div className="flex gap-4">
+			<Form
+				method="GET"
+				action={action}
+				className={cn('w-full', className)}
+				onChange={e => autoSubmit && handleFormChange(e.currentTarget)}
+				onSubmit={onSubmitHandler}
+			>
+				<div key={defaultValue}>
+					<Label htmlFor={id} className="sr-only">
+						Search
+					</Label>
+					<Input
+						ref={searchRef}
+						type="search"
+						name={searchParam ?? 'search'}
+						id={id}
+						defaultValue={defaultValue}
+						placeholder="Search"
+						autoFocus={autoFocusSearch}
+					/>
+				</div>
+			</Form>
 			<StatusButton
+				tabIndex={autoSubmit ? -1 : 0}
 				type="submit"
 				status={isSubmitting ? 'pending' : status}
-				size="sm"
 			>
-				<Icon name="magnifying-glass" size="sm" />
-				<span className="sr-only">Search</span>
+				<Icon name="magnifying-glass">
+					<span className="hidden md:flex">Search</span>
+				</Icon>
 			</StatusButton>
-		</Form>
+		</div>
 	)
 }
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
@@ -24,7 +24,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			'flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+			'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
 			inset && 'pl-8',
 			className,
 		)}
@@ -62,7 +62,8 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+				'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 				className,
 			)}
 			{...props}
@@ -80,7 +81,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			'relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			inset && 'pl-8',
 			className,
 		)}
@@ -96,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			className,
 		)}
 		checked={checked}
@@ -129,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			'relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			className,
 		)}
 		{...props}

diff --git a/app/routes/$.tsx b/app/routes/$.tsx
@@ -5,7 +5,7 @@
 // ensure the user gets the right status code and we can display a nicer error
 // message for them than the Remix and/or browser default.
 
-import { Link, useLocation } from '@remix-run/react'
+import { Link, useLocation, useNavigate } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 
@@ -21,6 +21,9 @@ export default function NotFound() {
 
 export function ErrorBoundary() {
 	const location = useLocation()
+
+	const navigate = useNavigate()
+
 	return (
 		<GeneralErrorBoundary
 			statusHandlers={{
@@ -35,6 +38,12 @@ export function ErrorBoundary() {
 						<Link to="/" className="text-body-md underline">
 							<Icon name="arrow-left">Back to home</Icon>
 						</Link>
+						<button
+							onClick={() => navigate(-1)}
+							className="text-body-md underline"
+						>
+							<Icon name="arrow-left">Go back</Icon>
+						</button>
 					</div>
 				),
 			}}

diff --git a/app/routes/c.$companyId+/_layout_company.tsx b/app/routes/c.$companyId+/_layout_company.tsx
@@ -27,7 +27,7 @@ const companyRoutes = [
 		href: 'reports',
 	},
 	{
-		title: 'Search',
+		title: 'Discover',
 		href: 'search',
 	},
 ]
@@ -41,7 +41,6 @@ const mobileCompanyRoutes = [
 
 export default function LayoutCompany() {
 	const matches = useMatches()
-	console.log(matches)
 	const isSearchPage = matches.find(m => m.id === 'routes/c.$companyId+/search')
 
 	return (
@@ -84,7 +83,7 @@ export default function LayoutCompany() {
 				<nav className="hidden w-full gap-4 lg:flex">
 					{!isSearchPage && (
 						<SearchBar
-							action="/search"
+							action="search"
 							status="idle"
 							className="hidden max-w-lg lg:flex"
 						/>