223 lines
13 KiB
TypeScript
223 lines
13 KiB
TypeScript
'use client'
|
|
import React from "react";
|
|
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
|
|
import { X } from "lucide-react";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/components/ui/command";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Link } from '@/i18n/routing';
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
const HeaderSearch = () => {
|
|
const [config] = useConfig();
|
|
if (config.layout === 'horizontal') return null
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
|
|
<button
|
|
type="button"
|
|
className="flex items-center xl:text-sm text-lg xl:text-default-400 text-default-800 dark:text-default-700 gap-3"
|
|
|
|
>
|
|
<Icon icon="heroicons-outline:search" />
|
|
<span className="xl:inline-block hidden">Search... </span>
|
|
</button>
|
|
</DialogTrigger>
|
|
<DialogContent className="p-0">
|
|
<Command className=" bg-card">
|
|
<div className="flex items-center border-b border-default-200">
|
|
<CommandInput
|
|
placeholder=""
|
|
className="h-14 border-b-0"
|
|
/>
|
|
</div>
|
|
<CommandList className="py-5 px-3 max-h-[500px]">
|
|
<CommandEmpty>No results found.</CommandEmpty>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
|
<CommandGroup
|
|
heading="Populer Searches"
|
|
className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
|
|
[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest
|
|
"
|
|
>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/calendar-page"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:calendar-days" />
|
|
<span>Calendar</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:chart-bar" />
|
|
<span>Analytics</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/ecommerce"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:shopping-bag" />
|
|
<span>eCommerce</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 ">
|
|
<Link
|
|
href="/project"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:building-library" />
|
|
<span>Project Page</span>
|
|
</Link>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandGroup
|
|
heading="Apps & Pages"
|
|
className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
|
|
[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest
|
|
"
|
|
>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/chat"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:chat-bubble-bottom-center" />
|
|
<span>Chat</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/email"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:envelope" />
|
|
<span>Email</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:user" />
|
|
<span>Sign In</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0">
|
|
<Link
|
|
href="/calendar-page"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:chart-bar" />
|
|
<span>Appex Chart</span>
|
|
</Link>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandGroup
|
|
heading="UI Elements"
|
|
className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
|
|
[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest"
|
|
>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/accordion"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:bars-3" />
|
|
<span>Accordion</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-1">
|
|
<Link
|
|
href="/checkbox"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:check" />
|
|
<span>Checkboxes</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-1">
|
|
<Link
|
|
href="/alert"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:megaphone" />
|
|
<span>Alert</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-1">
|
|
<Link
|
|
href="/pagination"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:document-text" />
|
|
<span>Pagination</span>
|
|
</Link>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
<CommandGroup
|
|
heading="Forms & Tables"
|
|
className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
|
|
[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest"
|
|
>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/simple-table"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:table-cells" />
|
|
<span>Simple Table</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/tailwindui-table"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:table-cells" />
|
|
<span>Tailwind Ui Table</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
|
|
<Link
|
|
href="/data-table"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:table-cells" />
|
|
<span>Tanstack Table</span>
|
|
</Link>
|
|
</CommandItem>
|
|
<CommandItem className="aria-selected:bg-transparent p-0">
|
|
<Link
|
|
href="/calendar-page"
|
|
className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
|
|
>
|
|
<Icon icon="heroicons:clipboard-document-list" />
|
|
<span>Forms</span>
|
|
</Link>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</div>
|
|
</CommandList>
|
|
</Command>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default HeaderSearch;
|