95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { useSearchParams } from 'next/navigation';
|
||
import { loadComponent } from '@/lib/material-components';
|
||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||
|
||
export default function BoardPage() {
|
||
const searchParams = useSearchParams();
|
||
const boardId = searchParams.get('id');
|
||
const [componentsLoaded, setComponentsLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
Promise.all([
|
||
loadComponent('elevated-card'),
|
||
loadComponent('filled-button'),
|
||
loadComponent('icon-button'),
|
||
loadComponent('icon'),
|
||
]).then(() => {
|
||
setComponentsLoaded(true);
|
||
}).catch((err) => {
|
||
console.error('Error loading components:', err);
|
||
setComponentsLoaded(true);
|
||
});
|
||
}, []);
|
||
|
||
if (!componentsLoaded) {
|
||
return <LoadingSpinner size="large" />;
|
||
}
|
||
|
||
return (
|
||
<div style={{
|
||
height: 'calc(100vh - 180px)',
|
||
display: 'flex',
|
||
flexDirection: 'column'
|
||
}}>
|
||
<div style={{
|
||
display: 'flex',
|
||
gap: '8px',
|
||
marginBottom: '16px',
|
||
padding: '8px',
|
||
background: 'var(--md-sys-color-surface)',
|
||
borderRadius: '12px'
|
||
}}>
|
||
<md-icon-button title="Карандаш">
|
||
<md-icon>edit</md-icon>
|
||
</md-icon-button>
|
||
<md-icon-button title="Ластик">
|
||
<md-icon>auto_fix_high</md-icon>
|
||
</md-icon-button>
|
||
<md-icon-button title="Фигуры">
|
||
<md-icon>category</md-icon>
|
||
</md-icon-button>
|
||
<md-icon-button title="Текст">
|
||
<md-icon>text_fields</md-icon>
|
||
</md-icon-button>
|
||
<div style={{ flex: 1 }} />
|
||
<md-filled-button>
|
||
<md-icon slot="icon">save</md-icon>
|
||
Сохранить
|
||
</md-filled-button>
|
||
</div>
|
||
|
||
<md-elevated-card style={{
|
||
flex: 1,
|
||
borderRadius: '20px',
|
||
padding: '16px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
background: '#fff'
|
||
}}>
|
||
<div style={{ textAlign: 'center' }}>
|
||
<md-icon style={{
|
||
fontSize: '64px',
|
||
marginBottom: '16px',
|
||
color: 'var(--md-sys-color-primary)'
|
||
}}>
|
||
draw
|
||
</md-icon>
|
||
<p style={{ fontSize: '18px', color: 'var(--md-sys-color-on-surface)' }}>
|
||
Интерактивная доска {boardId ? `#${boardId}` : ''}
|
||
</p>
|
||
<p style={{
|
||
fontSize: '14px',
|
||
color: 'var(--md-sys-color-on-surface-variant)'
|
||
}}>
|
||
Canvas интеграция будет добавлена
|
||
</p>
|
||
</div>
|
||
</md-elevated-card>
|
||
</div>
|
||
);
|
||
}
|