mirror of
https://github.com/shareAI-lab/analysis_claude_code.git
synced 2026-08-11 08:33:48 +08:00
feat: build an AI agent from 0 to 1 -- 11 progressive sessions
- 11 sessions from basic agent loop to autonomous teams - Python MVP implementations for each session - Mental-model-first docs in en/zh/ja - Interactive web platform with step-through visualizations - Incremental architecture: each session adds one mechanism
This commit is contained in:
CrazyBoyM
167
web/src/components/layout/header.tsx
Normal file
167
web/src/components/layout/header.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useTranslations, useLocale } from "@/lib/i18n";
|
||||
import { Github, Menu, X, Sun, Moon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ key: "timeline", href: "/timeline" },
|
||||
{ key: "compare", href: "/compare" },
|
||||
{ key: "layers", href: "/layers" },
|
||||
] as const;
|
||||
|
||||
const LOCALES = [
|
||||
{ code: "en", label: "EN" },
|
||||
{ code: "zh", label: "中文" },
|
||||
{ code: "ja", label: "日本語" },
|
||||
];
|
||||
|
||||
export function Header() {
|
||||
const t = useTranslations("nav");
|
||||
const pathname = usePathname();
|
||||
const locale = useLocale();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [dark, setDark] = useState(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
const stored = localStorage.getItem("theme");
|
||||
if (stored) return stored === "dark";
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
function toggleDark() {
|
||||
const next = !dark;
|
||||
setDark(next);
|
||||
document.documentElement.classList.toggle("dark", next);
|
||||
localStorage.setItem("theme", next ? "dark" : "light");
|
||||
}
|
||||
|
||||
function switchLocale(newLocale: string) {
|
||||
const newPath = pathname.replace(`/${locale}`, `/${newLocale}`);
|
||||
window.location.href = newPath;
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-sm">
|
||||
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<Link href={`/${locale}`} className="text-lg font-bold">
|
||||
Learn Claude Code
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-6 md:flex">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={`/${locale}${item.href}`}
|
||||
className={cn(
|
||||
"text-sm font-medium transition-colors hover:text-zinc-900 dark:hover:text-white",
|
||||
pathname.includes(item.href)
|
||||
? "text-zinc-900 dark:text-white"
|
||||
: "text-zinc-500 dark:text-zinc-400"
|
||||
)}
|
||||
>
|
||||
{t(item.key)}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Locale switcher */}
|
||||
<div className="flex items-center gap-1 rounded-lg border border-[var(--color-border)] p-0.5">
|
||||
{LOCALES.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={cn(
|
||||
"rounded-md px-2 py-1 text-xs font-medium transition-colors",
|
||||
locale === l.code
|
||||
? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
|
||||
: "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400"
|
||||
)}
|
||||
>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={toggleDark}
|
||||
className="rounded-md p-1.5 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
{dark ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="https://github.com/shareAI-lab/learn-claude-code"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
<Github size={18} />
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
className="flex min-h-[44px] min-w-[44px] items-center justify-center md:hidden"
|
||||
>
|
||||
{mobileOpen ? <X size={20} /> : <Menu size={20} />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu */}
|
||||
{mobileOpen && (
|
||||
<div className="border-t border-[var(--color-border)] bg-[var(--color-bg)] p-4 md:hidden">
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<Link
|
||||
key={item.key}
|
||||
href={`/${locale}${item.href}`}
|
||||
className="flex min-h-[44px] items-center text-sm"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{t(item.key)}
|
||||
</Link>
|
||||
))}
|
||||
<div className="mt-3 flex items-center justify-between border-t border-[var(--color-border)] pt-3">
|
||||
<div className="flex gap-2">
|
||||
{LOCALES.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={cn(
|
||||
"min-h-[44px] min-w-[44px] rounded-md px-3 text-xs font-medium",
|
||||
locale === l.code
|
||||
? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900"
|
||||
: "border border-[var(--color-border)]"
|
||||
)}
|
||||
>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={toggleDark}
|
||||
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
{dark ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
<a
|
||||
href="https://github.com/shareAI-lab/learn-claude-code"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="flex min-h-[44px] min-w-[44px] items-center justify-center text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
<Github size={18} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
66
web/src/components/layout/sidebar.tsx
Normal file
66
web/src/components/layout/sidebar.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { LAYERS, VERSION_META } from "@/lib/constants";
|
||||
import { useTranslations } from "@/lib/i18n";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const LAYER_DOT_BG: Record<string, string> = {
|
||||
tools: "bg-blue-500",
|
||||
planning: "bg-emerald-500",
|
||||
memory: "bg-purple-500",
|
||||
concurrency: "bg-amber-500",
|
||||
collaboration: "bg-red-500",
|
||||
};
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const locale = pathname.split("/")[1] || "en";
|
||||
const t = useTranslations("sessions");
|
||||
const tLayer = useTranslations("layer_labels");
|
||||
|
||||
return (
|
||||
<nav className="hidden w-56 shrink-0 md:block">
|
||||
<div className="sticky top-[calc(3.5rem+2rem)] space-y-5">
|
||||
{LAYERS.map((layer) => (
|
||||
<div key={layer.id}>
|
||||
<div className="flex items-center gap-1.5 pb-1.5">
|
||||
<span className={cn("h-2 w-2 rounded-full", LAYER_DOT_BG[layer.id])} />
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
|
||||
{tLayer(layer.id)}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-0.5">
|
||||
{layer.versions.map((vId) => {
|
||||
const meta = VERSION_META[vId];
|
||||
const href = `/${locale}/${vId}`;
|
||||
const isActive =
|
||||
pathname === href ||
|
||||
pathname === `${href}/` ||
|
||||
pathname.startsWith(`${href}/diff`);
|
||||
|
||||
return (
|
||||
<li key={vId}>
|
||||
<Link
|
||||
href={href}
|
||||
className={cn(
|
||||
"block rounded-md px-2.5 py-1.5 text-sm transition-colors",
|
||||
isActive
|
||||
? "bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800 dark:text-white"
|
||||
: "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-300"
|
||||
)}
|
||||
>
|
||||
<span className="font-mono text-xs">{vId}</span>
|
||||
<span className="ml-1.5">{t(vId) || meta?.title}</span>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user