add tailwindcss and nextui

client/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}

client/package.json

@@ -12,23 +12,31 @@
   },
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@cloudflare/kv-asset-handler": "^0.3.4",
+    "@nextui-org/react": "^2.4.2",
+    "buffer": "^6.0.3",
+    "framer-motion": "^11.3.2",
+    "itty-router": "^2.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "serverless-cloudflare-workers": "^1.2.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.24.8",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
+    "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
     "css-loader": "^7.1.2",
     "file-loader": "^6.2.0",
+    "postcss": "^8.4.39",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.62.0",
+    "sass-loader": "^13.2.2",
     "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.4",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@cloudflare/kv-asset-handler": "^0.3.4",
-    "buffer": "^6.0.3",
-    "itty-router": "^2.6.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "serverless-cloudflare-workers": "^1.2.0"
   }
 }

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/src/App.jsx

@@ -1,34 +1,11 @@
-import React, { useState } from 'react';
-import logo from '../public/cloudflare.svg'
-import { Header } from "./components/Header/Header";
-import { Footer } from "./components/Footer/Footer";
+import * as React from "react";
+import { NextUIProvider } from "@nextui-org/react";
+import { Home } from "./pages/Home";
 
 export const App = () => {
-  const [count, setCount] = useState(0);
-  const tester = "Victor E";
-
   return (
-    <div className="container">
-      <Header />
-      <div className="row">
-        <div className="col-12">
-          <div>
-            <div>
-              <img src={logo} width="300"/>
-            </div>
-          </div>
-          <h1>Hello, Cloudflare Workers!</h1>
-          <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
-          <p>
-            <strong>Your name:</strong> { tester }
-          </p>
-          <pre>{ tester }</pre>
-
-          <p>Count: { count }</p>
-          <button type="button" onClick={ () => setCount(count + 1) }>Increase</button>
-        </div>
-      </div>
-    <Footer />
-    </div>
+    <NextUIProvider>
+      <Home />
+    </NextUIProvider>
   );
-};
+}

client/src/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/src/main.js

@@ -1,5 +1,6 @@
 import { App } from './App';
 import { createRoot } from 'react-dom/client';
+import './globals.css';
 
 // Render your React component instead
 const root = createRoot(document.getElementById('root'));

client/src/pages/Home.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import logo from '../../public/cloudflare.svg'
+import { Header } from "../components/Header/Header";
+import { Footer } from "../components/Footer/Footer";
+import {Button} from "@nextui-org/react";
+
+export const Home = () => {
+  const [count, setCount] = useState(0);
+  const tester = "Victor E";
+
+  return (
+    <div className="container">
+      <Header />
+      <div className="row">
+        <div className="col-12">
+          <div>
+            <div>
+              <img src={logo} width="300"/>
+            </div>
+          </div>
+          <h1>Hello, Cloudflare Workers!</h1>
+          <h3>This is a basic React page deployed on Cloudflare Workers.</h3>
+          <p>
+            <strong>Your name:</strong> { tester }
+          </p>
+          <pre>{ tester }</pre>
+
+          <p>Count: { count }</p>
+          <Button
+            color="primary"
+
+            onClick={ () => setCount(count + 1) }
+          >
+            Increase
+          </Button>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};

client/src/routers/handler.js

@@ -9,6 +9,9 @@ export const routesAndAssetsHandler = async (event, router) => {
     request.url.endsWith('/bundle.js')
     || request.url.endsWith('/favicon.ico')
     || request.url.endsWith('.svg')
+    || request.url.endsWith('.jpg')
+    || request.url.endsWith('.png')
+    || request.url.endsWith('.css')
   ) {
     // Serve the bundle.js file from KV storage
     try {

client/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+const { nextui } = require("@nextui-org/react");
+
+module.exports = {
+  content: [
+    "./src/components/**/*.{html,js,jsx}",
+    "./src/pages/**/*.{html,js,jsx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  darkMode: "class",
+  plugins: [nextui()],
+};

client/webpack.config.js

@@ -15,13 +15,13 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
+            configFile: './.babelrc',
           },
         },
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader', 'postcss-loader', "sass-loader"],
       },
       {
         test: /\.(png|jpg|svg)$/,