87 lines
3.7 KiB
TypeScript
87 lines
3.7 KiB
TypeScript
import React from 'react'
|
||
import { motion } from 'framer-motion'
|
||
import { FaGraduationCap, FaUserCheck, FaEye } from 'react-icons/fa'
|
||
import { Role } from '@/proxy/classroom/models'
|
||
import { useStoreActions, useStoreState } from '@/store/store'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
import { Helmet } from 'react-helmet'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
||
const Dashboard: React.FC = () => {
|
||
const navigate = useNavigate()
|
||
const { translate } = useLocalization()
|
||
const { user } = useStoreState((state) => state.auth)
|
||
const { setUser } = useStoreActions((actions) => actions.auth.user)
|
||
|
||
const handleRoleSelect = (role: Role) => {
|
||
setUser({
|
||
...user,
|
||
role,
|
||
})
|
||
|
||
navigate(ROUTES_ENUM.protected.admin.classroom.classes, { replace: true })
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Helmet
|
||
titleTemplate="%s | Sözsoft Kurs Platform"
|
||
title={translate('::' + 'App.Classroom.Dashboard')}
|
||
defaultTitle="Sözsoft Kurs Platform"
|
||
></Helmet>
|
||
<div className="flex items-center justify-center p-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="text-center w-full max-w-4xl"
|
||
>
|
||
<p className="text-lg sm:text-xl text-gray-600 mb-8 sm:mb-12">Lütfen rolünüzü seçin</p>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
onClick={() => handleRoleSelect('teacher')}
|
||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500"
|
||
>
|
||
<FaGraduationCap size={48} className="mx-auto text-blue-600 mb-4 sm:mb-4" />
|
||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Öğretmen</h2>
|
||
<p className="text-gray-600 text-sm sm:text-base">
|
||
Ders başlatın, öğrencilerle iletişim kurun ve katılım raporlarını görün
|
||
</p>
|
||
</motion.button>
|
||
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
onClick={() => handleRoleSelect('student')}
|
||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500"
|
||
>
|
||
<FaUserCheck size={48} className="mx-auto text-green-600 mb-4 sm:mb-4" />
|
||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Öğrenci</h2>
|
||
<p className="text-gray-600 text-sm sm:text-base">
|
||
Aktif derslere katılın, öğretmeniniz ve diğer öğrencilerle etkileşim kurun
|
||
</p>
|
||
</motion.button>
|
||
|
||
<motion.button
|
||
whileHover={{ scale: 1.05 }}
|
||
whileTap={{ scale: 0.95 }}
|
||
onClick={() => handleRoleSelect('observer')}
|
||
className="bg-white rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 md:col-span-2 lg:col-span-1"
|
||
>
|
||
<FaEye size={48} className="mx-auto text-purple-600 mb-4 sm:mb-4" />
|
||
<h2 className="text-xl sm:text-2xl font-bold text-gray-800 mb-2">Gözlemci</h2>
|
||
<p className="text-gray-600 text-sm sm:text-base">
|
||
Sınıfı gözlemleyin, eğitim sürecini takip edin (ses/video paylaşımı yok)
|
||
</p>
|
||
</motion.button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default Dashboard
|