From f2a4488d299836605477c42dde03c08fd7191c22 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 18 Mar 2022 16:21:59 +0000 Subject: [PATCH] Added a search bar to the path bar --- app/components/Icons/ShortcutIcon.tsx | 4 +--- app/components/JsonView.tsx | 4 +++- app/components/SearchBar.tsx | 26 ++++++++++++++++++++++ app/components/SideBar.tsx | 32 ++++++++++++++++++++------- 4 files changed, 54 insertions(+), 12 deletions(-) create mode 100644 app/components/SearchBar.tsx diff --git a/app/components/Icons/ShortcutIcon.tsx b/app/components/Icons/ShortcutIcon.tsx index 30c61ee..99acd39 100644 --- a/app/components/Icons/ShortcutIcon.tsx +++ b/app/components/Icons/ShortcutIcon.tsx @@ -5,9 +5,7 @@ export const ShortcutIcon: FunctionComponent<{ className?: string }> = ({ children, }) => { return ( - + {children} ); diff --git a/app/components/JsonView.tsx b/app/components/JsonView.tsx index e0dd3c0..e0b63af 100644 --- a/app/components/JsonView.tsx +++ b/app/components/JsonView.tsx @@ -1,16 +1,18 @@ import React from "react"; import { PathBar, PathHistoryControls } from "./PathBar"; +import { SearchBar } from "./SearchBar"; export function JsonView({ children }: { children: React.ReactNode }) { return (
-
+
+
{children} diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx new file mode 100644 index 0000000..78fbb63 --- /dev/null +++ b/app/components/SearchBar.tsx @@ -0,0 +1,26 @@ +import { SearchIcon } from "@heroicons/react/outline"; +import { ShortcutIcon } from "./Icons/ShortcutIcon"; +import { Body } from "./Primitives/Body"; + +export type SearchBarProps = { + className?: string; +}; + +export function SearchBar({ className }: SearchBarProps) { + return ( +
+
+ + Search… +
+
+ + ⌘ + + + K + +
+
+ ); +} diff --git a/app/components/SideBar.tsx b/app/components/SideBar.tsx index df19b19..11c9e4f 100644 --- a/app/components/SideBar.tsx +++ b/app/components/SideBar.tsx @@ -16,24 +16,36 @@ export function SideBar() { Column view - ⌘ - 1 + + ⌘ + + + 1 + JSON view - ⌘ - 2 + + ⌘ + + + 2 + Tree view - ⌘ - 3 + + ⌘ + + + 3 + @@ -42,8 +54,12 @@ export function SideBar() { Terminal - ⌘ - 4 + + ⌘ + + + 4 +