Skip to content

Commit

Permalink
Yj-fix/search-debounce (#15)
Browse files Browse the repository at this point in the history 
* wip: search on keypress

* wip: fix responsiveness

* nit
  • Loading branch information
@jagnani73
jagnani73 authored Oct 22, 2024
1 parent bb646a2 commit e00dec5
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 85 deletions.
2 changes: 1 addition & 1 deletion components/shared/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Footer: React.FC = () => {
];

return (
<footer className="gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-py-8 gbk-px-8 gbk-border-t border-secondary-light dark:border-secondary-dark">
<footer className="gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-py-4 gbk-px-8 gbk-border-t border-secondary-light dark:border-secondary-dark">
<div className="gbk-flex gbk-flex-col gbk-gap-4 gbk-gap-y-2 lg:gbk-flex-row">
{anchors.map(({ content, href }) => (
<a
Expand Down
157 changes: 97 additions & 60 deletions components/shared/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { goldrushConfig } from "@/goldrush.config";
import { timestampParser } from "@/utils/functions";
import { useDebounce } from "@/utils/hooks";
import {
type Price,
type Chain,
Expand All @@ -14,7 +13,7 @@ import { ChainSelector, useGoldRush } from "@covalenthq/goldrush-kit";
import Image from "next/image";
import Link from "next/link";
import { notFound, useParams, usePathname, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";

export const Navbar: React.FC = () => {
const {
Expand Down Expand Up @@ -200,47 +199,38 @@ export const Navbar: React.FC = () => {
}
};

const searchResultsHandler = useCallback(
(input: string, chain: ChainItem) => {
if (!input) return;

const searchType = searchHandler(input);
let page: string | null = null;
switch (searchType) {
case "address":
page = "address";
break;
case "tx":
page = "transaction";
break;
case "block":
page = "block";
break;
default:
push(`/not-found`);
return;
}
push(`/${chain.name}/${page}/${input}`);
},
[push, searchHandler]
);
const searchResultsHandler = (input: string) => {
if (!input || !selectedChain) return;

const searchType = searchHandler(input);
let page: string | null = null;
switch (searchType) {
case "address":
page = "address";
break;
case "tx":
page = "transaction";
break;
case "block":
page = "block";
break;
default:
push(`/not-found`);
return;
}
push(`/${selectedChain.name}/${page}/${input}`);
};

useDebounce(
() => {
if (searchInput && selectedChain) {
searchResultsHandler(searchInput, selectedChain);
}
},
500,
[searchInput, selectedChain]
);
const clearSearchInputHandler = () => {
setSearchInput("");
};

return (
<nav className="bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark border-secondary-light dark:border-secondary-dark gbk-sticky gbk-left-0 gbk-top-0 gbk-z-50 gbk-flex gbk-w-full gbk-flex-wrap gbk-items-center gbk-justify-between gbk-gap-x-4 gbk-border-b gbk-px-8 gbk-py-4 lg:gbk-flex-nowrap">
<div className="gbk-flex gbk-items-center gbk-gap-x-8">
<nav className="bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark border-secondary-light dark:border-secondary-dark gbk-sticky gbk-left-0 gbk-top-0 gbk-z-50 gbk-grid gbk-grid-cols-2 xl:gbk-grid-cols-3 gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-border-b gbk-px-8 gbk-py-4">
<div className="gbk-flex gbk-items-center gbk-gap-x-8 gbk-col-span-2 xl:gbk-col-span-1">
<Link
href={`/${selectedChain?.name}`}
className="gbk-mr-auto gbk-flex gbk-w-fit gbk-items-center gbk-gap-2"
className="gbk-flex gbk-w-fit gbk-items-center gbk-gap-2"
>
<figure className="gbk-relative gbk-h-10 gbk-w-10">
<Image
Expand Down Expand Up @@ -305,33 +295,80 @@ export const Navbar: React.FC = () => {
</p>
</div>
)}
</div>

<input
id="menu"
type="checkbox"
role="button"
onClick={() => setOpen(!open)}
className="gbk-ml-auto lg:gbk-hidden"
defaultChecked={open}
/>
<input
id="menu"
type="checkbox"
role="button"
onClick={() => setOpen(!open)}
className="gbk-ml-auto lg:gbk-hidden"
defaultChecked={open}
/>
</div>

<div
className={`${
open ? "gbk-max-h-40" : "gbk-max-h-0 gbk-overflow-hidden"
} gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-transition-all gbk-duration-500 gbk-ease-in-out lg:gbk-max-h-fit lg:gbk-flex-row`}
} gbk-grid gbk-grid-cols-2 gbk-gap-4 gbk-col-span-2 gbk-w-full gbk-items-center gbk-justify-between gbk-transition-all gbk-duration-500 gbk-ease-in-out lg:gbk-max-h-fit`}
>
<div className="gbk-mt-4 gbk-flex gbk-flex-col gbk-items-center gbk-gap-2 lg:gbk-mx-auto lg:gbk-mt-0 lg:gbk-flex-row">
<input
type="text"
name="search"
value={searchInput}
placeholder="Address / Block / Hash / Domain"
onChange={({ target: { value } }) =>
setSearchInput(value)
}
className="bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark placeholder:text-secondary-light dark:placeholder:text-secondary-dark rounded border border-secondary-light dark:border-secondary-dark gbk-h-9 gbk-w-72 gbk-px-3 gbk-outline-none"
/>
<div className="gbk-col-span-2 lg:gbk-col-span-1 gbk-mt-4 gbk-flex gbk-flex-col lg:gbk-items-center gbk-gap-2 lg:gbk-mx-auto lg:gbk-mt-0 lg:gbk-flex-row">
<form
onSubmit={(e) => {
e.preventDefault();
searchResultsHandler(searchInput);
}}
className="gbk-flex gbk-items-center gbk-gap-x-2 bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark placeholder:text-secondary-light dark:placeholder:text-secondary-dark rounded border border-secondary-light dark:border-secondary-dark gbk-px-2 gbk-w-124 gbk-max-w-full gbk-justify-between gbk-h-9"
>
<input
type="text"
name="search"
value={searchInput}
placeholder="Address / Block / Hash / Domain"
onChange={({ target: { value } }) =>
setSearchInput(value)
}
className="gbk-w-full gbk-outline-none gbk-bg-transparent"
/>

<div className="gbk-flex gbk-items-center gbk-gap-x-2">
<button
type="button"
onClick={() => {
clearSearchInputHandler();
}}
disabled={!searchInput}
className="gbk-w-4"
>
{searchInput ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
fill="currentColor"
className="gbk-w-full"
>
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z" />
</svg>
) : (
"\u00A0"
)}
</button>

<button
type="submit"
disabled={!searchInput}
className="gbk-w-6"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -960 960 960"
fill="currentColor"
className="bg-primary-light dark:bg-primary-dark rounded gbk-p-1 gbk-w-full"
>
<path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580t75.5-184.5T380-840t184.5 75.5T640-580q0 44-14 83t-38 69l252 252zM380-400q75 0 127.5-52.5T560-580t-52.5-127.5T380-760t-127.5 52.5T200-580t52.5 127.5T380-400" />
</svg>
</button>
</div>
</form>

<ChainSelector
onChangeChain={(newChain) =>
Expand All @@ -343,7 +380,7 @@ export const Navbar: React.FC = () => {

<input
id="theme-toggle"
className="dark:text-background-light text-background-dark"
className="dark:text-background-light text-background-dark lg:gbk-ml-auto gbk-w-4 gbk-h-4"
type="checkbox"
defaultChecked={theme.mode === "light"}
onClick={() =>
Expand Down
7 changes: 6 additions & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@ const config: Config = {
],
prefix: "gbk-",
theme: {
extend: {},
extend: {
width: {
104: "26rem",
124: "31rem",
},
},
},
plugins: [],
};
Expand Down
1 change: 0 additions & 1 deletion utils/hooks/index.ts
View file

This file was deleted.

22 changes: 0 additions & 22 deletions utils/hooks/use-debounce.tsx
View file

This file was deleted.

0 comments on commit e00dec5

Please sign in to comment.