diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 732c68c..4dbc81d 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from "react"; import { Card, TextInput, @@ -10,177 +10,179 @@ import { Container, Stack, Grid, - Alert, Paper, - AppShell, - Burger -} from '@mantine/core'; -import { useForm } from '@mantine/form'; +} from "@mantine/core"; +import { useForm } from "@mantine/form"; export function HomePage() { - const [story, setStory] = useState(''); + const [story, setStory] = useState(""); const [isGenerating, setIsGenerating] = useState(false); const form = useForm({ initialValues: { - childName: '', - age: '', - environmentalTopic: '', - livingEnvironment: '', + childName: "", + age: "", + environmentalTopic: "", + livingEnvironment: "", academicApproaches: { piaget: false, activeLearning: false, roleModeling: false, multipleIntelligences: false, vygotsky: false, - personalMotivation: false - } + personalMotivation: false, + }, }, validate: { - childName: (value) => value.trim().length === 0 ? 'لطفاً نام کودک را وارد کنید' : null, - age: (value) => (value < 2 || value > 11) ? 'لطفاً سن معتبر بین 2 تا 11 سال وارد کنید' : null, - environmentalTopic: (value) => !value ? 'لطفاً یک موضوع زیست‌محیطی انتخاب کنید' : null, - } + childName: (value) => + value.trim().length === 0 ? "لطفاً نام کودک را وارد کنید" : null, + age: (value: string): string | null => { + const numValue = parseInt(value, 10); + if (isNaN(numValue)) { + return "لطفاً سن معتبر بین 2 تا 11 سال وارد کنید"; + } + return numValue < 2 || numValue > 11 + ? "لطفاً سن معتبر بین 2 تا 11 سال وارد کنید" + : null; + }, + environmentalTopic: (value) => + !value ? "لطفاً یک موضوع زیست‌محیطی انتخاب کنید" : null, + }, }); const [formData, setFormData] = useState({ - childName: '', - age: '', - environmentalTopic: '', - livingEnvironment: '', + childName: "", + age: "", + environmentalTopic: "", + livingEnvironment: "", academicApproaches: { piaget: false, activeLearning: false, roleModeling: false, multipleIntelligences: false, vygotsky: false, - personalMotivation: false - } + personalMotivation: false, + }, }); const environmentalTopics = [ - 'حفاظت از حیوانات', - 'کاهش زباله', - 'صرفه‌جویی در آب', - 'حفاظت از درختان', - 'کاهش آلودگی هوا' + "حفاظت از حیوانات", + "کاهش زباله", + "صرفه‌جویی در آب", + "حفاظت از درختان", + "کاهش آلودگی هوا", ]; - const livingEnvironments = [ - 'شهر', - 'روستا', - 'حومه شهر', - 'ساحل', - 'کوهستان' - ]; + const livingEnvironments = ["شهر", "روستا", "حومه شهر", "ساحل", "کوهستان"]; const academicApproachesData = [ { - id: 'piaget', - label: 'نظریه رشد شناختی پیاژه', - description: 'تطبیق پیام و زبان داستان با سطح شناختی کودک' + id: "piaget", + label: "نظریه رشد شناختی پیاژه", + description: "تطبیق پیام و زبان داستان با سطح شناختی کودک", }, { - id: 'activeLearning', - label: 'نظریه یادگیری فعال', - description: 'درگیر کردن کودک در تصمیم‌گیری و حل چالش' + id: "activeLearning", + label: "نظریه یادگیری فعال", + description: "درگیر کردن کودک در تصمیم‌گیری و حل چالش", }, { - id: 'roleModeling', - label: 'نقش‌پذیری', - description: 'ارائه الگوی مثبت برای کودک' + id: "roleModeling", + label: "نقش‌پذیری", + description: "ارائه الگوی مثبت برای کودک", }, { - id: 'multipleIntelligences', - label: 'هوش‌های چندگانه گاردنر', - description: 'استفاده از انواع مختلف هوش در داستان' + id: "multipleIntelligences", + label: "هوش‌های چندگانه گاردنر", + description: "استفاده از انواع مختلف هوش در داستان", }, { - id: 'vygotsky', - label: 'نظریه منطقه تقریبی رشد ویگوتسکی', - description: 'وجود شخصیت راهنما در داستان' + id: "vygotsky", + label: "نظریه منطقه تقریبی رشد ویگوتسکی", + description: "وجود شخصیت راهنما در داستان", }, { - id: 'personalMotivation', - label: 'تقویت انگیزه شخصی', - description: 'تقویت حس استقلال و تاثیرگذاری کودک' - } + id: "personalMotivation", + label: "تقویت انگیزه شخصی", + description: "تقویت حس استقلال و تاثیرگذاری کودک", + }, ]; - const validateForm = () => { - if (!formData.childName.trim()) { - setError('لطفاً نام کودک را وارد کنید'); - return false; - } - if (!formData.age || formData.age < 2 || formData.age > 11) { - setError('لطفاً سن معتبر بین 2 تا 11 سال وارد کنید'); - return false; - } - if (!formData.environmentalTopic) { - setError('لطفاً یک موضوع زیست‌محیطی انتخاب کنید'); - return false; - } - setError(''); - return true; - }; - const generateStory = () => { - if (!validateForm()) return; + setIsGenerating(true); // Create story based on selected academic approaches - const ageGroup = formData.age <= 7 ? 'young' : 'older'; + const ageGroup = typeof formData.age === 'number' ? (formData.age <= 7 ? "young" : "older") : "unknown"; let storyElements = []; // Add story elements based on selected approaches if (formData.academicApproaches.piaget) { // Adapt language and concepts based on age - storyElements.push(ageGroup === 'young' - ? 'با زبانی ساده و تصویری' - : 'با مفاهیم پیچیده‌تر و منطقی'); + storyElements.push( + ageGroup === "young" + ? "با زبانی ساده و تصویری" + : "با مفاهیم پیچیده‌تر و منطقی" + ); } if (formData.academicApproaches.activeLearning) { - storyElements.push('در طول داستان چند تصمیم مهم برای گرفتن وجود دارد'); + storyElements.push("در طول داستان چند تصمیم مهم برای گرفتن وجود دارد"); } if (formData.academicApproaches.roleModeling) { - storyElements.push(`${formData.childName} به عنوان یک الگو برای دیگران عمل می‌کند`); + storyElements.push( + `${formData.childName} به عنوان یک الگو برای دیگران عمل می‌کند` + ); } if (formData.academicApproaches.multipleIntelligences) { - storyElements.push('از ترکیب هنر، منطق، و ارتباط با طبیعت استفاده می‌شود'); + storyElements.push( + "از ترکیب هنر، منطق، و ارتباط با طبیعت استفاده می‌شود" + ); } if (formData.academicApproaches.vygotsky) { - storyElements.push('یک راهنمای دانا در داستان حضور دارد'); + storyElements.push("یک راهنمای دانا در داستان حضور دارد"); } if (formData.academicApproaches.personalMotivation) { - storyElements.push('تاکید بر توانایی‌های شخصی و استقلال در تصمیم‌گیری'); + storyElements.push("تاکید بر توانایی‌های شخصی و استقلال در تصمیم‌گیری"); } - let generatedStory = ''; + let generatedStory = ""; - if (ageGroup === 'young') { + if (ageGroup === "young") { generatedStory = ` - یک روز قشنگ، ${formData.childName} کوچولوی ${formData.age} ساله که در ${formData.livingEnvironment} زندگی می‌کرد، - تصمیم گرفت به طبیعت کمک کند. موضوعی که خیلی براش مهم بود ${formData.environmentalTopic} بود. + یک روز قشنگ، ${formData.childName} کوچولوی ${formData.age} ساله که در ${ + formData.livingEnvironment + } زندگی می‌کرد، + تصمیم گرفت به طبیعت کمک کند. موضوعی که خیلی براش مهم بود ${ + formData.environmentalTopic + } بود. - ${storyElements.map(element => `\n${element}`).join('')} + ${storyElements.map((element) => `\n${element}`).join("")} - ${formData.childName} با کمک دوست جدیدش، یک سنجاب دانا به نام دانا، یاد گرفت که چطور می‌تونه به حفظ محیط زیست کمک کنه. + ${ + formData.childName + } با کمک دوست جدیدش، یک سنجاب دانا به نام دانا، یاد گرفت که چطور می‌تونه به حفظ محیط زیست کمک کنه. اونها با هم تصمیم گرفتن... `; } else { generatedStory = ` - ${formData.childName} ${formData.age} ساله، که در ${formData.livingEnvironment} زندگی می‌کرد، - یک روز متوجه مشکل مهمی در محیط زیست شد. اون تصمیم گرفت درباره ${formData.environmentalTopic} کاری انجام بده. + ${formData.childName} ${formData.age} ساله، که در ${ + formData.livingEnvironment + } زندگی می‌کرد، + یک روز متوجه مشکل مهمی در محیط زیست شد. اون تصمیم گرفت درباره ${ + formData.environmentalTopic + } کاری انجام بده. - ${storyElements.map(element => `\n${element}`).join('')} + ${storyElements.map((element) => `\n${element}`).join("")} - با کمک دوستاش و راهنمایی معلمش، ${formData.childName} یک برنامه عملی طراحی کرد... + با کمک دوستاش و راهنمایی معلمش، ${ + formData.childName + } یک برنامه عملی طراحی کرد... `; } @@ -188,37 +190,19 @@ export function HomePage() { setIsGenerating(false); }; - const handleInputChange = (e) => { - const { name, value } = e.target; - setFormData(prev => ({ - ...prev, - [name]: value - })); - }; - - const handleCheckboxChange = (approachId) => { - setFormData(prev => ({ - ...prev, - academicApproaches: { - ...prev.academicApproaches, - [approachId]: !prev.academicApproaches[approachId] - } - })); - }; - return ( - + - + سازنده داستان کودک - +
- + - رویکردهای آکادمیک + + رویکردهای آکادمیک + {academicApproachesData.map((approach) => ( ))} - @@ -268,17 +254,18 @@ export function HomePage() { {story && ( - + داستان {form.values.childName} - {story.split('\n').map((paragraph, index) => ( - paragraph.trim() && ( - - {paragraph} - - ) - ))} + {story.split("\n").map( + (paragraph, index) => + paragraph.trim() && ( + + {paragraph} + + ) + )} )}