some rabbit suggest update

NCUAppTeam · Dec 21, 2024 · b15d54a · b15d54a
1 parent b7162a4
commit b15d54a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 43 deletions.
diff --git a/src/components/pages/select/belong.tsx b/src/components/pages/select/belong.tsx
@@ -1,35 +1,44 @@
+const belongOptions = [
+  { value: 'campus', label: '校園活動', ariaLabel: 'Select campus event' },
+  { value: 'club', label: '社團活動', ariaLabel: 'Select club event' },
+  // ... other options
+];
+
 interface BelongContentProps {
   onNext: () => void; // 定义 onNext 是一个无参数、无返回值的函数
 }
 
-export default function BelongContent({onNext}: BelongContentProps) {
-  return (
-    <>
-      <div></div>
-      <div className="flex items-center justify-center">
-        <div className="flex w-full flex-col">
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            校園活動
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            社團活動
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            系上活動
-          </button>
-          <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
-            onClick={onNext}
-          >
-            其他
+interface SelectionOption {
+  value: string;
+  label: string;
+  ariaLabel: string;
+}
+
+interface SelectionContentProps {
+  options: SelectionOption[];
+  onSelect: (value: string) => void;
+}
+
+const SelectionContent: React.FC<SelectionContentProps> = ({options, onSelect}) => (
+  <>
+    <div></div>
+    <div className="flex items-center justify-center">
+      <div className="flex w-full flex-col">
+        {options.map(({ value, label }) => (
+          <button
+            className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-8 hover:scale-105 transition-transform"
+            key={value}
+            onClick={() => onSelect(value)}
+            >
+            { label }
           </button>
-        </div>
+        ))}
       </div>
-    </>
-  )
+    </div>
+  </>
+);
+
+
+export default function BelongContent({onNext}: BelongContentProps) {
+  return <SelectionContent options={belongOptions} onSelect={onNext} />;
 }
diff --git a/src/components/pages/select/scale.tsx b/src/components/pages/select/scale.tsx
@@ -1,5 +1,5 @@
 interface ScaleContentProps {
-  onNext: () => void; // 定义 onNext 是一个无参数、无返回值的函数
+  onNext: (scale: 'small' | 'formal') => void; // 定义 onNext 是一个无参数、无返回值的函数
 }
 
 export default function ScaleContent({onNext}: ScaleContentProps) {
@@ -9,14 +9,18 @@ export default function ScaleContent({onNext}: ScaleContentProps) {
       <div className="flex items-center justify-center">
         <div className="flex w-full flex-col">
           <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-4 hover:scale-105 transition-transform"
-            onClick={onNext}
+            onClick={() => onNext('small')}
+            aria-label="Create small event"
+            role="button"
           >
             我要揪人!
           </button>
           <p className="mx-auto text-xl">快速建立小型活動</p>
           <div className="divider"></div>
           <button className="card bg-neutral-content rounded-box grid h-20 place-items-center text-gray-800 font-bold text-2xl mb-4 hover:scale-105 transition-transform"
-            onClick={onNext}
+            onClick={() => onNext('formal')}
+            aria-label="Create formal event"
+            role="button"
           >
             我要活動!
           </button>

diff --git a/src/routes/events/select.tsx b/src/routes/events/select.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
 
 import ScaleContent from '../../components/pages/select/scale'
@@ -10,8 +10,9 @@ export const Route = createFileRoute('/events/select')({
 })
 
 function SelectContent() {
-  const router = useRouter();
-
+
+  const navigate = Route.useNavigate();
+
   const [step, setStep] = useState(0)
 
   const handleNextStep = () => {
@@ -20,9 +21,10 @@ function SelectContent() {
 
   useEffect(() => {
     if (step >= 3) {
-      router.navigate('/events/create')
+      console.log('Redirecting to /events/create')
+      navigate({ to: '/events/create' })
     }
-  }, [step, router]);
+  }, [step]);
 
   return (
     <div className="flex flex-col items-center h-screen">
@@ -35,13 +37,18 @@ function SelectContent() {
       {/* Content */}
       <div className="h-full w-96 flex flex-col justify-between py-6">
         {/* Render Content Based on Step */}
-        {step === 0 ? (
-          <ScaleContent onNext={handleNextStep} />
-        ) : step === 1 ? (
-          <TypeContent onNext={handleNextStep} />
-        ) : step === 2 ? (
-          <BelongContent onNext={handleNextStep} />
-        ) : null}
+        {(() => {
+          switch (step) {
+            case 0:
+              return <ScaleContent onNext={handleNextStep} />;
+            case 1:
+              return <TypeContent onNext={handleNextStep} />;
+            case 2:
+              return <BelongContent onNext={handleNextStep} />;
+            default:
+              return null;
+          }
+        })()}
 
         {/* Steps */}
         <ul className="steps steps-vertical lg:steps-horizontal">