joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored navigation component

Browse Source
This commit is contained in:
Zhenya Goroh
2024-10-08 21:28:50 +03:00
parent 6018a2235a
commit 548541545d
1 changed files with 66 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/navigation.tsx
View File

@@ -62,6 +62,58 @@ export const components: {
},
];
const ListItem = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={ny(
"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}
>
<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>
);
});
const ListItem2 = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
data-umami-event={title}
ref={ref}
className={ny(
"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}
>
<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";
ListItem.displayName = "ListItem2";
export function Navigation() {
return (
<div className="border-grey fixed left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
@@ -116,6 +168,7 @@ export function Navigation() {
<ListItem2
title="Patreon"
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
target="_blank"
>
Support us on Patreon and get exclusive rewards and keep the
project alive.
@@ -123,6 +176,7 @@ export function Navigation() {
<ListItem2
title="Ko-Fi"
href="https://ko-fi.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
target="_blank"
>
Ko-fi is a way to support us with a one-time donation and help
us keep the project alive.
@@ -134,15 +188,18 @@ export function Navigation() {
<NavigationMenuTrigger>{"Useful Links"}</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
{components.map((component) => (
{components.map(
({ description, href, title, isTargetBlank }) => (
<ListItem
key={component.title}
title={component.title}
href={component.href}
key={title}
title={title}
href={href}
target={isTargetBlank ? "_blank" : "_self"}
>
{component.description}
{description}
</ListItem>
))}
),
)}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
@@ -152,55 +209,3 @@ export function Navigation() {
</div>
);
}
const ListItem = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
ref={ref}
className={ny(
"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}
>
<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>
);
});
const ListItem2 = React.forwardRef<
React.ElementRef<"a">,
React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
return (
<li>
<NavigationMenuLink asChild>
<a
data-umami-event={title}
ref={ref}
className={ny(
"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}
>
<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";
ListItem.displayName = "ListItem2";