Prepare migrating UI to shadcn

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/App.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/shadcn/components",
+    "utils": "@/shadcn/lib/utils"
+  }
+}

package.json

@@ -10,6 +10,7 @@
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@nextui-org/react": "^2.1.7",
+    "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -19,9 +20,12 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.6",
     "axios": "^1.3.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "framer-motion": "^10.16.1",
     "graphql": "16.6.0",
     "i18next": "^23.5.1",
+    "lucide-react": "^0.316.0",
     "monaco-editor": "^0.39.0",
     "msw": "^1.1.0",
     "react": "^18.2.0",
@@ -36,6 +40,8 @@
     "rehype-katex": "^6.0.3",
     "rehype-mathjax": "^4.0.3",
     "remark-math": "^5.1.1",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +1,76 @@
-.App {
-  text-align: center;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+
+@layer base {
+  * {
+    @apply border-border;
   }
-  to {
-    transform: rotate(360deg);
+  body {
+    @apply bg-background text-foreground;
   }
-}
+}

src/App.tsx

@@ -1,13 +1,8 @@
 import PageRouter from "./routes/Router";
 import "./App.css";
-import { NextUIProvider } from "@nextui-org/react";
 
 function App() {
-  return (
-    <NextUIProvider>
-      <PageRouter />
-    </NextUIProvider>
-  );
+  return <PageRouter />;
 }
 
 export default App;

src/components/ProblemTable.tsx

@@ -13,6 +13,7 @@ import { ProblemServiceModel } from "../typings/problem";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { joinClasses } from "../utils/common";
+import { Badge } from "@/shadcn/components/ui/badge";
 
 const columns = [
   { name: "SLUG", uid: "slug" },
@@ -37,7 +38,13 @@ const ProblemTable: React.FC<ProblemTableProps> = (props) => {
         return <Actions />;
       }
       if (columnUid === "tags") {
-        return <Tags tags={problemInfo.tags} />;
+        return () => {
+          problemInfo.tags.map((tag) => (
+            <Badge key={tag.slug} color="primary">
+              {tag.name}
+            </Badge>
+          ));
+        };
       }
       if (columnUid === "title") {
         return problemInfo.title;