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, 44 insertions, 0 deletions

diff --git a/src/components/active-link.tsx b/src/components/active-link.tsx
new file mode 100644
index 0000000..bab9670
--- /dev/null
+++ b/src/components/active-link.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { isActive } from '@/lib/is-active';
+import { cn } from '@/lib/utils';
+import Link, { type LinkProps } from 'next/link';
+import { usePathname } from 'next/navigation';
+import type { ReactNode } from 'react';
+
+type ActiveLinkProps = LinkProps & {
+  children: ReactNode;
+  href: string;
+  target?: string;
+  rel?: string;
+  className?: string;
+  nested?: boolean;
+};
+
+export const ActiveLink = ({
+  href,
+  children,
+  className,
+  nested = false,
+  ...props
+}: ActiveLinkProps) => {
+  const pathname = usePathname();
+  const active = isActive(href, pathname, nested);
+
+  return (
+    <Link
+      href={href}
+      target={props.target}
+      rel={props.rel}
+      className={cn(
+        'text-muted-foreground text-sm transition-colors',
+        'hover:text-foreground',
+        active && 'font-medium text-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};