initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.

1 files changed, 55 insertions, 0 deletions

diff --git a/src/components/sections/header/navbar.tsx b/src/components/sections/header/navbar.tsx
new file mode 100644
index 0000000..25850a0
--- /dev/null
+++ b/src/components/sections/header/navbar.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import Link, { type LinkProps } from 'fumadocs-core/link';
+import { cn } from 'fumadocs-ui/components/api';
+import {
+  NavigationMenu,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+} from 'fumadocs-ui/components/ui/navigation-menu';
+import { type HTMLAttributes, useState } from 'react';
+
+export const Navbar = (props: HTMLAttributes<HTMLElement>) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <NavigationMenu value={value} onValueChange={setValue} asChild>
+      <header
+        id='nd-nav'
+        {...props}
+        className={cn(
+          'sticky top-[var(--fd-banner-height)] z-30 box-content w-full bg-fd-background/80 backdrop-blur-lg transition-colors',
+          'border-border/70 border-b border-dashed dark:border-border',
+          // value.length > 0 ? 'shadow-lg' : 'shadow-xs',
+          props.className,
+        )}
+      >
+        <div
+          className={cn(
+            'container mx-auto flex size-full h-14 flex-row items-center px-4 md:gap-1.5 lg:px-6',
+            'border-border/70 border-dashed sm:border-x dark:border-border',
+          )}
+        >
+          {props.children}
+        </div>
+        <NavigationMenuViewport />
+      </header>
+    </NavigationMenu>
+  );
+};
+
+export const NavbarMenuLink = (props: LinkProps) => {
+  return (
+    <NavigationMenuLink asChild>
+      <Link
+        {...props}
+        className={cn(
+          'flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',
+          props.className,
+        )}
+      >
+        {props.children}
+      </Link>
+    </NavigationMenuLink>
+  );
+};