Merge pull request #3 from ArkProjectNFTs/feature/dev-368-header-search

Feature/dev 368 header search

apps/arkmarket/app/collection/[collectionAddress]/components/header.tsx

@@ -1,13 +1,21 @@
 import React from "react";
 
+import type { CollectionMetadata } from "../queries/fetchCollectionMetadata";
+
 interface HeaderProps {
-  collectionMetadata: unknown;
+  collectionMetadata: CollectionMetadata;
 }
 
 const Header = ({ collectionMetadata }: HeaderProps) => {
+  console.log("collectionMetadata", collectionMetadata);
+  if (!collectionMetadata) return null;
   return (
     <div className="border-b">
-      <div className="flex h-16 items-center px-4">Header</div>
+      <div className="flex h-16 items-center px-4">
+        {collectionMetadata.name
+          ? collectionMetadata.name
+          : "Missing name information"}
+      </div>
     </div>
   );
 };

apps/arkmarket/app/collection/[collectionAddress]/layout.tsx

@@ -13,7 +13,7 @@ export default async function CollectionLayout({
   params,
 }: CollectionLayoutProps) {
   const { collectionAddress } = params;
-  const collectionMetadata: unknown =
+  const { result: collectionMetadata } =
     await fetchCollectionMetadata(collectionAddress);
 
   return (

apps/arkmarket/app/collection/[collectionAddress]/queries/fetchCollectionMetadata.ts

@@ -1,5 +1,17 @@
 import { env } from "~/env";
 
+export interface CollectionMetadata {
+  name: string;
+  contractAddress: string;
+  contractType: string;
+  image: string;
+  symbol: string;
+}
+
+export interface CollectionMetadataResponse {
+  result: CollectionMetadata;
+}
+
 export async function fetchCollectionMetadata(contract_address: string) {
   const response = await fetch(
     `${env.NEXT_PUBLIC_NFT_API_URL}/v1/contracts/${contract_address}`,
@@ -12,5 +24,6 @@ export async function fetchCollectionMetadata(contract_address: string) {
   if (!response.ok) {
     throw new Error("Failed to fetch data");
   }
-  return response.json();
+
+  return response.json() as Promise<CollectionMetadataResponse>;
 }

apps/arkmarket/app/layout.tsx

@@ -6,7 +6,7 @@ import { GeistSans } from "geist/font/sans";
 import { Toaster } from "@ark-market/ui/components/toast";
 import { cn } from "@ark-market/ui/lib/utils";
 
-import { Header } from "~/components/header";
+import { SiteHeader } from "~/components/site-header";
 
 import "@ark-market/ui/globals.css";
 
@@ -54,7 +54,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
       >
         <Providers>
           <div className="flex-col md:flex">
-            <Header />
+            <SiteHeader />
             <div className="flex-1 pt-16">
               {children}
               <SpeedInsights />

apps/arkmarket/components/command-menu.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+
+import { Button } from "@ark-market/ui/components/button";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@ark-market/ui/components/command";
+import { cn } from "@ark-market/ui/lib/utils";
+
+export function CommandMenu({ ...props }) {
+  const [open, setOpen] = React.useState(false);
+
+  React.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);
+  }, []);
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        className={cn(
+          "relative h-10 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-72",
+        )}
+        onClick={() => setOpen(true)}
+        {...props}
+      >
+        <span className="hidden lg:inline-flex">Search collections...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-7 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+          <span className="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a collection name..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

apps/arkmarket/components/header.tsx → apps/arkmarket/components/site-header.tsx

@@ -2,19 +2,23 @@ import React from "react";
 
 import { ThemeToggle } from "@ark-market/ui/components/theme";
 
+import { CommandMenu } from "~/components/command-menu";
 import { MainNav } from "~/components/main-nav";
 import { UserNav } from "~/components/user-nav";
 
-const Header = () => {
+const SiteHeader = () => {
   return (
-    <div className="absolute top-0 z-20 flex h-16 w-full items-center border-b px-5">
+    <div className="absolute top-0 z-20 flex h-16 w-full items-center justify-between border-b px-5">
       <MainNav />
-      <div className="ml-auto flex items-center space-x-4">
+      <div className="w-full flex-1 md:w-auto md:flex-none">
+        <CommandMenu />
+      </div>
+      <div className="flex items-center space-x-4">
         <UserNav />
         <ThemeToggle />
       </div>
     </div>
   );
 };
 
-export { Header };
+export { SiteHeader };

apps/arkmarket/types/index.ts

@@ -1,4 +1,4 @@
-export type TokenMarketData = {
+export interface TokenMarketData {
   token_chain_id: string;
   token_address: string;
   token_id: string;
@@ -20,12 +20,12 @@ export type TokenMarketData = {
     amount: string;
     order_hash: string;
   };
-};
+}
 
-export type ContractInfo = {
+export interface ContractInfo {
   contract_address: string;
   contract_type: string;
   image: string;
   name: string;
   symbol: string;
-};
+}