112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
import { VideoroomLayoutDto } from '@/proxy/videoroom/models'
|
|
import React from 'react'
|
|
import { FaTimes, FaTh, FaExpand, FaDesktop, FaUsers } from 'react-icons/fa'
|
|
|
|
interface LayoutPanelProps {
|
|
layouts: VideoroomLayoutDto[]
|
|
currentLayout: VideoroomLayoutDto
|
|
onChangeLayout: (layout: VideoroomLayoutDto) => void
|
|
onClose: () => void
|
|
}
|
|
|
|
const getLayoutIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'grid':
|
|
return <FaTh size={24} />
|
|
case 'speaker':
|
|
return <FaExpand size={24} />
|
|
case 'presentation':
|
|
return <FaDesktop size={24} />
|
|
case 'sidebar':
|
|
return <FaUsers size={24} />
|
|
case 'teacher-focus':
|
|
return <FaDesktop size={24} />
|
|
default:
|
|
return <FaTh size={24} />
|
|
}
|
|
}
|
|
|
|
const LayoutPanel: React.FC<LayoutPanelProps> = ({
|
|
layouts,
|
|
currentLayout,
|
|
onChangeLayout,
|
|
onClose,
|
|
}) => {
|
|
return (
|
|
<div className="h-full bg-white flex flex-col text-gray-900">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-gray-900">Video Layout Seçin</h3>
|
|
<button onClick={onClose}>
|
|
<FaTimes className="text-gray-500" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-2">
|
|
<div className="space-y-3">
|
|
{layouts.map((layout) => (
|
|
<button
|
|
key={layout.id}
|
|
onClick={() => onChangeLayout(layout)}
|
|
className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
|
|
currentLayout.id === layout.id
|
|
? 'border-blue-500 bg-blue-50'
|
|
: 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-3 mb-2">
|
|
<div
|
|
className={`p-2 rounded-full ${
|
|
currentLayout.id === layout.id
|
|
? 'bg-blue-100 text-blue-600'
|
|
: 'bg-gray-100 text-gray-600'
|
|
}`}
|
|
>
|
|
{getLayoutIcon(layout.type)}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 text-sm">{layout.name}</h4>
|
|
<p className="text-xs text-gray-600">{layout.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Layout Preview */}
|
|
<div className="bg-gray-100 rounded p-3 h-16 flex items-center justify-center">
|
|
{layout.type === 'grid' && (
|
|
<div className="grid grid-cols-2 gap-1">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="w-4 h-3 bg-blue-300 rounded"></div>
|
|
))}
|
|
</div>
|
|
)}
|
|
{layout.type === 'sidebar' && (
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-8 h-6 bg-blue-500 rounded"></div>
|
|
<div className="grid grid-cols-3 gap-1">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="w-1 h-1 bg-blue-300 rounded"></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{layout.type === 'teacher-focus' && (
|
|
<div className="space-y-1">
|
|
<div className="w-12 h-4 bg-green-500 rounded"></div>
|
|
<div className="flex space-x-1">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="w-1 h-1 bg-blue-300 rounded"></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LayoutPanel
|