Merge pull request #1 from wctiger/feature/shadcn

Feature/shadcn

Author: wctiger

package-lock.json

@@ -10,26 +10,38 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.6.1",
-    "@ctrl/tinycolor": "^4.1.0",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@types/lodash": "^4.17.16",
-    "antd": "^5.24.4",
     "axios": "^1.8.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.513.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "semver": "^7.7.1"
+    "semver": "^7.7.1",
+    "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.8",
+    "@types/node": "^24.0.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.2.0",
+    "postcss": "^8.5.4",
+    "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"

package.json

@@ -1,13 +1,10 @@
 import React, { useEffect } from "react";
-import { ThemeProvider } from "./contexts/ThemeContext";
-import AntdProvider from "./contexts/AntdProvider";
 import AppLayout from "./components/AppLayout";
 import SearchBox from "./components/SearchBox";
 import PackageResults from "./components/PackageResults";
 import ErrorDisplay from "./components/ErrorDisplay";
 import { usePackageSearch } from "./hooks/usePackageSearch";
 import { useSearchParams } from "./hooks/useSearchParams";
-import "./App.css";
 
 const AppContent: React.FC = () => {
   // URL params state management
@@ -111,13 +108,7 @@ const AppContent: React.FC = () => {
 };
 
 const App: React.FC = () => {
-  return (
-    <ThemeProvider>
-      <AntdProvider>
-        <AppContent />
-      </AntdProvider>
-    </ThemeProvider>
-  );
+  return <AppContent />;
 };
 
 export default App;

src/App.css

@@ -1,49 +1,51 @@
 import React from "react";
-import { Layout, Typography, Button } from "antd";
-import { GithubOutlined } from "@ant-design/icons";
+import { Button } from "@/components/ui/button";
+import { Github } from "lucide-react";
 import ThemeToggle from "./ThemeToggle";
 
-const { Header, Content, Footer } = Layout;
-const { Link } = Typography;
-
 interface AppLayoutProps {
   children: React.ReactNode;
   onLogoClick: () => void;
 }
 
 const AppLayout: React.FC<AppLayoutProps> = ({ children, onLogoClick }) => {
   return (
-    <Layout style={{ width: "100%", minHeight: "100vh" }}>
-      <Header className="app-header">
-        <Link
-          className="app-logo"
+    <div className="min-h-screen w-full flex flex-col bg-white dark:bg-gray-900">
+      <header className="flex items-center justify-between px-6 py-4 bg-green-700 text-white">
+        <button
           onClick={onLogoClick}
-          style={{ color: "white", cursor: "pointer" }}
+          className="text-xl font-bold text-white hover:text-green-200 cursor-pointer bg-transparent border-none"
         >
           NPM Version Popularity
-        </Link>
+        </button>
         <ThemeToggle />
-      </Header>
-      <Content className="app-content">
-        <div className="app-container">{children}</div>
-      </Content>
-      <Footer className="app-footer">
-        <div className="footer-content">
-          <span>NPM Version Popularity ©{new Date().getFullYear()}</span>
-          <Button
-            type="link"
-            href="https://github.com/wctiger/npm-version-popularity"
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ fontSize: "14px" }}
-            icon={<GithubOutlined />}
-            aria-label="View on GitHub"
-          >
-            View on GitHub
+      </header>
+
+      <main className="flex-1 p-6 w-full">
+        <div className="max-w-7xl w-full mx-auto px-6 text-gray-900 dark:text-gray-100">
+          {children}
+        </div>
+      </main>
+
+      <footer className="text-center w-full py-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+        <div className="flex justify-center items-center gap-4">
+          <span className="text-sm text-gray-600 dark:text-gray-400">
+            NPM Version Popularity ©{new Date().getFullYear()}
+          </span>
+          <Button variant="link" size="sm" asChild className="text-sm">
+            <a
+              href="https://github.com/wctiger/npm-version-popularity"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-green-700 dark:text-green-500"
+            >
+              <Github className="h-4 w-4" />
+              View on GitHub
+            </a>
           </Button>
         </div>
-      </Footer>
-    </Layout>
+      </footer>
+    </div>
   );
 };
 

src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { Alert, Button, Space } from "antd";
-import { ReloadOutlined } from "@ant-design/icons";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { AlertCircle, RotateCcw } from "lucide-react";
 
 interface ErrorDisplayProps {
   errorMessage: string;
@@ -12,19 +13,23 @@ const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
   onReset,
 }) => {
   return (
-    <Space direction="vertical" style={{ width: "100%", marginTop: "24px" }}>
-      <Alert
-        message="Error"
-        description={errorMessage}
-        type="error"
-        showIcon
-        action={
-          <Button icon={<ReloadOutlined />} size="small" onClick={onReset}>
-            Clear
-          </Button>
-        }
-      />
-    </Space>
+    <div className="flex justify-center items-center min-h-[200px] w-full">
+      <Card className="w-full max-w-md">
+        <CardContent className="p-6">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <div className="flex items-center space-x-2 text-destructive">
+              <AlertCircle className="h-5 w-5" />
+              <span className="font-medium">Error</span>
+            </div>
+            <p className="text-sm text-muted-foreground">{errorMessage}</p>
+            <Button onClick={onReset} variant="outline" className="mt-4">
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Try Again
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };