From c43c8ed45089d734f34d482359bd741c2c35917d Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 15:02:19 -0500 Subject: [PATCH 1/8] added Input component --- apps/web/src/components/ui/input.tsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 apps/web/src/components/ui/input.tsx diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx new file mode 100644 index 0000000..9d631e7 --- /dev/null +++ b/apps/web/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ); + }, +); +Input.displayName = "Input"; + +export { Input }; From a29ced44be2e09714e0269d7d7922dce3d2c0d75 Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 15:05:31 -0500 Subject: [PATCH 2/8] navbar flex rework for folding correctly on smaller viewports --- apps/web/src/components/Navbar/index.tsx | 40 +++++++++---------- .../components/ThemeToggleButton/index.tsx | 12 ++++-- 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx index 469a2c0..3461410 100644 --- a/apps/web/src/components/Navbar/index.tsx +++ b/apps/web/src/components/Navbar/index.tsx @@ -26,18 +26,18 @@ import { // } from "@/components/ui/dropdown-menu"; import { usePathname } from "next/navigation"; -const RadiantLogoDark = ({ width, height, className } : { width: number, height: number, className?: string }) => { +const RadiantLogoDark = ({ className } : { className?: string }) => { return (
- RadiantCommons.com Logo + RadiantCommons.com Logo
); }; -const RadiantLogoLight = ({ width, height, className } : { width: number, height: number, className?: string }) => { +const RadiantLogoLight = ({ className } : { className?: string }) => { return (
- RadiantCommons.com Logo + RadiantCommons.com Logo
); }; @@ -131,25 +131,23 @@ const Breadcrumbs = () => { export const Navbar : FC = () => { return ( -
-
- - - +
+
+ + + -
-

Cuiloa

- {/* NOTE: the 5px of padding-top is to better align the smaller text with the text above, please keep it. */} -

- - A Block Explorer For Penumbra - -

-
+

Cuiloa

+ {/* NOTE: the 5px of padding-top is to better align the smaller text with the text above, please keep it. */} +

+ + Block Explorer For Penumbra + +

-
- - +
+ +
diff --git a/apps/web/src/components/ThemeToggleButton/index.tsx b/apps/web/src/components/ThemeToggleButton/index.tsx index 7602696..38256e3 100644 --- a/apps/web/src/components/ThemeToggleButton/index.tsx +++ b/apps/web/src/components/ThemeToggleButton/index.tsx @@ -1,11 +1,17 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, FC } from "react"; import { LeftPartialEclipse, RightPartialEclipse } from "./EclipseIcon"; import { useTheme } from "next-themes"; import { Button } from "../ui/button"; +import { cn } from "@/lib/utils"; -export const ThemeToggleButton = () => { + +interface ThemeToggleProps { + className?: string; +} + +export const ThemeToggleButton : FC = ({ className }) => { const { setTheme, theme } = useTheme(); const [mounted, setMounted] = useState(false); @@ -18,7 +24,7 @@ export const ThemeToggleButton = () => { const isLight = theme === "light"; return ( - ); From 19905f8160097b373872e511243cae69f4a0f753 Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 16:33:44 -0500 Subject: [PATCH 3/8] basic rework for mobile and desktop UI on searchbar --- apps/web/src/components/Searchbar/index.tsx | 136 ++++++++++++++++++-- 1 file changed, 123 insertions(+), 13 deletions(-) diff --git a/apps/web/src/components/Searchbar/index.tsx b/apps/web/src/components/Searchbar/index.tsx index 9846df4..2a707df 100644 --- a/apps/web/src/components/Searchbar/index.tsx +++ b/apps/web/src/components/Searchbar/index.tsx @@ -1,12 +1,15 @@ "use client"; -import { type FC, useRef, useState, useEffect } from "react"; -import { Command, CommandInput } from "../ui/command"; +import { type FC, useRef, useState, useEffect, useCallback } from "react"; +import { Command, CommandInput, CommandDialog } from "../ui/command"; import { useToast } from "@/components/ui/use-toast"; import { usePathname, useRouter } from "next/navigation"; import { useOnClickOutside } from "usehooks-ts"; import { SearchValidator } from "@/lib/validators/search"; import { cn } from "@/lib/utils"; +import { Button } from "../ui/button"; +import { Search } from "lucide-react"; +import { Input } from "../ui/input"; interface SearchProps { className?: string; @@ -18,6 +21,8 @@ const SearchBar : FC = ({ className }) => { const [input, setInput] = useState(""); const cmdRef = useRef(null); const inputRef = useRef(null); + + const [open, setOpen] = useState(false); const { toast } = useToast(); useOnClickOutside(cmdRef, () => { @@ -30,19 +35,123 @@ const SearchBar : FC = ({ className }) => { cmdRef.current?.blur(); }, [pathname]); - const searchCmd = () => { - router.push(`/search/${input}`); - }; + useEffect(() => { + const down = (e: KeyboardEvent) => { + if (e.key === "k" && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + setOpen((open) => !open); + } + }; + document.addEventListener("keydown", down); + return () => document.removeEventListener("keydown", down); + }, []); + + const search = useCallback((command: () => unknown) => { + setOpen(false); + command(); + }, []); + + // return ( + // + // { + // setInput(text); + // }} + // onKeyDown={(e) => { + // // Aside: Now that this is just a single command input, maybe just convert this to a generic input box? + // if (e.key === "Enter" && input.length !== 0) { + // const searchQuery = SearchValidator.safeParse(input); + // if (searchQuery.success) { + // searchCmd(); + // } + // else { + // toast({ + // variant: "destructive", + // title: "Invalid search query.", + // description: "Try again with a block height, hash hash, or IBC identifier.", + // }); + // } + // } + // }} + // /> + // + // ); + + return ( +
+
+ + { + console.log("text: ", text.currentTarget.value); + setInput(text.currentTarget.value); + }} + onKeyDown={(e) => { + // Aside: Now that this is just a single command input, maybe just convert this to a generic input box? + if (e.key === "Enter" && input.length !== 0) { + const searchQuery = SearchValidator.safeParse(input); + if (searchQuery.success) { + search(() => router.push(`/search/${searchQuery.data.value as string}`)); + } + else { + toast({ + variant: "destructive", + title: "Invalid search query.", + description: "Try again with a block height, hash hash, or IBC identifier.", + }); + } + } + }} + /> + + ⌘K + +
+ +
+ ); return ( - +
+ + { setInput(text); @@ -52,7 +161,7 @@ const SearchBar : FC = ({ className }) => { if (e.key === "Enter" && input.length !== 0) { const searchQuery = SearchValidator.safeParse(input); if (searchQuery.success) { - searchCmd(); + search(() => router.push(`/search/${searchQuery.data.value as string}`)); } else { toast({ @@ -64,7 +173,8 @@ const SearchBar : FC = ({ className }) => { } }} /> - + +
); }; From 8b7d9f28b9ddc1e914156bf3067e68d0b1e47993 Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 16:36:44 -0500 Subject: [PATCH 4/8] added CommandDialogue for desktop --- apps/web/src/components/Searchbar/index.tsx | 56 +-------------------- 1 file changed, 2 insertions(+), 54 deletions(-) diff --git a/apps/web/src/components/Searchbar/index.tsx b/apps/web/src/components/Searchbar/index.tsx index 2a707df..7f7e332 100644 --- a/apps/web/src/components/Searchbar/index.tsx +++ b/apps/web/src/components/Searchbar/index.tsx @@ -1,7 +1,7 @@ "use client"; import { type FC, useRef, useState, useEffect, useCallback } from "react"; -import { Command, CommandInput, CommandDialog } from "../ui/command"; +import { CommandInput, CommandDialog } from "../ui/command"; import { useToast } from "@/components/ui/use-toast"; import { usePathname, useRouter } from "next/navigation"; import { useOnClickOutside } from "usehooks-ts"; @@ -51,39 +51,6 @@ const SearchBar : FC = ({ className }) => { command(); }, []); - // return ( - // - // { - // setInput(text); - // }} - // onKeyDown={(e) => { - // // Aside: Now that this is just a single command input, maybe just convert this to a generic input box? - // if (e.key === "Enter" && input.length !== 0) { - // const searchQuery = SearchValidator.safeParse(input); - // if (searchQuery.success) { - // searchCmd(); - // } - // else { - // toast({ - // variant: "destructive", - // title: "Invalid search query.", - // description: "Try again with a block height, hash hash, or IBC identifier.", - // }); - // } - // } - // }} - // /> - // - // ); - return (
@@ -128,30 +95,11 @@ const SearchBar : FC = ({ className }) => { Search... -
- ); - - return ( -
- { setInput(text); From 3254edb865bd46c97971668088c33692329efa03 Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 16:47:48 -0500 Subject: [PATCH 5/8] Searchbar rework mostly done. Final stylings for mobile UI fixed. --- apps/web/src/components/Searchbar/index.tsx | 8 ++++---- apps/web/src/components/ThemeToggleButton/index.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/web/src/components/Searchbar/index.tsx b/apps/web/src/components/Searchbar/index.tsx index 7f7e332..9dafbac 100644 --- a/apps/web/src/components/Searchbar/index.tsx +++ b/apps/web/src/components/Searchbar/index.tsx @@ -52,7 +52,7 @@ const SearchBar : FC = ({ className }) => { }, []); return ( -
+
= ({ className }) => {
= ({ className }) => { return ( ); }; From 09b5b671c80bb5af8f68f48706811783f117f581 Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 17:01:29 -0500 Subject: [PATCH 6/8] made entire breadcrumb sub-component conditionally rendered, fixing ghost padding + pt on mobile --- apps/web/src/components/Navbar/index.tsx | 60 ++++++++++++++---------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx index 3461410..2356485 100644 --- a/apps/web/src/components/Navbar/index.tsx +++ b/apps/web/src/components/Navbar/index.tsx @@ -51,9 +51,7 @@ const RadiantLogoLight = ({ className } : { className?: string }) => { // TBQF I don't think this sort of error checking is necessary. If anything, it'll cause errors whenever new paths are updated. // if (!segments.every(isBreadcrumbPath)) return null; -const Breadcrumbs = () => { - const pathName = usePathname(); - +const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => { // Don't show breadcrumbs if on index. if (pathName === "/") return null; @@ -129,29 +127,43 @@ const Breadcrumbs = () => { } }; -export const Navbar : FC = () => { +export const Navbar: FC = () => { + const pathName = usePathname(); return ( -
-
- - - - -

Cuiloa

- {/* NOTE: the 5px of padding-top is to better align the smaller text with the text above, please keep it. */} -

- - Block Explorer For Penumbra +

+
+ + + -

-
-
- - -
-
- +

+ + Cuiloa + +

+ {/* NOTE: the 5px of padding-top is to better align the smaller text with the text above, please keep it. */} +

+ + Block Explorer For Penumbra + +

+
+
+ + +
+ {pathName !== "/" ? ( +
+ +
+ ) : null}
-
); }; From 34713ae39548f047f3402ae19a22814cb5f5410c Mon Sep 17 00:00:00 2001 From: ejmg Date: Tue, 27 Aug 2024 17:02:06 -0500 Subject: [PATCH 7/8] removed unnecessary padding from layout. --- apps/web/src/app/(index)/page.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/web/src/app/(index)/page.tsx b/apps/web/src/app/(index)/page.tsx index 931b451..4c1f39c 100644 --- a/apps/web/src/app/(index)/page.tsx +++ b/apps/web/src/app/(index)/page.tsx @@ -28,7 +28,6 @@ interface CardProps { } const LandingCard: FC = ({ heading, children, className, buttonText, buttonLink, disabled = false }) => { - console.log(heading, disabled); return ( @@ -75,7 +74,7 @@ export default function Home() { // console.log(queryClient) return ( -
+
Date: Tue, 27 Aug 2024 17:12:26 -0500 Subject: [PATCH 8/8] more small styling tweaks. searchbar now gets a bit larger depending on viewport size. --- apps/web/src/components/Navbar/index.tsx | 2 +- apps/web/src/components/Searchbar/index.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/Navbar/index.tsx b/apps/web/src/components/Navbar/index.tsx index 2356485..45b0411 100644 --- a/apps/web/src/components/Navbar/index.tsx +++ b/apps/web/src/components/Navbar/index.tsx @@ -156,7 +156,7 @@ export const Navbar: FC = () => {

- +
{pathName !== "/" ? ( diff --git a/apps/web/src/components/Searchbar/index.tsx b/apps/web/src/components/Searchbar/index.tsx index 9dafbac..61288a4 100644 --- a/apps/web/src/components/Searchbar/index.tsx +++ b/apps/web/src/components/Searchbar/index.tsx @@ -53,12 +53,12 @@ const SearchBar : FC = ({ className }) => { return (
-
+
{ console.log("text: ", text.currentTarget.value); @@ -97,7 +97,6 @@ const SearchBar : FC = ({ className }) => {