dev: Updated search to button and modal

do-ob-io · Jun 16, 2024 · 648ccbe · 648ccbe
1 parent 2a999b7
commit 648ccbe
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 36 deletions.
diff --git a/packages/ui/src/Navigation/Navigation.stories.tsx b/packages/ui/src/Navigation/Navigation.stories.tsx
@@ -78,7 +78,6 @@ export const Standard: Story = {
     title: 'Navigation',
     links,
     search: '#search',
-    className: 'bg-foreground/10',
   },
 };
 
@@ -88,7 +87,6 @@ export const Island: Story = {
     variant: 'island',
     links,
     search: '#search',
-    className: 'bg-foreground/10',
   },
 };
 

diff --git a/packages/ui/src/Navigation/NavigationIsland.tsx b/packages/ui/src/Navigation/NavigationIsland.tsx
@@ -24,7 +24,7 @@ export function NavigationIsland({
         <NavigationPart_Brand title={title} image={image} />
       </NavbarContent>
       <NavbarContent justify="center">
-        <div className={clmg(clsx(color && colors, 'flex rounded-full px-4', className))}>
+        <div className={clmg(clsx(color && colors, 'flex rounded-full border-1 border-foreground-200 px-4', className))}>
           <NavigationPart_Links links={links} colors={colors} />
         </div>
       </NavbarContent>

diff --git a/packages/ui/src/Navigation/NavigationStandard.tsx b/packages/ui/src/Navigation/NavigationStandard.tsx
@@ -17,7 +17,7 @@ export function NavigationStandard({
   const [ colors ] = twColors(color);
 
   return (
-    <Navbar className={clmg(clsx(color && colors, className))}>
+    <Navbar className={clmg(clsx(color && colors, 'border-b-1 border-b-foreground-200', className))}>
       <NavbarContent justify="start">
         <NavigationPart_Brand title={title} />
       </NavbarContent>

diff --git a/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx b/packages/ui/src/Navigation/parts/NavigationPart_Links.tsx
@@ -20,7 +20,7 @@ export interface NavigationPart_LinksProps {
 
 function LinkLeaf({ link }: { link: LinkType }) {
   return (
-    <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-500">
+    <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-200">
       <Button
         as={Link}
         href={link.url}
@@ -42,38 +42,40 @@ function LinkBranch({ links, level }: { links: LinkType[], level: number }) {
 
   const pl = level * 1;
 
-  return links.map((link) => (<div className="relative w-full">
-    <Divider
-      orientation="vertical"
-      className="absolute top-0 h-full"
-      style={{
-        display: level === 1 ? 'none' : 'block',
-        left: `${pl - 1}rem`,
-      }}
-    />
-    <Link
-      href={link.url}
-      className={clsx(...classes, 'box-border w-full rounded py-2 pr-4 text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10')}
-      style={{
-        paddingLeft: `${pl}rem`,
-      }}
-    >
-      {link.title}
-    </Link>
-    {link.links?.length && (
-      <div className="w-full [&:last-child]:mb-0">
-        <LinkBranch links={link.links} level={level + 1} />
-      </div>
-    )}
-  </div>));
+  return links.map((link) => (
+    <div key={link.title} className="relative w-full">
+      <Divider
+        orientation="vertical"
+        className="absolute top-0 h-full"
+        style={{
+          display: level === 1 ? 'none' : 'block',
+          left: `${pl - 1}rem`,
+        }}
+      />
+      <Link
+        href={link.url}
+        className={clsx(...classes, 'box-border w-full rounded py-2 pr-4 text-inherit hover:bg-black/10 hover:underline dark:hover:bg-white/10')}
+        style={{
+          paddingLeft: `${pl}rem`,
+        }}
+      >
+        {link.title}
+      </Link>
+      {link.links?.length && (
+        <div className="w-full [&:last-child]:mb-0">
+          <LinkBranch links={link.links} level={level + 1} />
+        </div>
+      )}
+    </div>
+  ));
 }
 
 function LinkTrunk({ link, colors }: { link: LinkType, colors?: string }) {
   return (
     <Popover
       placement="bottom"
     >
-      <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-500">
+      <NavbarMenuItem className="border-y-4 border-transparent hover:border-b-primary-200">
         <PopoverTrigger>
           <Button
             variant="light"

diff --git a/packages/ui/src/Navigation/parts/NavigationPart_Search.tsx b/packages/ui/src/Navigation/parts/NavigationPart_Search.tsx
@@ -1,5 +1,5 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { Button, Modal, useDisclosure } from '@nextui-org/react';
+import { Button, Modal, ModalHeader, ModalBody, useDisclosure, ModalContent, Input, Kbd } from '@nextui-org/react';
 
 /**
  * Navigation Brand properties
@@ -18,11 +18,41 @@ export function NavigationPart_Search({
   search = '#'
 }: NavigationPart_SearchProps) {
 
-  const { isOpen, onOpen } = useDisclosure();
+  const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
 
-  return (
-    <Button isIconOnly onClick={onOpen}>
-      <MagnifyingGlassIcon className="size-6" />
+  return (<>
+    <Button isIconOnly onPress={onOpen} size="sm">
+      <MagnifyingGlassIcon className="size-5" />
     </Button>
-  );
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      title="Search"
+      size="md"
+      hideCloseButton
+    >
+      <ModalContent>
+        <ModalHeader className="p-1">
+          <form action={search} method="get" className="w-full">
+            <Input
+              classNames={{
+                base: 'max-w-full h-12',
+                mainWrapper: 'h-full',
+                input: 'text-xl',
+                inputWrapper: 'h-full font-normal text-default-500 bg-transparent shadow-none',
+              }}
+              placeholder="Search website..."
+              size="lg"
+              startContent={<MagnifyingGlassIcon className="size-7" />}
+              endContent={<Kbd onClick={onClose} className="cursor-pointer">ESC</Kbd>}
+              type="search"
+            />
+          </form>
+        </ModalHeader>
+        <ModalBody className="p-2">
+          &nbsp;
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  </>);
 }