95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
import React from 'react'
|
|
import { motion } from 'framer-motion'
|
|
import { FaEye, FaUsers, FaCrown } from 'react-icons/fa'
|
|
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'
|
|
import { Role } from '@/proxy/videoroom/models'
|
|
|
|
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.videoroom.roomList, { replace: true })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Helmet
|
|
titleTemplate="%s | Erp Platform"
|
|
title={translate('::' + 'App.Videoroom.Dashboard')}
|
|
defaultTitle="Erp Platform"
|
|
></Helmet>
|
|
<div className="flex items-center justify-center sm:mt-2 lg:mt-24 dark:bg-gray-900">
|
|
<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 dark:text-gray-300 mb-4 sm:mb-12">
|
|
{translate('::' + 'App.Videoroom.RoleSelector')}
|
|
</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 dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400"
|
|
>
|
|
<FaCrown 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 dark:text-white mb-2">
|
|
{translate('::' + 'App.Videoroom.Host')}
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
|
{translate('::' + 'App.Videoroom.HostDescription')}
|
|
</p>
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => handleRoleSelect('student')}
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-green-500 dark:hover:border-green-400"
|
|
>
|
|
<FaUsers 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 dark:text-white mb-2">
|
|
{translate('::' + 'App.Videoroom.Participant')}
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
|
{translate('::' + 'App.Videoroom.ParticipantDescription')}
|
|
</p>
|
|
</motion.button>
|
|
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => handleRoleSelect('observer')}
|
|
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 sm:p-8 hover:shadow-xl transition-all duration-300 border-2 border-transparent hover:border-purple-500 dark:hover:border-purple-400 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 dark:text-white mb-2">
|
|
{translate('::' + 'App.Videoroom.Observer')}
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-300 text-sm sm:text-base">
|
|
{translate('::' + 'App.Videoroom.ObserverDescription')}
|
|
</p>
|
|
</motion.button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Dashboard
|