wip fix
This commit is contained in:
rizrmd
parent
5af47da93a
commit
d07a087839
|
|
@ -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 (
|
||||||
|
<NavigationMenu>
|
||||||
|
<NavigationMenuList>
|
||||||
|
{/* <NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
|
||||||
|
<li className="row-span-3">
|
||||||
|
<NavigationMenuLink asChild>
|
||||||
|
<div className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
|
||||||
|
<div className="mb-2 mt-4 text-lg font-medium">
|
||||||
|
shadcn/ui
|
||||||
|
</div>
|
||||||
|
<p className="text-sm leading-tight text-muted-foreground">
|
||||||
|
Beautifully designed components that you can copy and
|
||||||
|
paste into your apps. Accessible. Customizable. Open
|
||||||
|
Source.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</li>
|
||||||
|
<ListItem href="/docs" title="Introduction">
|
||||||
|
Re-usable components built using Radix UI and Tailwind CSS.
|
||||||
|
</ListItem>
|
||||||
|
<ListItem href="/docs/installation" title="Installation">
|
||||||
|
How to install dependencies and structure your app.
|
||||||
|
</ListItem>
|
||||||
|
<ListItem href="/docs/primitives/typography" title="Typography">
|
||||||
|
Styles for headings, paragraphs, lists...etc
|
||||||
|
</ListItem>
|
||||||
|
</ul>
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||||
|
{components.map((component) => (
|
||||||
|
<ListItem
|
||||||
|
key={component.title}
|
||||||
|
title={component.title}
|
||||||
|
href={component.href}
|
||||||
|
>
|
||||||
|
{component.description}
|
||||||
|
</ListItem>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem> */}
|
||||||
|
<PassProp>{child}</PassProp>
|
||||||
|
</NavigationMenuList>
|
||||||
|
</NavigationMenu>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger onClick={onClick}>
|
||||||
|
<div>{label}</div>
|
||||||
|
</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<ul className="c-grid c-min-w-[200px]">
|
||||||
|
<PassProp depth={depth + 1}>{child}</PassProp>
|
||||||
|
</ul>
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuLink
|
||||||
|
className={navigationMenuTriggerStyle()}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<NavigationMenuLink asChild>
|
||||||
|
<div
|
||||||
|
className={cx(
|
||||||
|
"c-cursor-pointer c-px-2 c-py-[6px] c-border-t",
|
||||||
|
css`
|
||||||
|
&:first {
|
||||||
|
border-top: 0px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: #ebf3fc;
|
||||||
|
}
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
onClick={onClick}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ListItem = forwardRef<
|
||||||
|
React.ElementRef<"a">,
|
||||||
|
React.ComponentPropsWithoutRef<"a">
|
||||||
|
>(({ className, title, children, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<li>
|
||||||
|
<NavigationMenuLink asChild>
|
||||||
|
<a
|
||||||
|
ref={ref}
|
||||||
|
className={cx(
|
||||||
|
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (props.onClick) {
|
||||||
|
props.onClick(e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="text-sm font-medium leading-none">{title}</div>
|
||||||
|
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</NavigationMenuLink>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
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.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -28,6 +28,7 @@ export const Field: FC<{
|
||||||
form?: FormHook;
|
form?: FormHook;
|
||||||
type:
|
type:
|
||||||
| "text"
|
| "text"
|
||||||
|
| "number"
|
||||||
| "textarea"
|
| "textarea"
|
||||||
| "dropdown"
|
| "dropdown"
|
||||||
| "password"
|
| "password"
|
||||||
|
|
@ -194,7 +195,7 @@ export const Field: FC<{
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{["text", "password"].includes(type) && (
|
{["text", "number", "password"].includes(type) && (
|
||||||
<Input
|
<Input
|
||||||
{...field}
|
{...field}
|
||||||
type={type}
|
type={type}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
|
||||||
|
import { cn } from "@/utils";
|
||||||
|
|
||||||
|
const NavigationMenu = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"c-relative c-z-10 c-flex c-max-w-max c-flex-1 c-items-center c-justify-center",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{/* <NavigationMenuViewport /> */}
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
));
|
||||||
|
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuList = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.List>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"c-group c-flex c-flex-1 c-list-none c-items-center c-justify-center",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
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<typeof NavigationMenuPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "c-group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronDown
|
||||||
|
className="c-relative c-top-[1px] c-ml-1 c-h-3 c-w-3 c-transition c-duration-200 group-data-[state=open]:c-rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
));
|
||||||
|
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
// "c-left-0 c-top-0 c-w-full",
|
||||||
|
|
||||||
|
"c-absolute c-top-full c-w-fit c-bg-popover",
|
||||||
|
"c-origin-top-center c-relative c-h-[var(--radix-navigation-menu-viewport-height)] c-w-full c-overflow-hidden c-rounded-md c-border c-bg-popover c-text-popover-foreground c-shadow-lg md:c-w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
"data-[motion^=from-]:c-animate-in data-[motion^=to-]:c-animate-out data-[motion^=from-]:c-fade-in data-[motion^=to-]:c-fade-out data-[motion=from-end]:c-slide-in-from-right-52 data-[motion=from-start]:c-slide-in-from-left-52 data-[motion=to-end]:c-slide-out-to-right-52 data-[motion=to-start]:c-slide-out-to-left-52 md:c-absolute md:c-w-auto c-",
|
||||||
|
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuLink = NavigationMenuPrimitive.Link;
|
||||||
|
|
||||||
|
const NavigationMenuViewport = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div className={cn("c-absolute c-left-0 c-top-full c-flex c-justify-center")}>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
"c-origin-top-center c-relative c-h-[var(--radix-navigation-menu-viewport-height)] c-w-full c-overflow-hidden c-rounded-md c-border c-bg-popover c-text-popover-foreground c-shadow-lg md:c-w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
NavigationMenuViewport.displayName =
|
||||||
|
NavigationMenuPrimitive.Viewport.displayName;
|
||||||
|
|
||||||
|
const NavigationMenuIndicator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"c-top-full c-z-[1] c-flex c-h-1.5 c-items-end c-justify-center c-overflow-hidden data-[state=visible]:c-animate-in data-[state=hidden]:c-animate-out data-[state=hidden]:c-fade-out data-[state=visible]:c-fade-in",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="c-relative c-top-[60%] c-h-2 c-w-2 c-rotate-45 c-rounded-tl-sm c-bg-border c-shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
));
|
||||||
|
NavigationMenuIndicator.displayName =
|
||||||
|
NavigationMenuPrimitive.Indicator.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue