501 lines
22 KiB
TypeScript
501 lines
22 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import confetti from 'canvas-confetti';
|
|
import {
|
|
Brush,
|
|
Trash2,
|
|
Download,
|
|
Sparkles,
|
|
Heart,
|
|
Wind,
|
|
HelpCircle,
|
|
Shuffle,
|
|
Check
|
|
} from 'lucide-react';
|
|
import { KINDNESS_CHALLENGES, DISCUSSION_PROMPTS, COLOR_PALETTE } from '../data/storyData';
|
|
import { soundManager } from '../utils/audio';
|
|
|
|
interface ActivityCornerProps {
|
|
isBedtimeMode: boolean;
|
|
}
|
|
|
|
export const ActivityCorner: React.FC<ActivityCornerProps> = ({ isBedtimeMode }) => {
|
|
// Canvas State
|
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
|
const [isDrawing, setIsDrawing] = useState<boolean>(false);
|
|
const [brushColor, setBrushColor] = useState<string>('#60a5fa');
|
|
const [brushSize, setBrushSize] = useState<number>(18);
|
|
const [activeTab, setActiveTab] = useState<'canvas' | 'kindness' | 'breathing' | 'discussion'>('canvas');
|
|
|
|
// Kindness State
|
|
const [challengeIndex, setChallengeIndex] = useState<number>(0);
|
|
const [completedChallenges, setCompletedChallenges] = useState<number[]>([]);
|
|
|
|
// Breathing State
|
|
const [breathPhase, setBreathPhase] = useState<'Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)'>('Inhale (Gather Soft Mist)');
|
|
const [isBreathingActive, setIsBreathingActive] = useState<boolean>(false);
|
|
|
|
// Initialize Canvas background
|
|
useEffect(() => {
|
|
const canvas = canvasRef.current;
|
|
if (canvas) {
|
|
const ctx = canvas.getContext('2d');
|
|
if (ctx) {
|
|
ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
}, [isBedtimeMode, activeTab]);
|
|
|
|
// Breathing Cycle loop
|
|
useEffect(() => {
|
|
let timer: ReturnType<typeof setInterval>;
|
|
if (isBreathingActive) {
|
|
const phases: ('Inhale (Gather Soft Mist)' | 'Hold (Glow with Warmth)' | 'Exhale (Rain Gentle Kindness)')[] = [
|
|
'Inhale (Gather Soft Mist)',
|
|
'Hold (Glow with Warmth)',
|
|
'Exhale (Rain Gentle Kindness)'
|
|
];
|
|
let idx = 0;
|
|
setBreathPhase(phases[0]);
|
|
|
|
timer = setInterval(() => {
|
|
idx = (idx + 1) % phases.length;
|
|
setBreathPhase(phases[idx]);
|
|
if (idx === 0) soundManager.playChime();
|
|
if (idx === 2) soundManager.playRain();
|
|
}, 4000);
|
|
}
|
|
return () => clearInterval(timer);
|
|
}, [isBreathingActive]);
|
|
|
|
// Canvas drawing handlers
|
|
const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
setIsDrawing(true);
|
|
const rect = canvas.getBoundingClientRect();
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
|
|
|
const x = (clientX - rect.left) * (canvas.width / rect.width);
|
|
const y = (clientY - rect.top) * (canvas.height / rect.height);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
ctx.strokeStyle = brushColor;
|
|
ctx.lineWidth = brushSize;
|
|
};
|
|
|
|
const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
|
|
if (!isDrawing) return;
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
|
|
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
|
|
|
|
const x = (clientX - rect.left) * (canvas.width / rect.width);
|
|
const y = (clientY - rect.top) * (canvas.height / rect.height);
|
|
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
};
|
|
|
|
const stopDrawing = () => {
|
|
setIsDrawing(false);
|
|
};
|
|
|
|
const clearCanvas = () => {
|
|
soundManager.playFlutter();
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
ctx.fillStyle = isBedtimeMode ? '#1e1b4b' : '#f0f9ff';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
};
|
|
|
|
const downloadCanvas = () => {
|
|
soundManager.playPop();
|
|
const canvas = canvasRef.current;
|
|
if (!canvas) return;
|
|
const link = document.createElement('a');
|
|
link.download = 'pip-cloud-creation.png';
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
};
|
|
|
|
// Kindness handlers
|
|
const handleShuffleKindness = () => {
|
|
soundManager.playPop();
|
|
setChallengeIndex((prev) => (prev + 1) % KINDNESS_CHALLENGES.length);
|
|
};
|
|
|
|
const handleCompleteChallenge = (id: number) => {
|
|
soundManager.playStarCelebration();
|
|
setCompletedChallenges((prev) => [...prev, id]);
|
|
confetti({
|
|
particleCount: 50,
|
|
spread: 60,
|
|
origin: { y: 0.6 }
|
|
});
|
|
};
|
|
|
|
const currentChallenge = KINDNESS_CHALLENGES[challengeIndex];
|
|
const isChallengeDone = completedChallenges.includes(currentChallenge.id);
|
|
|
|
return (
|
|
<div className={`min-h-[calc(100vh-7rem)] py-8 px-4 sm:px-6 lg:px-8 transition-colors duration-300 ${
|
|
isBedtimeMode
|
|
? 'bg-gradient-to-b from-indigo-950 via-slate-900 to-indigo-950 text-indigo-100'
|
|
: 'bg-[#faf6ee] text-stone-900'
|
|
}`}>
|
|
<div className="max-w-7xl mx-auto space-y-8">
|
|
{/* Header */}
|
|
<div className={`p-6 sm:p-8 rounded-3xl border shadow-sm ${
|
|
isBedtimeMode
|
|
? 'bg-slate-900/90 border-indigo-800'
|
|
: 'bg-white border-amber-200/90'
|
|
}`}>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-300/40">
|
|
Interactive Activity Studio
|
|
</span>
|
|
<span className="text-xs text-stone-500 dark:text-indigo-300">
|
|
Creativity • Kindness • Mindfulness • Family Discussion
|
|
</span>
|
|
</div>
|
|
<h2 className="text-2xl sm:text-3xl font-heading font-bold text-amber-950 dark:text-white">
|
|
Pip & Caelum's Creative Meadow
|
|
</h2>
|
|
<p className="mt-1 text-sm sm:text-base text-stone-600 dark:text-indigo-200 max-w-3xl leading-relaxed">
|
|
Hands-on interactive experiences designed to extend the storybook's lessons of kindness, self-acceptance, and imaginative problem-solving into real-world family life.
|
|
</p>
|
|
|
|
{/* Activity Category Tabs */}
|
|
<div className="mt-6 flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => { soundManager.playPop(); setActiveTab('canvas'); }}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
|
|
activeTab === 'canvas'
|
|
? 'bg-amber-500 text-white shadow-md'
|
|
: 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
|
|
}`}
|
|
>
|
|
<Brush className="w-4 h-4" />
|
|
<span>Paint Your Cloud</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { soundManager.playPop(); setActiveTab('kindness'); }}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
|
|
activeTab === 'kindness'
|
|
? 'bg-rose-500 text-white shadow-md'
|
|
: 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
|
|
}`}
|
|
>
|
|
<Heart className="w-4 h-4" />
|
|
<span>Kindness Challenge</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { soundManager.playPop(); setActiveTab('breathing'); }}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
|
|
activeTab === 'breathing'
|
|
? 'bg-sky-500 text-white shadow-md'
|
|
: 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
|
|
}`}
|
|
>
|
|
<Wind className="w-4 h-4" />
|
|
<span>Bedtime Cloud Breathing</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { soundManager.playPop(); setActiveTab('discussion'); }}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-2xl text-xs sm:text-sm font-bold transition-all ${
|
|
activeTab === 'discussion'
|
|
? 'bg-purple-500 text-white shadow-md'
|
|
: 'bg-stone-100 dark:bg-indigo-900 text-stone-700 dark:text-indigo-200 hover:bg-stone-200'
|
|
}`}
|
|
>
|
|
<HelpCircle className="w-4 h-4" />
|
|
<span>Family Discussion Guide</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TAB 1: Paint Your Cloud Canvas */}
|
|
{activeTab === 'canvas' && (
|
|
<div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
|
|
isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
|
|
}`}>
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-heading font-bold text-stone-900 dark:text-white flex items-center gap-2">
|
|
<span>🎨</span> Paint Your Whispering Cloud Creature
|
|
</h3>
|
|
<p className="text-xs text-stone-500 dark:text-indigo-300">
|
|
Use Pip's berry pigments to swirl fluffy clouds, raindrops, and flowers!
|
|
</p>
|
|
</div>
|
|
|
|
{/* Canvas Controls */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{/* Palette picker */}
|
|
<div className="flex items-center gap-1.5 bg-stone-100 dark:bg-indigo-950 p-1.5 rounded-2xl border border-stone-200 dark:border-indigo-800">
|
|
{COLOR_PALETTE.map((c) => (
|
|
<button
|
|
key={c.hex}
|
|
onClick={() => { soundManager.playPop(); setBrushColor(c.hex); }}
|
|
style={{ backgroundColor: c.hex }}
|
|
className={`w-7 h-7 rounded-xl transition-transform ${
|
|
brushColor === c.hex ? 'scale-125 ring-2 ring-amber-500 shadow-md' : 'hover:scale-110'
|
|
}`}
|
|
title={c.name}
|
|
/>
|
|
))}
|
|
{/* White for fluffy cloud */}
|
|
<button
|
|
onClick={() => { soundManager.playPop(); setBrushColor('#ffffff'); }}
|
|
className={`w-7 h-7 rounded-xl bg-white border border-stone-300 transition-transform ${
|
|
brushColor === '#ffffff' ? 'scale-125 ring-2 ring-amber-500 shadow-md' : 'hover:scale-110'
|
|
}`}
|
|
title="Fluffy White Cloud"
|
|
/>
|
|
</div>
|
|
|
|
{/* Brush Size */}
|
|
<div className="flex items-center gap-1 bg-stone-100 dark:bg-indigo-950 px-3 py-1.5 rounded-2xl border border-stone-200 dark:border-indigo-800 text-xs font-semibold">
|
|
<span>Size:</span>
|
|
<input
|
|
type="range"
|
|
min="6"
|
|
max="45"
|
|
value={brushSize}
|
|
onChange={(e) => setBrushSize(parseInt(e.target.value))}
|
|
className="w-20 accent-amber-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Clear */}
|
|
<button
|
|
onClick={clearCanvas}
|
|
className="p-2 rounded-xl border border-stone-200 dark:border-indigo-800 hover:bg-rose-50 text-stone-600 dark:text-indigo-300 hover:text-rose-600 transition-colors"
|
|
title="Clear Canvas"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
|
|
{/* Download */}
|
|
<button
|
|
onClick={downloadCanvas}
|
|
className="flex items-center gap-1 px-3 py-1.5 rounded-xl bg-amber-500 hover:bg-amber-600 text-white font-bold text-xs shadow-sm transition-all"
|
|
title="Save Picture"
|
|
>
|
|
<Download className="w-3.5 h-3.5" />
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Drawing Canvas Board */}
|
|
<div className="relative rounded-2xl overflow-hidden border-2 border-stone-300 dark:border-indigo-800 shadow-inner bg-sky-50 dark:bg-indigo-950 touch-none">
|
|
<canvas
|
|
ref={canvasRef}
|
|
width={800}
|
|
height={480}
|
|
onMouseDown={startDrawing}
|
|
onMouseMove={draw}
|
|
onMouseUp={stopDrawing}
|
|
onMouseLeave={stopDrawing}
|
|
onTouchStart={startDrawing}
|
|
onTouchMove={draw}
|
|
onTouchEnd={stopDrawing}
|
|
className="w-full h-[360px] sm:h-[480px] cursor-crosshair block"
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-center text-xs text-stone-400 dark:text-indigo-400 italic">
|
|
Tip: Draw a cloud body, then paint little blushing pink cheeks and golden rainbow drops!
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 2: Kindness Challenge */}
|
|
{activeTab === 'kindness' && (
|
|
<div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
|
|
isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
|
|
}`}>
|
|
<div className="max-w-2xl mx-auto text-center space-y-6">
|
|
<div className="w-20 h-20 mx-auto rounded-3xl bg-rose-100 dark:bg-rose-950/60 border border-rose-300 dark:border-rose-700 flex items-center justify-center text-4xl shadow-md">
|
|
{currentChallenge.icon}
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-xs font-bold uppercase tracking-wider text-rose-600 dark:text-rose-400 px-3 py-1 rounded-full bg-rose-50 dark:bg-rose-950 border border-rose-200 dark:border-rose-800">
|
|
Daily Mission • {currentChallenge.difficulty}
|
|
</span>
|
|
<h3 className="text-2xl sm:text-3xl font-heading font-bold text-stone-900 dark:text-white mt-3">
|
|
{currentChallenge.title}
|
|
</h3>
|
|
<p className="mt-3 text-base sm:text-lg font-reading leading-relaxed text-stone-700 dark:text-stone-200">
|
|
"{currentChallenge.description}"
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-3 pt-2">
|
|
<button
|
|
onClick={handleShuffleKindness}
|
|
className="flex items-center gap-2 px-4 py-2.5 rounded-2xl bg-stone-100 hover:bg-stone-200 dark:bg-indigo-900 dark:hover:bg-indigo-800 text-stone-800 dark:text-indigo-100 font-heading font-bold text-sm transition-all"
|
|
>
|
|
<Shuffle className="w-4 h-4" />
|
|
<span>Try Another Challenge</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleCompleteChallenge(currentChallenge.id)}
|
|
disabled={isChallengeDone}
|
|
className={`flex items-center gap-2 px-6 py-2.5 rounded-2xl font-heading font-bold text-sm shadow-md transition-all ${
|
|
isChallengeDone
|
|
? 'bg-emerald-600 text-white cursor-default'
|
|
: 'bg-rose-500 hover:bg-rose-600 text-white'
|
|
}`}
|
|
>
|
|
{isChallengeDone ? (
|
|
<>
|
|
<Check className="w-4 h-4" />
|
|
<span>Completed! ⭐</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>I Did This Today!</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="text-xs text-stone-500 dark:text-indigo-300">
|
|
You have completed {completedChallenges.length} of {KINDNESS_CHALLENGES.length} kindness challenges!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 3: Bedtime Cloud Breathing */}
|
|
{activeTab === 'breathing' && (
|
|
<div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
|
|
isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
|
|
}`}>
|
|
<div className="max-w-xl mx-auto text-center space-y-6">
|
|
<div>
|
|
<span className="text-xs font-bold uppercase tracking-wider text-sky-600 dark:text-sky-400 px-3 py-1 rounded-full bg-sky-50 dark:bg-sky-950 border border-sky-200 dark:border-sky-800">
|
|
Mindfulness & Bedtime Regulation
|
|
</span>
|
|
<h3 className="text-2xl sm:text-3xl font-heading font-bold text-stone-900 dark:text-white mt-2">
|
|
Caelum's Gentle Cloud Breath
|
|
</h3>
|
|
<p className="text-sm text-stone-600 dark:text-indigo-200 mt-1">
|
|
Help little bodies settle for sleep or calm down after high-energy emotions.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Rhythmic Expanding/Contracting Breathing Ring */}
|
|
<div className="relative py-12 flex items-center justify-center">
|
|
<div className={`w-56 h-56 sm:w-64 sm:h-64 rounded-full flex items-center justify-center transition-all duration-1000 ${
|
|
isBreathingActive
|
|
? breathPhase.startsWith('Inhale')
|
|
? 'scale-125 bg-gradient-to-tr from-sky-400 via-rose-300 to-amber-200 shadow-2xl shadow-sky-400/40'
|
|
: breathPhase.startsWith('Hold')
|
|
? 'scale-125 bg-amber-200/90 ring-8 ring-amber-300/50 shadow-2xl shadow-amber-300/40'
|
|
: 'scale-90 bg-gradient-to-br from-indigo-400 via-purple-300 to-sky-300 shadow-lg'
|
|
: 'scale-100 bg-sky-100 dark:bg-indigo-900'
|
|
}`}>
|
|
<div className="w-40 h-40 rounded-full bg-white/90 dark:bg-slate-900/90 shadow-inner flex flex-col items-center justify-center p-4 text-center">
|
|
<span className="text-4xl mb-1">☁️</span>
|
|
<span className="font-heading font-bold text-xs sm:text-sm text-stone-800 dark:text-white leading-tight">
|
|
{isBreathingActive ? breathPhase : 'Ready to Breathe'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
onClick={() => {
|
|
soundManager.playPop();
|
|
setIsBreathingActive(!isBreathingActive);
|
|
}}
|
|
className={`px-6 py-3 rounded-2xl font-heading font-bold text-sm shadow-md transition-all ${
|
|
isBreathingActive
|
|
? 'bg-stone-700 text-white hover:bg-stone-800'
|
|
: 'bg-sky-500 hover:bg-sky-600 text-white'
|
|
}`}
|
|
>
|
|
{isBreathingActive ? 'Pause Exercise' : 'Start 4-4-4 Cloud Breathing'}
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-xs text-stone-500 dark:text-indigo-300">
|
|
Follow the cloud: Breathe in peace, hold warm love, breathe out gentle rain.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 4: Family & Educator Discussion Prompts */}
|
|
{activeTab === 'discussion' && (
|
|
<div className={`p-6 sm:p-8 rounded-3xl border shadow-xl ${
|
|
isBedtimeMode ? 'bg-slate-900 border-indigo-800' : 'bg-white border-amber-200/90'
|
|
}`}>
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<HelpCircle className="w-5 h-5 text-purple-600 dark:text-purple-400" />
|
|
<div>
|
|
<h3 className="text-xl font-heading font-bold text-stone-900 dark:text-white">
|
|
Parent, Caregiver & Teacher Circle-Time Guide
|
|
</h3>
|
|
<p className="text-xs text-stone-500 dark:text-indigo-300">
|
|
Open-ended questions to deepen comprehension and emotional connection
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{DISCUSSION_PROMPTS.map((prompt, i) => (
|
|
<div
|
|
key={i}
|
|
className="p-5 rounded-2xl border border-stone-200 dark:border-indigo-800 bg-stone-50/70 dark:bg-indigo-950/40 space-y-3"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-bold uppercase tracking-wider text-purple-700 dark:text-purple-300 px-2.5 py-0.5 rounded-full bg-purple-100 dark:bg-purple-950 border border-purple-200 dark:border-purple-800">
|
|
{prompt.category}
|
|
</span>
|
|
<span className="text-xs font-bold text-stone-400">
|
|
Q{i + 1}
|
|
</span>
|
|
</div>
|
|
|
|
<h4 className="font-heading font-bold text-base text-stone-900 dark:text-white">
|
|
"{prompt.question}"
|
|
</h4>
|
|
|
|
<div className="p-3 rounded-xl bg-white/80 dark:bg-slate-900/60 border border-stone-200/70 dark:border-indigo-800/80 text-xs text-stone-700 dark:text-stone-300">
|
|
<strong className="text-purple-800 dark:text-purple-300 block mb-0.5">
|
|
Caregiver Guidance:
|
|
</strong>
|
|
{prompt.guide}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|