1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* This val creates an enhanced NPM package explorer using the npm registry API.
* It displays a grid of npm packages with basic information, categories, and navigation.
* The approach uses React for the frontend and fetch for API calls.
* It includes a details view for each package, a link to the npm page, and category navigation.
* Icons are added for each category, and additional pill boxes are included for specific topics.
* Clicking on a category pill box loads related packages.
* The app includes a left column for categories and a right column for package details.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState, useCallback } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const ITEMS_PER_PAGE = 30;
// Icon mapping for categories
const categoryIcons = {
all: "🌐",
popular: "🔥",
new: "✨",
frontend: "🖥️",
backend: "🖧",
tools: "🛠️",
css: "🎨",
obsidian: "📓",
architecture: "🏛️",
bim: "🏗️",
geojson: "🗺️",
city: "🏙️",
"3d": "🧊",
projects: "📁",
interior: "🛋️",
furniture: "🪑",
construction: "🚧",
utilities: "🔧",
security: "🔒",
database: "💾",
testing: "🧪",
performance: "⚡",
devops: "🚀",
api: "🔌",
authentication: "🔑",
deployment: "📦",
analytics: "📊",
data: "📚",
animations: "🎞️",
forms: "📝",
plan: "📝",
floorplan: "🔄",
"parametric": "🔧",
"responsive-grids": "🔲",
"svg-editors": "✏️",
"product-sourcing": "📦",
"shipping-calculators": "🚚",
"order-management": "📋",
"payment-gateways": "💳",
"ecommerce-platforms": "🛒",
"supplier-integration": "🔗",
"shopping-carts": "🛍️",
"product-catalogs": "📚",
mesh: "🕸️",
sculpting: "🎭",
"seamless-textures": "🔄",
"ambient-lighting": "🌤️",
"dynamic-lighting": "🌟",
"svg-optimization": "🗜️",
"icon-design": "✒️",
"svg-animations": "🎥",
"flat-illustration": "🟩",
"isometric-illustration": "🔺",
"digital-painting": "🎨",
"css-animations": "🌀",
"javascript-animations": "💻",
keyframes: "🎥",
"fluid-layouts": "💧",
"media-queries": "📏",
breakpoints: "📐",
flexbox: "📐",
"customer-reviews": "⭐",
"storefront-themes": "🎨",
"multi-language": "🌍",
"multi-currency": "💱",
"invoice": "📝",
"pdf": "📄",
"tax-calculations": "💰",
"payment-tracking": "📊",
"automated-reminders": "⏰",
"recurring-billing": "🔄",
"invoice-customization": "🎨",
"invoice-templates": "📑",
blender: "🗿",
"data-science": "📊",
pandas: "🐼",
numpy: "🔢",
matplotlib: "📈",
"machine-learning": "🤖",
};
function App() {