${code}';
+ const codeOpenTag = codeMatch ? codeMatch[0] : '';
+
+ // Extract the content between and
+ const codeContent = html.match(/]*>([\s\S]*?)<\/code>/)?.[1] || '';
+ const lines = codeContent.split('\n');
+
+ // Wrap each line with line number data
+ const numberedLines = lines.map((line, index) => {
+ const lineNumber = index + 1;
+ return `${line}`;
+ }).join('\n');
+
+ return `${preOpenTag}${codeOpenTag}${numberedLines} `;
+ };
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
- toast.success("Code copied to clipboard!", {
- duration: 2000,
- });
+ toast.success("Code copied to clipboard!");
setTimeout(() => setCopied(false), 2000);
} catch (err) {
toast.error("Failed to copy code");
@@ -48,78 +91,99 @@ export const CodeBlock = ({
};
return (
-
- {/* macOS-style Header with Traffic Lights */}
-
+
+ {/* Header with primary color accents */}
+
- {/* macOS Traffic Light Dots */}
-
- {/* Code Content */}
-
-
-
-
+ {/* VS Code style dots with primary color */}
+
- {/* Copy Button */}
+
+
+
- {/* Language Label */}
-
+
{language}
-
- {code}
-
+ {/* Code content with Shiki highlighting and logical line numbers */}
+
);
};
\ No newline at end of file
diff --git a/src/components/ComponentCard.tsx b/src/components/ComponentCard.tsx
index b90698d..387e851 100644
--- a/src/components/ComponentCard.tsx
+++ b/src/components/ComponentCard.tsx
@@ -137,7 +137,7 @@ export const ComponentCard = ({
{/* Tabs Section - Enhanced */}
+ {showLineNumbers && (
+
+
+ {/* Subtle primary color accent at bottom */}
+
+ {Array.from({ length: lineCount }, (_, i) => (
+
+ {i + 1}
+
+ ))}
+
+ )}
+
+ {highlightedCode ? (
+
+ ) : (
+
+ {code}
+
+ )}
-
+
-
+
{preview}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index aa3a781..50b645a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
@@ -22,6 +22,10 @@ const Header = () => {
const { theme, setTheme } = useTheme();
const pathname = usePathname();
+ // Prevent hydration mismatch
+ const [mounted, setMounted] = useState(false);
+ useEffect(() => setMounted(true), []);
+
const navigation = [
{ name: "Home", href: "/", icon: Home },
{ name: "Components", href: "#components", icon: Code2 },
@@ -47,7 +51,6 @@ const Header = () => {
return (
<>
- {/* Skip to main content - Accessibility */}
Skip to main content
@@ -56,18 +59,23 @@ const Header = () => {
{/* Logo */}
-
+