feat: added search-input component

ArkProjectNFTs · Jul 1, 2024 · c17ffbe · c17ffbe
1 parent 2dc8974
commit c17ffbe
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/...rkmarket/src/app/collection/[collectionAddress]/components/collection-items-tools-bar.tsx b/...rkmarket/src/app/collection/[collectionAddress]/components/collection-items-tools-bar.tsx
@@ -1,11 +1,11 @@
 import type { PropsWithClassName } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
 import FiltersIcon from "@ark-market/ui/icons/filters-icon";
-import { Input } from "@ark-market/ui/input";
 
 import "@ark-market/ui/toggle-group";
 
 import { cn } from "@ark-market/ui";
+import { SearchInput } from "@ark-market/ui/search-input";
 
 import type { ViewType } from "../../../../components/view-type-toggle-group";
 import type {
@@ -64,7 +64,7 @@ export default function CollectionItemsToolsBar({
             className="hidden lg:flex"
           />
 
-          <Input className="flex-1" placeholder="Search item" />
+          <SearchInput className="flex-1" placeholder="Search item" />
 
           <CollectionItemsSortingSelect
             className="hidden lg:block"

diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-tools-bar.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-tools-bar.tsx
@@ -2,7 +2,7 @@ import type { PropsWithClassName } from "@ark-market/ui";
 import { cn } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
 import FiltersIcon from "@ark-market/ui/icons/filters-icon";
-import { Input } from "@ark-market/ui/input";
+import { SearchInput } from "@ark-market/ui/search-input";
 
 import type { WalletCollectionsApiResponse } from "../queries/getWalletData";
 import type { ViewType } from "~/components/view-type-toggle-group";
@@ -46,7 +46,7 @@ export default function PortfolioItemsToolsBar({
           <span>Filters</span>
         </Button>
 
-        <Input className="flex-1" placeholder="Search item" />
+        <SearchInput className="flex-1" placeholder="Search item" />
 
         {/* <PortfolioItemsSortingSelect
           className="hidden lg:block"

diff --git a/apps/arkmarket/src/components/site-header.tsx b/apps/arkmarket/src/components/site-header.tsx
@@ -6,7 +6,7 @@ import { usePathname } from "next/navigation";
 import { useMotionValueEvent, useScroll } from "framer-motion";
 
 import { cn } from "@ark-market/ui";
-import { Input } from "@ark-market/ui/input";
+import { SearchInput } from "@ark-market/ui/search-input";
 
 import { MainNav } from "~/components/main-nav";
 import { UserNav } from "~/components/user-nav";
@@ -35,7 +35,7 @@ export default function SiteHeader() {
     >
       <MainNav />
       <div className="w-full flex-1 md:w-auto md:flex-none">
-        <Input
+        <SearchInput
           placeholder="Search Nft, collections and account"
           className="hidden w-80 lg:block"
         />

diff --git a/packages/ui/src/search-input.tsx b/packages/ui/src/search-input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Search } from "lucide-react";
+
+import { cn } from "@ark-market/ui";
+
+import type { InputProps } from "./input";
+import { Input } from "./input";
+
+const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div className={cn("relative w-full", className)}>
+        <Search
+          size={24}
+          className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 transform text-muted-foreground"
+        />
+        <Input ref={ref} type="search" className="pl-10" {...props} />
+      </div>
+    );
+  },
+);
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };