diff --git a/app/components/Icons/ArrowKeysUpDownIcon.tsx b/app/components/Icons/ArrowKeysUpDownIcon.tsx new file mode 100644 index 0000000..c96d7ea --- /dev/null +++ b/app/components/Icons/ArrowKeysUpDownIcon.tsx @@ -0,0 +1,23 @@ +export function ArrowKeysUpDownIcon(props: React.SVGProps) { + return ( + + + + + + + ); +} diff --git a/app/components/Icons/LoadingIcon.tsx b/app/components/Icons/LoadingIcon.tsx new file mode 100644 index 0000000..3e7c1c1 --- /dev/null +++ b/app/components/Icons/LoadingIcon.tsx @@ -0,0 +1,27 @@ +export function LoadingIcon(props: React.SVGProps) { + return ( + + + + + ); +} diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx index f897de2..081432b 100644 --- a/app/components/SearchBar.tsx +++ b/app/components/SearchBar.tsx @@ -1,24 +1,27 @@ -import { SearchIcon } from "@heroicons/react/outline"; +import { ExclamationIcon, SearchIcon } from "@heroicons/react/outline"; import { ShortcutIcon } from "./Icons/ShortcutIcon"; import { Body } from "./Primitives/Body"; import { Dialog, DialogTrigger, DialogContent } from "./UI/Dialog"; +import { EscapeKeyIcon } from "./Icons/EscapeKeyIcon"; +import { ArrowKeysUpDownIcon } from "./Icons/ArrowKeysUpDownIcon"; +import { LoadingIcon } from "./Icons/LoadingIcon"; +import { SearchItem } from "./SearchItem"; +import classnames from "~/utilities/classnames"; export type SearchBarProps = { className?: string; }; -import classnames from "~/utilities/classnames"; - export function SearchBar({ className }: SearchBarProps) { return (
-
+
Search…
-
+
⌘ @@ -31,18 +34,79 @@ export function SearchBar({ className }: SearchBarProps) { - +
); } -export default function SearchCommandPalette() { - return
Search Command Palette
; +function JamesCommandPalette() { + return ( + <> +
+ +
+
+
+ + Loading… +
+
+ 35 results +
+
+ + + No results for "sdgiuhnkjdfg" + +
+
+
+
    + + + + + + + + + + + + + +
+
+
+
+ + ⏎ + + to select +
+
+ + to navigate +
+
+ + to close +
+
+ + ); } diff --git a/app/components/SearchItem.tsx b/app/components/SearchItem.tsx new file mode 100644 index 0000000..d230a15 --- /dev/null +++ b/app/components/SearchItem.tsx @@ -0,0 +1,49 @@ +import { ChevronRightIcon } from "@heroicons/react/outline"; +import { ArrayIcon } from "./Icons/ArrayIcon"; +import { Body } from "./Primitives/Body"; +import { Mono } from "./Primitives/Mono"; + +export type SearchItemProps = { + className?: string; +}; +export function SearchItem(className: SearchItemProps) { + return ( +
  • +
    + +
    +
    + item + + includes + + tweets + + … + + 0 + + size + + date +
    +
    + + + 2019 + + -12-31T19:26:16.000Z + + + Tue, Dec 31, + + 2019 + + , 7:26:16 PM GMT + +
    +
    +
    +
    • + ); +} diff --git a/app/components/UI/Dialog.tsx b/app/components/UI/Dialog.tsx index 27519ff..4f72fb0 100644 --- a/app/components/UI/Dialog.tsx +++ b/app/components/UI/Dialog.tsx @@ -8,7 +8,7 @@ export const DialogContent = React.forwardRef< {children} diff --git a/tailwind.config.js b/tailwind.config.js index a995baf..cf35692 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,10 +6,10 @@ module.exports = { tiny: ".5rem", // 8px xs: ".625rem", // 10px sm: ".75rem", // 12px (SmallBody) - base: ".875rem", // 14px (Body)

    - lg: "1rem", // 16px (SmallTitle)

    - xl: "1.125rem", // 18px (Title)

    - "2xl": "1.375rem", // 22px (LargeTitle)

    + base: ".875rem", // 14px (Body)

    + lg: "1rem", // 16px (SmallTitle)

    + xl: "1.125rem", // 18px (Title)

    + "2xl": "1.375rem", // 22px (LargeTitle)

    "3xl": "1.5rem", // 24px "4xl": "1.875rem", // 30px "5xl": "2rem", // 32px