From d07a087839cc6389d38cdc8c9787c9737e08550b Mon Sep 17 00:00:00 2001 From: rizrmd Date: Thu, 21 Mar 2024 21:45:13 -0700 Subject: [PATCH] wip fix --- comps/custom/NavMenu.tsx | 204 +++++++++++++++++++++++++++++++++++ comps/form/Field.tsx | 3 +- comps/ui/navigation-menu.tsx | 133 +++++++++++++++++++++++ 3 files changed, 339 insertions(+), 1 deletion(-) create mode 100755 comps/custom/NavMenu.tsx create mode 100755 comps/ui/navigation-menu.tsx diff --git a/comps/custom/NavMenu.tsx b/comps/custom/NavMenu.tsx new file mode 100755 index 0000000..c22058f --- /dev/null +++ b/comps/custom/NavMenu.tsx @@ -0,0 +1,204 @@ +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/comps/ui/navigation-menu"; +import get from "lodash.get"; +import { FC, forwardRef } from "react"; + +export const NavMenu: FC<{ PassProp: any; child: any }> = ({ + PassProp, + child, +}) => { + return ( + + + {/* + Getting started + +
    +
  • + +
    +
    + shadcn/ui +
    +

    + Beautifully designed components that you can copy and + paste into your apps. Accessible. Customizable. Open + Source. +

    +
    +     +
    • + + Re-usable components built using Radix UI and Tailwind CSS. + + + How to install dependencies and structure your app. + + + Styles for headings, paragraphs, lists...etc + +
+ + + + Components + +
    + {components.map((component) => ( + + {component.description} + + ))} +
+ + */} + {child} + + + ); +}; + +export const NavItem: FC<{ + label: string; + onClick: () => void; + PassProp: any; + child: any; + depth: number; +}> = ({ label, onClick, child, PassProp, depth }) => { + if (depth <= 1) { + const childs = get( + child, + "props.meta.item.component.props.child.content.childs" + ); + + if (Array.isArray(childs) && childs.length > 0) { + return ( + + +
{label}
+ + +
    + {child} +
+ + + ); + } + + return ( + + + {label} + + + ); + } else { + return ( +
  • + +
    + {label} +
    +     +
    • + ); + } +}; + +const ListItem = forwardRef< + React.ElementRef<"a">, + React.ComponentPropsWithoutRef<"a"> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + { + e.preventDefault(); + if (props.onClick) { + props.onClick(e); + } + }} + > +
    {title}
    +

    + {children} +

    +     +     +
    • + ); +}); +ListItem.displayName = "ListItem"; + +const components: { title: string; href: string; description: string }[] = [ + { + title: "Alert Dialog", + href: "/docs/primitives/alert-dialog", + description: + "A modal dialog that interrupts the user with important content and expects a response.", + }, + { + title: "Hover Card", + href: "/docs/primitives/hover-card", + description: + "For sighted users to preview content available behind a link.", + }, + { + title: "Progress", + href: "/docs/primitives/progress", + description: + "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", + }, + { + title: "Scroll-area", + href: "/docs/primitives/scroll-area", + description: "Visually or semantically separates content.", + }, + { + title: "Tabs", + href: "/docs/primitives/tabs", + description: + "A set of layered sections of content—known as tab panels—that are displayed one at a time.", + }, + { + title: "Tooltip", + href: "/docs/primitives/tooltip", + description: + "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", + }, +]; diff --git a/comps/form/Field.tsx b/comps/form/Field.tsx index bc20f07..f42f06d 100755 --- a/comps/form/Field.tsx +++ b/comps/form/Field.tsx @@ -28,6 +28,7 @@ export const Field: FC<{ form?: FormHook; type: | "text" + | "number" | "textarea" | "dropdown" | "password" @@ -194,7 +195,7 @@ export const Field: FC<{ )} - {["text", "password"].includes(type) && ( + {["text", "number", "password"].includes(type) && ( , + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + {/* */} + +)); +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName; + +const NavigationMenuList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; + +const NavigationMenuItem = NavigationMenuPrimitive.Item; + +const navigationMenuTriggerStyle = cva( + "c-group c-inline-flex c-h-10 c-w-max c-items-center c-justify-center c-bg-background c-px-4 c-py-2 c-transition-colors hover:c-bg-accent hover:c-text-accent-foreground focus:c-bg-accent focus:c-text-accent-foreground focus:c-outline-none disabled:c-pointer-events-none disabled:c-opacity-50 data-[active]:c-bg-accent/50 data-[state=open]:c-bg-accent/50" +); + +const NavigationMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + +)); +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName; + +const NavigationMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName; + +const NavigationMenuLink = NavigationMenuPrimitive.Link; + +const NavigationMenuViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
    + +
    +)); +NavigationMenuViewport.displayName = + NavigationMenuPrimitive.Viewport.displayName; + +const NavigationMenuIndicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
    + +)); +NavigationMenuIndicator.displayName = + NavigationMenuPrimitive.Indicator.displayName; + +export { + navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +};