chore: adjust select item mapping method

src/components/dashboards/AnalysisClient.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAnalyseText } from "@/src/hooks/useAnalyzeText";
-import { Sparkles, Trophy } from "lucide-react";
+import { Sparkles } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -11,9 +11,8 @@ import {
 } from "../ui/select";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
-import { motion } from "framer-motion";
-import { useState } from "react";
 import ResultSection from "./ResultSection";
+import { professions } from "@/src/utils/datas";
 
 export default function AnalysisClient() {
   const {
@@ -24,20 +23,15 @@ export default function AnalysisClient() {
     loading,
     result,
     disabled,
+    showField,
     handleAnalyze,
     setProfession,
     setUrl1,
     setUrl2,
     setDisabled,
     setUrl3,
+    setShowField,
   } = useAnalyseText();
-  const [showField, setShowField] = useState(false);
-
-  const getSentimentTone = (score: number) => {
-    if (score >= 80) return "strong";
-    if (score >= 60) return "light";
-    return "neutral";
-  };
 
   return (
     <div className="w-full mx-auto">
@@ -62,18 +56,11 @@ export default function AnalysisClient() {
                 className="bg-card border-border shadow-lg"
                 position="popper"
               >
-                <SelectItem className="cursor-pointer" value="programmer">
+                {professions.map((item) => (
-                  Programmer
+                  <SelectItem key={item.value} value={item.value}>
-                </SelectItem>
+                    {item.label}
-                <SelectItem className="cursor-pointer" value="designer">
-                  Designer
-                </SelectItem>
-                <SelectItem className="cursor-pointer" value="student">
-                  Student
-                </SelectItem>
-                <SelectItem className="cursor-pointer" value="gamer">
-                  Gamer
                   </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>

src/hooks/useAnalyzeText.ts

@@ -9,6 +9,7 @@ export const useAnalyseText = () => {
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<AnalysisResults | null>(null);
   const [disabled, setDisabled] = useState(false);
+  const [showField, setShowField] = useState(false);
 
   const handleAnalyze = async () => {
     setLoading(true);
@@ -81,11 +82,13 @@ export const useAnalyseText = () => {
     loading,
     result,
     disabled,
+    showField,
     handleAnalyze,
     setProfession,
     setUrl1,
     setUrl2,
     setUrl3,
     setDisabled,
+    setShowField,
   };
 };

src/utils/datas.ts

@@ -90,3 +90,10 @@ export function getFallbackData(url: string): ScrapeResult {
     ],
   };
 }
+
+export const professions = [
+  { value: "programmer", label: "Programmer" },
+  { value: "designer", label: "Designer" },
+  { value: "student", label: "Student" },
+  { value: "gamer", label: "Gamer" },
+];