init

package.json

@@ -23,8 +23,10 @@
     "@fullcalendar/react": "^6.1.11",
     "@headlessui/vue": "^1.7.22",
     "@logto/browser": "^2.2.16",
+    "@nextui-org/react": "^2.4.8",
     "@stylistic/eslint-plugin": "^2.1.0",
     "astro": "^4.5.12",
+    "framer-motion": "^11.5.6",
     "ical.js": "^1.5.0",
     "md5": "^2.3.0",
     "npm": "^10.8.1",

src/pages/freshman/join.astro

@@ -0,0 +1,11 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro"
+// import { Button } from "@nextui-org/react";
+import ReactChild from "./react/acontent"
+---
+
+<BaseLayout title="Welcome to Astro.">
+  <main>
+    <ReactChild client:visible>My button</ReactChild>
+  </main>
+</BaseLayout>

src/pages/freshman/react/acontent.tsx

@@ -0,0 +1,12 @@
+// app/page.tsx
+import { Button } from "@nextui-org/react"
+
+// import { NextUIProvider } from "@nextui-org/react";
+
+export default function Page() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  )
+}

tailwind.config.mjs

@@ -1,6 +1,10 @@
+import { nextui } from "@nextui-org/react"
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  content: [
+    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {
       colors: {
@@ -8,5 +12,6 @@ export default {
       },
     },
   },
-  plugins: [],
+  darkMode: "class",
+  plugins: [nextui()],
 }