From 2bc140db33320a3e437a518ff12cc75ca5257026 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 18 Jun 2026 18:10:16 +0000 Subject: [PATCH] Fix lucide-react icon export errors in BookNest page --- src/App.tsx | 2 + src/pages/BookNest.tsx | 359 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 361 insertions(+) create mode 100644 src/pages/BookNest.tsx diff --git a/src/App.tsx b/src/App.tsx index 53b5c8c..2f10207 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import Sidebar from './components/Sidebar' import TopBar from './components/TopBar' import Glance from './pages/Glance' import Infrastructure from './pages/Infrastructure' +import BookNest from './pages/BookNest' function App() { const [sidebarCollapsed, setSidebarCollapsed] = useState(false) @@ -55,6 +56,7 @@ function App() { } /> } /> + } /> diff --git a/src/pages/BookNest.tsx b/src/pages/BookNest.tsx new file mode 100644 index 0000000..8248a3e --- /dev/null +++ b/src/pages/BookNest.tsx @@ -0,0 +1,359 @@ +import { useState } from 'react' +import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts' +import { + Link2, + FolderOpen, + Star, + Server, + Bot, + Cloud, + Network, + GitBranch, + GitFork, + Box, + Terminal as TerminalIcon, + Database, + Shield, + Workflow, + FileCode, + Router, + Wifi, + BookOpen, + GraduationCap, + SquarePlay, + Briefcase, + Wallet, + CreditCard, + PiggyBank, + TrendingUp, + Calendar, + Mail, + Image, + HardDrive, + FileText, + Plane, + Sparkles, + MessageSquare, + Zap, + Globe2, + Container, +} from 'lucide-react' + +const quickAccess = [ + { label: 'Infrastructure', icons: [Server, Cloud, Box, Shield, Container], count: 5 }, + { label: 'Development', icons: [GitBranch, GitFork, FileCode, TerminalIcon, Container], count: 5 }, + { label: 'AI Tools', icons: [Bot, Sparkles, MessageSquare, Zap, Bot], count: 5 }, + { label: 'AWS', icons: [Cloud, Database, Server, Shield, Globe2], count: 5 }, + { label: 'Networking', icons: [Network, Wifi, Router, Shield, Globe2], count: 5 }, +] + +type Link = { name: string; icon: typeof Link2; favorited?: boolean } + +const groups: { title: string; links: Link[] }[] = [ + { + title: 'Infrastructure & Self Hosted', + links: [ + { name: 'CasaOS', icon: Server }, + { name: 'Proxmox (pve1)', icon: Box, favorited: true }, + { name: 'Proxmox (mtr)', icon: Box }, + { name: 'Portainer', icon: Container }, + { name: 'Cockpit', icon: Server }, + { name: 'Cloudflare', icon: Cloud }, + { name: 'NPM', icon: Network }, + { name: 'NetBird', icon: Wifi, favorited: true }, + { name: 'Linode', icon: Cloud }, + { name: 'RackNerd', icon: Server }, + ], + }, + { + title: 'Development & Code', + links: [ + { name: 'GitHub', icon: GitBranch, favorited: true }, + { name: 'Gitea', icon: GitFork }, + { name: 'Trilium Notes', icon: FileText }, + { name: 'VSCode Web', icon: FileCode }, + { name: 'Docker Hub', icon: Container }, + { name: 'GitLab', icon: GitFork }, + { name: 'Terraform Registry', icon: Workflow }, + { name: 'Ansible Galaxy', icon: Workflow }, + ], + }, + { + title: 'Lab & Networking', + links: [ + { name: 'GNS3', icon: Network }, + { name: 'EVE-NG', icon: Network }, + { name: 'OpenClaw', icon: Shield }, + { name: 'NetBird', icon: Wifi, favorited: true }, + { name: 'Cisco Docs', icon: BookOpen }, + { name: 'Juniper Docs', icon: BookOpen }, + { name: 'Wireshark', icon: Database }, + { name: 'iPerf3', icon: Zap }, + ], + }, + { + title: 'AWS', + links: [ + { name: 'AWS Console', icon: Cloud, favorited: true }, + { name: 'IAM', icon: Shield }, + { name: 'EC2', icon: Server }, + { name: 'S3', icon: Database }, + { name: 'CloudFormation', icon: Workflow }, + { name: 'Route 53', icon: Globe2 }, + { name: 'VPC', icon: Network }, + { name: 'Billing', icon: CreditCard }, + ], + }, + { + title: 'AI Tools', + links: [ + { name: 'ChatGPT', icon: Bot, favorited: true }, + { name: 'Claude', icon: Sparkles }, + { name: 'Gemini', icon: Sparkles }, + { name: 'PartyRock', icon: Zap }, + { name: 'Perplexity', icon: MessageSquare }, + { name: 'OpenWebUI', icon: Bot }, + { name: 'Ollama', icon: Bot }, + ], + }, + { + title: 'Learning', + links: [ + { name: 'WGU', icon: GraduationCap }, + { name: 'Udemy', icon: BookOpen }, + { name: 'AWS Skill Builder', icon: GraduationCap }, + { name: 'YouTube', icon: SquarePlay }, + { name: 'LinkedIn Learning', icon: Briefcase }, + { name: 'Coursera', icon: GraduationCap }, + ], + }, + { + title: 'Finance', + links: [ + { name: 'Bank', icon: Wallet }, + { name: 'Budget', icon: PiggyBank }, + { name: 'Investments', icon: TrendingUp }, + { name: 'Retirement', icon: PiggyBank }, + { name: 'Credit Cards', icon: CreditCard }, + ], + }, + { + title: 'Life', + links: [ + { name: 'Calendar', icon: Calendar }, + { name: 'Email', icon: Mail }, + { name: 'Photos', icon: Image }, + { name: 'Drive', icon: HardDrive }, + { name: 'Notes', icon: FileText }, + { name: 'Travel', icon: Plane }, + ], + }, +] + +const favorites = [ + { name: 'Proxmox (pve1)', icon: Box }, + { name: 'GitHub', icon: GitBranch }, + { name: 'AWS Console', icon: Cloud }, + { name: 'ChatGPT', icon: Bot }, + { name: 'NetBird', icon: Wifi }, +] + +const recentlyUsed = [ + { name: 'Proxmox', time: '5m ago' }, + { name: 'GitHub', time: '15m ago' }, + { name: 'AWS Console', time: '1h ago' }, + { name: 'Trilium', time: '2h ago' }, + { name: 'GNS3', time: '3h ago' }, +] + +const linkHealthData = [ + { name: 'Online', value: 304, color: '#2ECC71' }, + { name: 'Warning', value: 6, color: '#E67E22' }, + { name: 'Offline', value: 2, color: '#E74C3C' }, +] + +const categoryBreakdownData = [ + { name: 'Infrastructure', value: 32, color: '#C8A434' }, + { name: 'Development', value: 24, color: '#3B82F6' }, + { name: 'AI Tools', value: 18, color: '#2ECC71' }, + { name: 'Learning', value: 10, color: '#E67E22' }, + { name: 'Finance', value: 8, color: '#7A7D85' }, + { name: 'Life', value: 8, color: '#8B5E3C' }, +] + +const cardBase: React.CSSProperties = { + backgroundColor: 'rgba(10, 10, 12, 0.92)', + border: '1px solid rgba(200, 164, 52, 0.08)', + borderRadius: '12px', + padding: '18px', + boxShadow: '0 0 20px rgba(200, 164, 52, 0.03)', + transition: 'border-color 0.2s ease', + position: 'relative', + overflow: 'hidden', + display: 'flex', + flexDirection: 'column', +} + +const sectionTitle: React.CSSProperties = { + fontSize: '11px', + textTransform: 'uppercase', + letterSpacing: '1.5px', + color: '#7A7D85', + fontWeight: 500, + marginBottom: '14px', +} + +function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) { + return ( +
+
+ + + + {data.map((entry) => ( + + ))} + + + + {centerLabel && ( +
+ {centerLabel} +
+ )} +
+
+ {data.map((entry) => ( +
+ + {entry.name} + {entry.value} +
+ ))} +
+
+ ) +} + +function LinkRow({ link, favorited, onToggle }: { link: Link; favorited: boolean; onToggle: () => void }) { + const Icon = link.icon + return ( +
+
+ + {link.name} +
+ +
+ ) +} + +export default function BookNest() { + const [favoritedSet, setFavoritedSet] = useState>( + () => new Set(groups.flatMap((g) => g.links.filter((l) => l.favorited).map((l) => l.name))) + ) + + function toggleFavorite(name: string) { + setFavoritedSet((prev) => { + const next = new Set(prev) + if (next.has(name)) next.delete(name) + else next.add(name) + return next + }) + } + + return ( +
+ {/* Page stats */} +
+ 312 Links + 18 Categories + 12 Favorites +
+ +
+ {/* Main column */} +
+ {/* Quick Access */} +
+ {quickAccess.map((qa) => ( +
+ {qa.label} +
+ {qa.icons.map((Icon, i) => ( +
+ +
+ ))} +
+ {qa.count} links +
+ ))} +
+ + {/* Bookmark groups grid */} +
+ {groups.map((group) => ( +
+

{group.title}

+
+ {group.links.map((link) => ( + toggleFavorite(link.name)} + /> + ))} +
+
+ ))} +
+
+ + {/* Right sidebar */} +
+
+

Favorites

+
+ {favorites.map((f) => ( +
+ + {f.name} +
+ ))} +
+
+ +
+

Recently Used

+
+ {recentlyUsed.map((r) => ( +
+ {r.name} + {r.time} +
+ ))} +
+
+ +
+

Link Health

+ +
+ +
+

Category Breakdown

+ +
+
+
+
+ ) +}