@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/questions/types/arrange-letters-into-words/ArrangeLettersIntoWordsClient.js

@@ -1 +1,141 @@
-"use client";import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useState as s,useEffect as n,useRef as i}from"react";import{Card as a,CardContent as l,CardHeader as d,CardTitle as o}from"../../../../components/ui/card";import{Check as c,X as m}from"lucide-react";export function ArrangeLettersIntoWordsClient({questionData:u,onSubmit:h,isReviewMode:g=!1,userAnswer:b}){const[p,f]=s({}),[x,w]=s({}),[N,y]=s(b||{}),[v,j]=s({}),U=i(new Set);n(()=>{const e={},r={};u.subQuestions.forEach(t=>{const s=function(e){const r=[...e];for(let e=r.length-1;e>0;e--){const t=Math.floor(Math.random()*(e+1));[r[e],r[t]]=[r[t],r[e]]}return r}(t.correctWord.split(""));e[t.id]=s,r[t.id]=[]}),f(e),w(r)},[u.subQuestions]),n(()=>{b&&y(b)},[b]),n(()=>{u.subQuestions.forEach(e=>{!e.imageUrl||e.imageUrl.startsWith("http")||v[e.id]||U.current.has(e.id)||(U.current.add(e.id),j(r=>({...r,[e.id]:e.imageUrl})),U.current.delete(e.id))})},[u.subQuestions,v]);n(()=>{const e={};Object.keys(x).forEach(r=>{e[r]=x[r].join("")}),y(e),h?.(e)},[x,h]);return r("div",{className:"space-y-6",children:u.subQuestions.map((s,n)=>{const i=N[s.id]||"",h=g&&((e,r)=>{const t=u.subQuestions.find(r=>r.id===e);return!!t&&r.trim().toLowerCase()===t.correctWord.trim().toLowerCase()})(s.id,i),b=p[s.id]||[],y=x[s.id]||[],j=(e=>e.imageUrl?e.imageUrl.startsWith("http")?e.imageUrl:v[e.id]||e.imageUrl:"")(s);return e(a,{children:[r(d,{children:e(o,{className:"text-lg",children:["Câu ",n+1]})}),e(l,{className:"space-y-4",children:[j&&r("div",{className:"flex justify-center",children:r("div",{className:"relative h-48 w-full max-w-md overflow-hidden rounded-lg",children:r("img",{src:j,alt:`Hint for question ${n+1}`,className:"h-full w-full object-contain",onError:()=>{console.error("Failed to load image:",s.imageUrl)}})})}),e("div",{children:[r("p",{className:"mb-2 text-sm font-medium text-gray-700",children:"Chọn các chữ cái:"}),r("div",{className:"flex flex-wrap gap-2",children:b.map((e,t)=>r("button",{onClick:()=>((e,r)=>{if(g)return;const t=(p[e]||[])[r];t&&(f(t=>{const s=[...t[e]];return s.splice(r,1),{...t,[e]:s}}),w(r=>{const s=[...r[e]||[]];return s.push(t),{...r,[e]:s}}))})(s.id,t),disabled:g,className:"flex h-12 w-12 items-center justify-center rounded-full border-2 border-blue-500 bg-white text-xl font-bold text-blue-600 transition-all hover:bg-blue-50 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50",children:e},`${e}-${t}`))})]}),e("div",{children:[r("p",{className:"mb-2 text-sm font-medium text-gray-700",children:"Sắp xếp thành từ:"}),r("div",{className:"min-h-[60px] rounded-lg border-2 p-4 "+(g?h?"border-green-500 bg-green-50":""!==i.trim()?"border-red-500 bg-red-50":"border-gray-300 bg-gray-50":"border-gray-300 bg-gray-50"),children:r("div",{className:"flex flex-wrap items-center gap-2",children:0===y.length?r("span",{className:"text-gray-400",children:"Gạch ngang để sắp xếp..."}):y.map((e,t)=>r("button",{onClick:()=>((e,r)=>{if(g)return;const t=(x[e]||[])[r];t&&(w(t=>{const s=[...t[e]];return s.splice(r,1),{...t,[e]:s}}),f(r=>{const s=[...r[e]||[]];return s.push(t),{...r,[e]:s}}))})(s.id,t),disabled:g,className:"flex h-12 w-12 items-center justify-center rounded-full border-2 border-gray-400 bg-white text-xl font-bold text-gray-700 transition-all hover:bg-gray-100 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50",children:e},`arranged-${e}-${t}`))})})]}),g&&r("div",{className:"flex items-center gap-2",children:h?e(t,{children:[r(c,{className:"h-5 w-5 text-green-600"}),r("span",{className:"text-sm text-green-600",children:"Đúng!"})]}):""!==i.trim()?e(t,{children:[r(m,{className:"h-5 w-5 text-red-600"}),e("span",{className:"text-sm text-red-600",children:["Đáp án đúng: ",r("strong",{children:s.correctWord})]})]}):null})]})]},s.id)})})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Check, X } from 'lucide-react';
+// Fisher-Yates shuffle algorithm
+function shuffleArray(array) {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+}
+export function ArrangeLettersIntoWordsClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
+    // Initialize state for each subQuestion
+    const [availableLetters, setAvailableLetters] = useState({});
+    const [arrangedLetters, setArrangedLetters] = useState({});
+    const [answers, setAnswers] = useState(userAnswer || {});
+    // Store presigned URLs for images: { subQuestionId: presignedUrl }
+    const [imagePreviewUrls, setImagePreviewUrls] = useState({});
+    const fetchingRef = useRef(new Set());
+    // Initialize shuffled letters for each subQuestion
+    useEffect(() => {
+        const initialAvailable = {};
+        const initialArranged = {};
+        questionData.subQuestions.forEach((sq) => {
+            // Shuffle the correctWord into individual letters
+            const letters = shuffleArray(sq.correctWord.split(''));
+            initialAvailable[sq.id] = letters;
+            initialArranged[sq.id] = [];
+        });
+        setAvailableLetters(initialAvailable);
+        setArrangedLetters(initialArranged);
+    }, [questionData.subQuestions]);
+    // Sync userAnswer when it changes (e.g., when loading from server in review mode)
+    useEffect(() => {
+        if (userAnswer) {
+            setAnswers(userAnswer);
+        }
+    }, [userAnswer]);
+    // Fetch presigned URLs for images if needed
+    useEffect(() => {
+        questionData.subQuestions.forEach((sq) => {
+            if (sq.imageUrl &&
+                !sq.imageUrl.startsWith('http') &&
+                !imagePreviewUrls[sq.id] &&
+                !fetchingRef.current.has(sq.id)) {
+                fetchingRef.current.add(sq.id);
+                setImagePreviewUrls((prev) => ({
+                    ...prev,
+                    [sq.id]: sq.imageUrl,
+                }));
+                fetchingRef.current.delete(sq.id);
+            }
+        });
+    }, [questionData.subQuestions, imagePreviewUrls]);
+    // Get image preview URL for a subQuestion
+    const getImagePreviewUrl = (subQuestion) => {
+        if (!subQuestion.imageUrl)
+            return '';
+        // If it's already a full URL, use it directly
+        if (subQuestion.imageUrl.startsWith('http')) {
+            return subQuestion.imageUrl;
+        }
+        // Otherwise, use presigned URL if available
+        return imagePreviewUrls[subQuestion.id] || subQuestion.imageUrl;
+    };
+    // Update answers when arrangedLetters change
+    useEffect(() => {
+        const newAnswers = {};
+        Object.keys(arrangedLetters).forEach((subQuestionId) => {
+            newAnswers[subQuestionId] = arrangedLetters[subQuestionId].join('');
+        });
+        setAnswers(newAnswers);
+        onSubmit?.(newAnswers);
+    }, [arrangedLetters, onSubmit]);
+    // Handle click on available letter - move to arranged
+    const handleLetterClick = (subQuestionId, letterIndex) => {
+        if (isReviewMode)
+            return;
+        // Get the letter first before updating state
+        const currentAvailable = availableLetters[subQuestionId] || [];
+        const letter = currentAvailable[letterIndex];
+        if (!letter)
+            return;
+        setAvailableLetters((prev) => {
+            const letters = [...prev[subQuestionId]];
+            letters.splice(letterIndex, 1);
+            return { ...prev, [subQuestionId]: letters };
+        });
+        setArrangedLetters((prev) => {
+            const arranged = [...(prev[subQuestionId] || [])];
+            arranged.push(letter);
+            return { ...prev, [subQuestionId]: arranged };
+        });
+    };
+    // Handle click on arranged letter - move back to available
+    const handleArrangedLetterClick = (subQuestionId, letterIndex) => {
+        if (isReviewMode)
+            return;
+        // Get the letter first before updating state
+        const currentArranged = arrangedLetters[subQuestionId] || [];
+        const letter = currentArranged[letterIndex];
+        if (!letter)
+            return;
+        setArrangedLetters((prev) => {
+            const arranged = [...prev[subQuestionId]];
+            arranged.splice(letterIndex, 1);
+            return { ...prev, [subQuestionId]: arranged };
+        });
+        setAvailableLetters((prev) => {
+            const letters = [...(prev[subQuestionId] || [])];
+            letters.push(letter);
+            return { ...prev, [subQuestionId]: letters };
+        });
+    };
+    // Check if answer is correct (case insensitive)
+    const isAnswerCorrect = (subQuestionId, userAnswerValue) => {
+        const subQuestion = questionData.subQuestions.find((sq) => sq.id === subQuestionId);
+        if (!subQuestion)
+            return false;
+        return userAnswerValue.trim().toLowerCase() === subQuestion.correctWord.trim().toLowerCase();
+    };
+    return (_jsx("div", { className: "space-y-6", children: questionData.subQuestions.map((subQuestion, sqIndex) => {
+            const userAnswerValue = answers[subQuestion.id] || '';
+            const isCorrect = isReviewMode && isAnswerCorrect(subQuestion.id, userAnswerValue);
+            const available = availableLetters[subQuestion.id] || [];
+            const arranged = arrangedLetters[subQuestion.id] || [];
+            const imagePreviewUrl = getImagePreviewUrl(subQuestion);
+            return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "text-lg", children: ["C\u00E2u ", sqIndex + 1] }) }), _jsxs(CardContent, { className: "space-y-4", children: [imagePreviewUrl && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "relative h-48 w-full max-w-md overflow-hidden rounded-lg", children: _jsx("img", { src: imagePreviewUrl, alt: `Hint for question ${sqIndex + 1}`, className: "h-full w-full object-contain", onError: () => {
+                                            console.error('Failed to load image:', subQuestion.imageUrl);
+                                        } }) }) })), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium text-gray-700", children: "Ch\u1ECDn c\u00E1c ch\u1EEF c\u00E1i:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: available.map((letter, index) => (_jsx("button", { onClick: () => handleLetterClick(subQuestion.id, index), disabled: isReviewMode, className: "flex h-12 w-12 items-center justify-center rounded-full border-2 border-blue-500 bg-white text-xl font-bold text-blue-600 transition-all hover:bg-blue-50 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: letter }, `${letter}-${index}`))) })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm font-medium text-gray-700", children: "S\u1EAFp x\u1EBFp th\u00E0nh t\u1EEB:" }), _jsx("div", { className: `min-h-[60px] rounded-lg border-2 p-4 ${isReviewMode
+                                            ? isCorrect
+                                                ? 'border-green-500 bg-green-50'
+                                                : userAnswerValue.trim() !== ''
+                                                    ? 'border-red-500 bg-red-50'
+                                                    : 'border-gray-300 bg-gray-50'
+                                            : 'border-gray-300 bg-gray-50'}`, children: _jsx("div", { className: "flex flex-wrap items-center gap-2", children: arranged.length === 0 ? (_jsx("span", { className: "text-gray-400", children: "G\u1EA1ch ngang \u0111\u1EC3 s\u1EAFp x\u1EBFp..." })) : (arranged.map((letter, index) => (_jsx("button", { onClick: () => handleArrangedLetterClick(subQuestion.id, index), disabled: isReviewMode, className: "flex h-12 w-12 items-center justify-center rounded-full border-2 border-gray-400 bg-white text-xl font-bold text-gray-700 transition-all hover:bg-gray-100 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50", children: letter }, `arranged-${letter}-${index}`)))) }) })] }), isReviewMode && (_jsx("div", { className: "flex items-center gap-2", children: isCorrect ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "h-5 w-5 text-green-600" }), _jsx("span", { className: "text-sm text-green-600", children: "\u0110\u00FAng!" })] })) : userAnswerValue.trim() !== '' ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "h-5 w-5 text-red-600" }), _jsxs("span", { className: "text-sm text-red-600", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng: ", _jsx("strong", { children: subQuestion.correctWord })] })] })) : null }))] })] }, subQuestion.id));
+        }) }));
+}

package/dist/components/questions/types/arrange-letters-into-words/ArrangeLettersIntoWordsCreator.js

@@ -1 +1,118 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as i,useRef as t,useEffect as n}from"react";import{Button as c}from"../../../../components/ui/button";import{Label as s}from"../../../../components/ui/label";import{Input as l}from"../../../../components/ui/input";import{Card as a,CardContent as o,CardHeader as d,CardTitle as m}from"../../../../components/ui/card";import{Pencil as h,Eye as u,Plus as g,Trash2 as p}from"lucide-react";import{toast as f}from"sonner";import{FileUpload as v}from"../../../../components/ui/file-upload";import{ArrangeLettersIntoWordsClient as N}from"./ArrangeLettersIntoWordsClient";function x({initialData:x,onSave:b,onCancel:y,onChange:C}){const[w,U]=i(x?.subQuestions||[]),T=t(x),W=t(!1),j=t(C),Q=t("");n(()=>{j.current=C},[C]),n(()=>{JSON.stringify(T.current)!==JSON.stringify(x)&&(W.current=!0,T.current=x,x?void 0!==x.subQuestions&&U(x.subQuestions):U([]),setTimeout(()=>{W.current=!1},100))},[x]),n(()=>{if(W.current){const e=JSON.stringify({subQuestions:w});return void(Q.current=e)}const e={subQuestions:w},r=JSON.stringify(e);Q.current!==r&&(Q.current=r,j.current?.(e))},[w]);const[k,S]=i(!1),[$,q]=i({}),O=(e,r,i)=>{U(w.map(t=>t.id===e?{...t,[r]:i}:t))};if(k){const i={subQuestions:w.map(e=>({...e,imageUrl:$[e.id]||e.imageUrl}))};return r("div",{className:"space-y-6",children:[e(a,{children:e(d,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(m,{children:"Arrange Letters Into Words (Preview)"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Chế độ xem trước"})]}),r(c,{variant:"outline",size:"sm",onClick:()=>S(!1),children:[e(h,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(N,{questionData:i})]})}return r("div",{className:"space-y-6",children:[e(a,{children:e(d,{children:r("div",{className:"flex items-center justify-between",children:[r("div",{children:[e(m,{children:"Arrange Letters Into Words"}),e("p",{className:"mt-1 text-sm text-gray-500",children:"Tạo câu hỏi sắp xếp chữ cái thành từ"})]}),r(c,{variant:"outline",size:"sm",onClick:()=>S(!0),disabled:w.length<1,children:[e(u,{className:"mr-2 h-4 w-4"}),"Client Mode"]})]})})}),r(a,{children:[e(d,{children:r("div",{className:"flex items-center justify-between",children:[r(m,{children:["Câu hỏi con (",w.length,"/5)"]}),r(c,{onClick:()=>{if(w.length>=5)return void f.error("Tối đa 5 câu hỏi con!");const e={id:`subq-${Date.now()}`,correctWord:"",imageUrl:""};U([...w,e])},disabled:w.length>=5,variant:"outline",children:[e(g,{className:"mr-2 h-4 w-4"}),"Thêm câu hỏi"]})]})}),r(o,{className:"space-y-4",children:[w.map((i,t)=>r(a,{className:"border-2",children:[e(d,{children:r("div",{className:"flex items-center justify-between",children:[r(m,{className:"text-lg",children:["Câu ",t+1]}),e(c,{variant:"ghost",size:"sm",onClick:()=>{return e=i.id,void(w.length<=1?f.error("Tối thiểu 1 câu hỏi con!"):U(w.filter(r=>r.id!==e)));var e},disabled:w.length<=1,children:e(p,{className:"h-4 w-4 text-red-500"})})]})}),r(o,{className:"space-y-4",children:[r("div",{children:[e(s,{htmlFor:`correctWord-${i.id}`,children:"Từ đúng *"}),e(l,{id:`correctWord-${i.id}`,value:i.correctWord,onChange:e=>O(i.id,"correctWord",e.target.value.toUpperCase()),placeholder:"Nhập từ đúng (vd: COMPUTER)",className:"mt-1",disabled:k}),e("p",{className:"mt-1 text-xs text-gray-500",children:"Từ này sẽ được xáo trộn thành các ký tự ngẫu nhiên khi hiển thị"})]}),r("div",{children:[e(s,{htmlFor:`image-${i.id}`,children:"Hình ảnh gợi ý *"}),e(v,{id:`image-${i.id}`,label:"",accept:"image/*",value:i.imageUrl,onChange:e=>O(i.id,"imageUrl",e),onPresignedUrlChange:e=>{((e,r)=>{q(i=>({...i,[e]:r}))})(i.id,e)},disabled:k,maxSize:5,placeholder:"Upload ảnh",required:!0,autoUpload:!0,prefix:"questions"}),i.imageUrl&&e("div",{className:"relative mt-2 h-32 w-full max-w-md overflow-hidden rounded border",children:e("img",{src:$[i.id]||i.imageUrl,alt:`Preview for question ${t+1}`,className:"h-full w-full object-contain",onError:()=>{console.error("Failed to load image:",i.imageUrl)}})})]})]})]},i.id)),0===w.length&&e("div",{className:"py-8 text-center text-gray-500",children:e("p",{children:'Chưa có câu hỏi con nào. Nhấn "Thêm câu hỏi" để bắt đầu.'})})]})]})]})}export function ArrangeLettersIntoWordsCreator(r){return e(x,{...r})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Pencil, Eye, Plus, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { FileUpload } from '../../../../components/ui/file-upload';
+import { ArrangeLettersIntoWordsClient } from './ArrangeLettersIntoWordsClient';
+function ArrangeLettersIntoWordsCreatorContent({ initialData, onSave, // eslint-disable-line @typescript-eslint/no-unused-vars
+onCancel, // eslint-disable-line @typescript-eslint/no-unused-vars
+onChange, }) {
+    // State
+    const [subQuestions, setSubQuestions] = useState(initialData?.subQuestions || []);
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(false);
+    // Use ref to store onChange to avoid dependency issues
+    const onChangeRef = useRef(onChange);
+    // Track previous payload to prevent unnecessary onChange calls
+    const previousPayloadRef = useRef('');
+    // Update onChange ref when it changes
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Sync state from initialData when it changes
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            if (initialData) {
+                if (initialData.subQuestions !== undefined)
+                    setSubQuestions(initialData.subQuestions);
+            }
+            else {
+                setSubQuestions([]);
+            }
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 100);
+        }
+    }, [initialData]);
+    useEffect(() => {
+        // Skip onChange during initialization to prevent infinite loop
+        if (isInitializingRef.current) {
+            // Still update previous payload ref to track current state
+            const currentPayload = JSON.stringify({ subQuestions });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        // Create payload
+        const payload = { subQuestions };
+        // Serialize payload for comparison
+        const payloadString = JSON.stringify(payload);
+        // Only call onChange if payload actually changed
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            onChangeRef.current?.(payload);
+        }
+    }, [subQuestions]);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    // Store presigned URLs for images: { subQuestionId: presignedUrl }
+    const [imagePreviewUrls, setImagePreviewUrls] = useState({});
+    // Add new sub-question
+    const addSubQuestion = () => {
+        if (subQuestions.length >= 5) {
+            toast.error('Tối đa 5 câu hỏi con!');
+            return;
+        }
+        const newSubQuestion = {
+            id: `subq-${Date.now()}`,
+            correctWord: '',
+            imageUrl: '',
+        };
+        setSubQuestions([...subQuestions, newSubQuestion]);
+    };
+    // Remove sub-question
+    const removeSubQuestion = (id) => {
+        if (subQuestions.length <= 1) {
+            toast.error('Tối thiểu 1 câu hỏi con!');
+            return;
+        }
+        setSubQuestions(subQuestions.filter((sq) => sq.id !== id));
+    };
+    // Update sub-question field
+    const updateSubQuestion = (id, field, value) => {
+        setSubQuestions(subQuestions.map((sq) => (sq.id === id ? { ...sq, [field]: value } : sq)));
+    };
+    // Update image preview URL
+    const updateImagePreviewUrl = (subQuestionId, presignedUrl) => {
+        setImagePreviewUrls((prev) => ({
+            ...prev,
+            [subQuestionId]: presignedUrl,
+        }));
+    };
+    // If in client mode, render the Client component
+    if (isClientMode) {
+        const questionData = {
+            subQuestions: subQuestions.map((sq) => ({
+                ...sq,
+                imageUrl: imagePreviewUrls[sq.id] || sq.imageUrl,
+            })),
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Arrange Letters Into Words (Preview)" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ArrangeLettersIntoWordsClient, { questionData: questionData })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: "Arrange Letters Into Words" }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "T\u1EA1o c\u00E2u h\u1ECFi s\u1EAFp x\u1EBFp ch\u1EEF c\u00E1i th\u00E0nh t\u1EEB" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: subQuestions.length < 1, children: [_jsx(Eye, { className: "mr-2 h-4 w-4" }), "Client Mode"] })] }) }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(CardTitle, { children: ["C\u00E2u h\u1ECFi con (", subQuestions.length, "/5)"] }), _jsxs(Button, { onClick: addSubQuestion, disabled: subQuestions.length >= 5, variant: "outline", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [subQuestions.map((subQuestion, sqIndex) => (_jsxs(Card, { className: "border-2", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(CardTitle, { className: "text-lg", children: ["C\u00E2u ", sqIndex + 1] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => removeSubQuestion(subQuestion.id), disabled: subQuestions.length <= 1, children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: `correctWord-${subQuestion.id}`, children: "T\u1EEB \u0111\u00FAng *" }), _jsx(Input, { id: `correctWord-${subQuestion.id}`, value: subQuestion.correctWord, onChange: (e) => updateSubQuestion(subQuestion.id, 'correctWord', e.target.value.toUpperCase()), placeholder: "Nh\u1EADp t\u1EEB \u0111\u00FAng (vd: COMPUTER)", className: "mt-1", disabled: isClientMode }), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: "T\u1EEB n\u00E0y s\u1EBD \u0111\u01B0\u1EE3c x\u00E1o tr\u1ED9n th\u00E0nh c\u00E1c k\u00FD t\u1EF1 ng\u1EABu nhi\u00EAn khi hi\u1EC3n th\u1ECB" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `image-${subQuestion.id}`, children: "H\u00ECnh \u1EA3nh g\u1EE3i \u00FD *" }), _jsx(FileUpload, { id: `image-${subQuestion.id}`, label: "", accept: "image/*", value: subQuestion.imageUrl, onChange: (key) => updateSubQuestion(subQuestion.id, 'imageUrl', key), onPresignedUrlChange: (presignedUrl) => {
+                                                            updateImagePreviewUrl(subQuestion.id, presignedUrl);
+                                                        }, disabled: isClientMode, maxSize: 5, placeholder: "Upload \u1EA3nh", required: true, autoUpload: true, prefix: "questions" }), subQuestion.imageUrl && (_jsx("div", { className: "relative mt-2 h-32 w-full max-w-md overflow-hidden rounded border", children: _jsx("img", { src: imagePreviewUrls[subQuestion.id] || subQuestion.imageUrl, alt: `Preview for question ${sqIndex + 1}`, className: "h-full w-full object-contain", onError: () => {
+                                                                console.error('Failed to load image:', subQuestion.imageUrl);
+                                                            } }) }))] })] })] }, subQuestion.id))), subQuestions.length === 0 && (_jsx("div", { className: "py-8 text-center text-gray-500", children: _jsx("p", { children: "Ch\u01B0a c\u00F3 c\u00E2u h\u1ECFi con n\u00E0o. Nh\u1EA5n \"Th\u00EAm c\u00E2u h\u1ECFi\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." }) }))] })] })] }));
+}
+export function ArrangeLettersIntoWordsCreator(props) {
+    return _jsx(ArrangeLettersIntoWordsCreatorContent, { ...props });
+}

package/dist/components/questions/types/arrange-letters-into-words/index.js

@@ -1 +1,2 @@
-export*from"./ArrangeLettersIntoWordsCreator";export*from"./ArrangeLettersIntoWordsClient";
+export * from './ArrangeLettersIntoWordsCreator';
+export * from './ArrangeLettersIntoWordsClient';

package/dist/components/questions/types/arrange-letters-into-words/register.js

@@ -1 +1,4 @@
-import{ArrangeLettersIntoWordsCreator as r}from"./ArrangeLettersIntoWordsCreator";export const arrangeLettersIntoWordsRegistration={component:r};
+import { ArrangeLettersIntoWordsCreator } from './ArrangeLettersIntoWordsCreator';
+export const arrangeLettersIntoWordsRegistration = {
+    component: ArrangeLettersIntoWordsCreator,
+};

package/dist/components/questions/types/arrange-letters-into-words/transform.js

@@ -1 +1,24 @@
-export const transformArrangeLettersIntoWords=r=>{const e=r.answer;if(!e?.subQuestions)return{apiContent:{},apiCorrectAnswer:{}};return{apiContent:{subQuestions:(e.subQuestions||[]).map(r=>({id:r.id,imageUrl:r.imageUrl||""}))},apiCorrectAnswer:{answers:(e.subQuestions||[]).reduce((r,e)=>(e.id&&e.correctWord&&(r[e.id]=e.correctWord),r),{})}}};
+export const transformArrangeLettersIntoWords = (question) => {
+    const answerData = question.answer;
+    if (!answerData?.subQuestions) {
+        return { apiContent: {}, apiCorrectAnswer: {} };
+    }
+    const subQuestions = (answerData.subQuestions || []).map((sq) => ({
+        id: sq.id,
+        imageUrl: sq.imageUrl || '',
+    }));
+    const answers = (answerData.subQuestions || []).reduce((acc, sq) => {
+        if (sq.id && sq.correctWord) {
+            acc[sq.id] = sq.correctWord;
+        }
+        return acc;
+    }, {});
+    return {
+        apiContent: {
+            subQuestions,
+        },
+        apiCorrectAnswer: {
+            answers,
+        },
+    };
+};

package/dist/components/questions/types/choose-correct-adjective/ChooseCorrectAdjectiveClient.js

@@ -1 +1,74 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as t}from"react";import{cn as n}from"../../../../shared/lib/utils";import{Check as d,X as a,ListChecks as s,Lightbulb as i}from"lucide-react";export function ChooseCorrectAdjectiveClient({questionData:o,onSubmit:l,isReviewMode:c=!1,userAnswer:m}){const[g,h]=t(m),b=e=>e===o.correctAnswer,x=void 0!==g&&b(g),p=void 0!==g,f=o.options[o.correctAnswer];return e("div",{className:"space-y-5",children:r("div",{className:"overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm",children:[r("div",{className:n("flex items-center justify-between border-b px-5 py-3",c&&x&&"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50",c&&p&&!x&&"border-red-200 bg-gradient-to-r from-red-50 to-rose-50",(!c||!p)&&"border-gray-100 bg-gradient-to-r from-gray-50 to-white"),children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:n("flex h-8 w-8 items-center justify-center rounded-lg text-white shadow-sm",c&&x&&"bg-gradient-to-br from-green-500 to-emerald-600",c&&p&&!x&&"bg-gradient-to-br from-red-500 to-rose-600",(!c||!p)&&"bg-gradient-to-br from-teal-500 to-cyan-600"),children:e(s,{className:"h-4 w-4"})}),e("span",{className:"text-sm font-medium text-gray-700",children:"Chọn tính từ đúng"})]}),c&&p&&r("div",{className:n("flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold",x?"bg-green-100 text-green-700":"bg-red-100 text-red-700"),children:[e(x?d:a,{className:"h-3.5 w-3.5"}),x?"Đúng":"Sai"]})]}),r("div",{className:"p-5 space-y-5",children:[r("div",{className:"rounded-xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 p-5",children:[e("div",{className:"text-lg leading-relaxed flex flex-wrap items-center gap-1",children:o.sentence.split("{0}").map((t,d,a)=>r("span",{children:[e("span",{className:"text-gray-800",children:t}),d<a.length-1&&e("span",{className:"inline-flex items-center mx-1",children:e("span",{className:n("inline-block min-w-[100px] px-3 py-1 text-center font-bold rounded-lg border-2 border-dashed",p?c?x?"border-green-400 bg-green-100 text-green-800":"border-red-400 bg-red-100 text-red-800":"border-indigo-400 bg-indigo-100 text-indigo-800":"border-gray-300 bg-gray-100 text-gray-400"),children:p?o.options[g]:"_______"})})]},d))}),r("div",{className:"mt-3 flex items-center gap-2",children:[e("span",{className:"text-sm text-gray-500",children:"Lựa chọn:"}),r("span",{className:"text-sm font-medium text-gray-600",children:["(",o.options.join(" / "),")"]})]})]}),r("div",{className:"space-y-2",children:[e("p",{className:"text-sm font-medium text-gray-600 mb-3",children:"Chọn đáp án:"}),e("div",{className:"grid grid-cols-2 gap-3 sm:grid-cols-4",children:o.options.map((t,s)=>{const i=(e=>g===e)(s),o=b(s),m=String.fromCharCode(65+s);return r("button",{type:"button",onClick:()=>(e=>{c||(h(e),l?.(e))})(s),disabled:c,className:n("group flex items-center gap-2 rounded-xl border-2 p-3 text-left transition-all",c?o?"border-green-400 bg-green-50":i?"border-red-400 bg-red-50":"border-gray-200 bg-gray-50":i?"border-indigo-500 bg-indigo-50 shadow-sm ring-2 ring-indigo-100":"border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm"),children:[e("div",{className:n("flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all",c?o?"bg-green-500 text-white":i?"bg-red-500 text-white":"bg-gray-200 text-gray-600":i?"bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-sm":"bg-gray-100 text-gray-600 group-hover:bg-gray-200"),children:m}),e("span",{className:n("flex-1 text-sm font-semibold",c&&o?"text-green-800":c&&i&&!o?"text-red-800":"text-gray-700"),children:t}),c&&(o||i)&&e("div",{className:n("flex h-5 w-5 items-center justify-center rounded-full",o?"bg-green-500":"bg-red-500"),children:e(o?d:a,{className:"h-3 w-3 text-white"})})]},s)})})]}),c&&r("div",{className:"space-y-4 pt-2",children:[r("div",{className:"rounded-xl border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4",children:[r("div",{className:"flex items-center gap-2 mb-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-lg bg-green-200",children:e(d,{className:"h-3.5 w-3.5 text-green-700"})}),e("span",{className:"text-sm font-medium text-green-800",children:"Câu hoàn chỉnh:"})]}),e("p",{className:"text-base font-medium text-green-900 pl-8",children:o.sentence.replace("{0}",f)})]}),e("div",{className:n("rounded-xl p-4",x?"bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200":"bg-gradient-to-r from-red-50 to-rose-50 border border-red-200"),children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:n("flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm",x?"bg-gradient-to-br from-green-500 to-emerald-600":"bg-gradient-to-br from-red-500 to-rose-600"),children:e(x?d:a,{className:"h-5 w-5"})}),r("div",{children:[e("p",{className:n("text-sm font-semibold",x?"text-green-800":"text-red-800"),children:x?"Chính xác!":"Chưa đúng"}),e("p",{className:n("text-xs",x?"text-green-600":"text-red-600"),children:x?"Bạn đã chọn đúng tính từ.":`Đáp án đúng là "${f}".`})]})]})}),o.explanation&&e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm",children:e(i,{className:"h-4 w-4"})}),r("div",{children:[e("p",{className:"text-sm font-semibold text-blue-800",children:"Giải thích:"}),e("p",{className:"text-sm text-blue-700 mt-1",children:o.explanation})]})]})})]}),!c&&!p&&e("div",{className:"rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4",children:r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm",children:e("span",{className:"text-sm font-bold",children:"!"})}),r("div",{children:[e("p",{className:"text-sm font-medium text-amber-800",children:"Chọn tính từ phù hợp"}),e("p",{className:"text-xs text-amber-600",children:"Nhấn vào một trong các lựa chọn bên trên."})]})]})})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../../../shared/lib/utils';
+import { Check, X, ListChecks, Lightbulb } from 'lucide-react';
+export function ChooseCorrectAdjectiveClient({ questionData, onSubmit, isReviewMode = false, userAnswer, }) {
+    const [selectedAnswer, setSelectedAnswer] = useState(userAnswer);
+    const handleAnswerChange = (index) => {
+        if (isReviewMode)
+            return;
+        setSelectedAnswer(index);
+        onSubmit?.(index);
+    };
+    const isCorrect = (index) => {
+        return index === questionData.correctAnswer;
+    };
+    const isSelected = (index) => {
+        return selectedAnswer === index;
+    };
+    const userAnswerCorrect = selectedAnswer !== undefined && isCorrect(selectedAnswer);
+    const hasAnswered = selectedAnswer !== undefined;
+    const getOptionText = (opt) => {
+        if (typeof opt === 'string')
+            return opt;
+        if (typeof opt === 'object' && opt !== null) {
+            const o = opt;
+            return String(o.text ?? o.imageUrl ?? o.content ?? o.id ?? '');
+        }
+        return String(opt ?? '');
+    };
+    // Get the correct answer text
+    const correctAnswerText = getOptionText(questionData.options[questionData.correctAnswer]);
+    return (_jsx("div", { className: "space-y-5", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: cn('flex items-center justify-between border-b px-5 py-3', isReviewMode && userAnswerCorrect && 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50', isReviewMode && hasAnswered && !userAnswerCorrect && 'border-red-200 bg-gradient-to-r from-red-50 to-rose-50', (!isReviewMode || !hasAnswered) && 'border-gray-100 bg-gradient-to-r from-gray-50 to-white'), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white shadow-sm', isReviewMode && userAnswerCorrect && 'bg-gradient-to-br from-green-500 to-emerald-600', isReviewMode && hasAnswered && !userAnswerCorrect && 'bg-gradient-to-br from-red-500 to-rose-600', (!isReviewMode || !hasAnswered) && 'bg-gradient-to-br from-teal-500 to-cyan-600'), children: _jsx(ListChecks, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "Ch\u1ECDn t\u00EDnh t\u1EEB \u0111\u00FAng" })] }), isReviewMode && hasAnswered && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', userAnswerCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [userAnswerCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), userAnswerCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "p-5 space-y-5", children: [_jsxs("div", { className: "rounded-xl bg-gradient-to-br from-slate-50 to-gray-50 border border-gray-100 p-5", children: [_jsx("div", { className: "text-lg leading-relaxed flex flex-wrap items-center gap-1", children: questionData.sentence.split('{0}').map((part, index, arr) => (_jsxs("span", { children: [_jsx("span", { className: "text-gray-800", children: part }), index < arr.length - 1 && (_jsx("span", { className: "inline-flex items-center mx-1", children: _jsx("span", { className: cn('inline-block min-w-[100px] px-3 py-1 text-center font-bold rounded-lg border-2 border-dashed', hasAnswered
+                                                        ? isReviewMode
+                                                            ? userAnswerCorrect
+                                                                ? 'border-green-400 bg-green-100 text-green-800'
+                                                                : 'border-red-400 bg-red-100 text-red-800'
+                                                            : 'border-indigo-400 bg-indigo-100 text-indigo-800'
+                                                        : 'border-gray-300 bg-gray-100 text-gray-400'), children: hasAnswered ? getOptionText(questionData.options[selectedAnswer]) : '_______' }) }))] }, index))) }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "L\u1EF1a ch\u1ECDn:" }), _jsxs("span", { className: "text-sm font-medium text-gray-600", children: ["(", questionData.options.map(getOptionText).join(' / '), ")"] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-gray-600 mb-3", children: "Ch\u1ECDn \u0111\u00E1p \u00E1n:" }), _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: questionData.options.map((option, index) => {
+                                        const selected = isSelected(index);
+                                        const correct = isCorrect(index);
+                                        const letter = String.fromCharCode(65 + index);
+                                        const optText = getOptionText(option);
+                                        return (_jsxs("button", { type: "button", onClick: () => handleAnswerChange(index), disabled: isReviewMode, className: cn('group flex items-center gap-2 rounded-xl border-2 p-3 text-left transition-all', isReviewMode
+                                                ? correct
+                                                    ? 'border-green-400 bg-green-50'
+                                                    : selected
+                                                        ? 'border-red-400 bg-red-50'
+                                                        : 'border-gray-200 bg-gray-50'
+                                                : selected
+                                                    ? 'border-indigo-500 bg-indigo-50 shadow-sm ring-2 ring-indigo-100'
+                                                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm'), children: [_jsx("div", { className: cn('flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold transition-all', isReviewMode
+                                                        ? correct
+                                                            ? 'bg-green-500 text-white'
+                                                            : selected
+                                                                ? 'bg-red-500 text-white'
+                                                                : 'bg-gray-200 text-gray-600'
+                                                        : selected
+                                                            ? 'bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-sm'
+                                                            : 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'), children: letter }), _jsx("span", { className: cn('flex-1 text-sm font-semibold', isReviewMode && correct
+                                                        ? 'text-green-800'
+                                                        : isReviewMode && selected && !correct
+                                                            ? 'text-red-800'
+                                                            : 'text-gray-700'), children: optText }), isReviewMode && (correct || selected) && (_jsx("div", { className: cn('flex h-5 w-5 items-center justify-center rounded-full', correct ? 'bg-green-500' : 'bg-red-500'), children: correct
+                                                        ? _jsx(Check, { className: "h-3 w-3 text-white" })
+                                                        : _jsx(X, { className: "h-3 w-3 text-white" }) }))] }, index));
+                                    }) })] }), isReviewMode && (_jsxs("div", { className: "space-y-4 pt-2", children: [_jsxs("div", { className: "rounded-xl border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-lg bg-green-200", children: _jsx(Check, { className: "h-3.5 w-3.5 text-green-700" }) }), _jsx("span", { className: "text-sm font-medium text-green-800", children: "C\u00E2u ho\u00E0n ch\u1EC9nh:" })] }), _jsx("p", { className: "text-base font-medium text-green-900 pl-8", children: questionData.sentence.replace('{0}', correctAnswerText) })] }), _jsx("div", { className: cn('rounded-xl p-4', userAnswerCorrect
+                                        ? 'bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200'
+                                        : 'bg-gradient-to-r from-red-50 to-rose-50 border border-red-200'), children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn('flex h-10 w-10 items-center justify-center rounded-xl text-white shadow-sm', userAnswerCorrect
+                                                    ? 'bg-gradient-to-br from-green-500 to-emerald-600'
+                                                    : 'bg-gradient-to-br from-red-500 to-rose-600'), children: userAnswerCorrect ? _jsx(Check, { className: "h-5 w-5" }) : _jsx(X, { className: "h-5 w-5" }) }), _jsxs("div", { children: [_jsx("p", { className: cn('text-sm font-semibold', userAnswerCorrect ? 'text-green-800' : 'text-red-800'), children: userAnswerCorrect ? 'Chính xác!' : 'Chưa đúng' }), _jsx("p", { className: cn('text-xs', userAnswerCorrect ? 'text-green-600' : 'text-red-600'), children: userAnswerCorrect
+                                                            ? 'Bạn đã chọn đúng tính từ.'
+                                                            : `Đáp án đúng là "${correctAnswerText}".` })] })] }) }), questionData.explanation && (_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white shadow-sm", children: _jsx(Lightbulb, { className: "h-4 w-4" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold text-blue-800", children: "Gi\u1EA3i th\u00EDch:" }), _jsx("p", { className: "text-sm text-blue-700 mt-1", children: questionData.explanation })] })] }) }))] })), !isReviewMode && !hasAnswered && (_jsx("div", { className: "rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm", children: _jsx("span", { className: "text-sm font-bold", children: "!" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-amber-800", children: "Ch\u1ECDn t\u00EDnh t\u1EEB ph\u00F9 h\u1EE3p" }), _jsx("p", { className: "text-xs text-amber-600", children: "Nh\u1EA5n v\u00E0o m\u1ED9t trong c\u00E1c l\u1EF1a ch\u1ECDn b\u00EAn tr\u00EAn." })] })] }) }))] })] }) }));
+}