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;
|
||||
type:
|
||||
| "text"
|
||||
| "number"
|
||||
| "textarea"
|
||||
| "dropdown"
|
||||
| "password"
|
||||
|
|
@ -194,7 +195,7 @@ export const Field: FC<{
|
|||
</div>
|
||||
)}
|
||||
|
||||
{["text", "password"].includes(type) && (
|
||||
{["text", "number", "password"].includes(type) && (
|
||||
<Input
|
||||
{...field}
|
||||
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