refactor : ockerize and update fallback

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.git

.github/workflows/main-ci.yml

@@ -28,3 +28,7 @@ jobs:
 
       - name: Build
         run: npm run build
+
+      - name: Build Docker image
+        run: |
+            docker build -t sveltos-dashboard-ui:latest .

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:14
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Command to run the application
+CMD ["npm", "start"]

package.json

@@ -1,9 +1,13 @@
 {
   "name": "sveltos-dashboard",
   "private": true,
-  "version": "0.1",
+  "version": "0.1.0",
   "type": "module",
-  "description": "Sveltos User interface d ashboard",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/projectsveltos/dashboard"
+  },
+  "description": "Sveltos User interface dashboard",
   "scripts": {
     "lint": "npx prettier . --write",
     "dev": "tsc &&  npx prettier . --write && vite",

src/Router.tsx

@@ -30,6 +30,10 @@ export const router = createBrowserRouter(
           path: "/clusters/:clusterId",
           element: <ClusterInfo />,
         },
+        {
+          path: "*",
+          element: <NoMatch />,
+        },
       ],
     },
     {

src/components/logo.tsx

@@ -1,10 +1,10 @@
 import { appConfig } from "@/config/app";
 
-export function Logo() {
+export function Logo({className="h-6 w-6"}: {className?: string}) {
   return (
     <>
       <svg
-        className={"h-6 w-6"}
+        className={className}
         viewBox="0 0 44 46"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

src/modules/fallback/NoMatch.tsx

@@ -1,26 +1,20 @@
 import { useNavigate } from "react-router-dom";
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft } from "lucide-react";
 
 export default function NoMatch() {
   const navigate = useNavigate();
   return (
-    <div>
-      <div className="h-screen w-screen  flex items-center">
-        <div className="container flex flex-col md:flex-row items-center justify-center px-5 ">
-          <div className="max-w-md">
-            <div className="text-5xl font-dark font-bold">404</div>
-            <p className="text-2xl md:text-3xl font-light leading-normal">
-              Sorry, we couldn’t find the page you’re looking for.
-            </p>
-
-            <button
-              onClick={() => navigate(-1)}
-              className="px-4 mt-4 inline py-2 text-sm font-medium leading-5 shadow text-white transition-colors duration-150 border border-transparent rounded-lg focus:outline-none focus:shadow-outline-blue bg-blue-600 active:bg-blue-600 hover:bg-blue-700"
-            >
-              Back
-            </button>
-          </div>
-        </div>
-      </div>
+    <div className="flex flex-col items-center justify-center mt-12 h-1/2">
+      <div
+        className="  px-4 md:px-8 lg:px-24 py-8 ">
+      <p className="text-6xl md:text-7xl lg:text-9xl font-bold tracking-wider text-gray-300">404</p>
+      <p className="text-2xl md:text-3xl lg:text-5xl font-bold tracking-wider text-gray-500 mt-4">Page Not Found</p>
+      <p className="text-gray-500 mt-4 pb-4 border-b-2 text-center">Sorry, the page you are looking for could not be
+        found.</p>
+      <Button onClick={() => navigate(-1)} className="mt-4 w-full"><ChevronLeft className={"animate-pulse"}/> Go Back</Button>
+    </div>
     </div>
   );
 }