feat(ui): Repeat xd-client UI with modern adaptive features
- Integrated Tailwind CSS v4 and Shadcn UI components from xd-client - Adopted xd-client modern aesthetic (oklch, radial gradients, glassmorphism) - Combined with modern adaptive 3-tier navigation logic - Refactored all pages (Profile, Login, Settings, Messages, Schedule, Grades, Debts) - Enhanced ThemeProvider with dynamic Material You palette generation - Polished overall UX and animations Refs #3 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { GradeEntry } from '../types/api';
|
||||
import { AlertCircle, CheckCircle } from 'lucide-react';
|
||||
import { AlertCircle, CheckCircle2, ShieldAlert } from 'lucide-react';
|
||||
|
||||
export const Debts: React.FC = () => {
|
||||
const [debts, setDebts] = useState<GradeEntry[]>([]);
|
||||
@@ -21,36 +21,58 @@ export const Debts: React.FC = () => {
|
||||
fetchDebts();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка задолженностей...</div>;
|
||||
if (loading) return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
|
||||
<div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-sm font-medium">Загрузка задолженностей...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1 style={{ marginBottom: '24px' }}>Задолженности</h1>
|
||||
<div className="page-enter max-w-4xl mx-auto space-y-8">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-xl bg-destructive/10 text-destructive">
|
||||
<ShieldAlert size={24} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Задолженности</h1>
|
||||
</div>
|
||||
|
||||
{debts.length === 0 ? (
|
||||
<div className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', backgroundColor: 'var(--md-sys-color-primary-container)', color: 'var(--md-sys-color-on-primary-container)' }}>
|
||||
<CheckCircle size={24} />
|
||||
<div>У вас нет академических задолженностей. Поздравляем!</div>
|
||||
<div className="surface-card flex flex-col items-center justify-center py-16 gap-4 text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-primary/10 text-primary flex items-center justify-center mb-2">
|
||||
<CheckCircle2 size={40} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-bold">Долгов нет!</h2>
|
||||
<p className="text-muted-foreground">У вас нет академических задолженностей. Отличная работа!</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
<div className="grid gap-3">
|
||||
<div className="p-4 rounded-2xl bg-destructive/5 border border-destructive/10 text-destructive text-sm font-medium mb-2">
|
||||
Внимание! У вас обнаружено {debts.length} задолжн. Пожалуйста, закройте их в ближайшее время.
|
||||
</div>
|
||||
{debts.map((debt, idx) => (
|
||||
<div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', borderLeft: '4px solid var(--md-sys-color-error)', margin: 0 }}>
|
||||
<div style={{
|
||||
width: '48px', height: '48px', borderRadius: '24px',
|
||||
backgroundColor: 'var(--md-sys-color-error-container)',
|
||||
color: 'var(--md-sys-color-on-error-container)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<div
|
||||
key={idx}
|
||||
className="surface-card border-l-4 border-l-destructive flex items-center gap-4 p-5"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-2xl bg-destructive/10 text-destructive flex items-center justify-center shrink-0">
|
||||
<AlertCircle size={24} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500, fontSize: '16px' }}>{debt.subject}</div>
|
||||
<div style={{ fontSize: '14px', opacity: 0.7 }}>{debt.type} • {debt.semester} семестр</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-destructive opacity-80">
|
||||
Академический долг
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold truncate">{debt.subject}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{debt.type} • {debt.semester} семестр
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ color: 'var(--md-sys-color-error)', fontWeight: 500 }}>
|
||||
Долг
|
||||
<div className="px-4 py-2 rounded-xl bg-destructive/10 text-destructive font-bold text-sm border border-destructive/20 shadow-sm">
|
||||
ДОЛГ
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { Grades as GradesType } from '../types/api';
|
||||
import { BookOpen } from 'lucide-react';
|
||||
import { BookOpen, Trophy } from 'lucide-react';
|
||||
import { Badge } from '../components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export const Grades: React.FC = () => {
|
||||
const [grades, setGrades] = useState<GradesType | null>(null);
|
||||
@@ -21,51 +23,80 @@ export const Grades: React.FC = () => {
|
||||
fetchGrades();
|
||||
}, []);
|
||||
|
||||
const getMarkColor = (mark: string) => {
|
||||
mark = mark.toLowerCase();
|
||||
if (mark.includes('отлично') || mark.includes('зачтено')) return 'var(--md-sys-color-primary)';
|
||||
if (mark.includes('хорошо')) return 'var(--md-sys-color-secondary)';
|
||||
if (mark.includes('удовл')) return 'var(--md-sys-color-error)';
|
||||
return 'var(--md-sys-color-outline)';
|
||||
const getMarkStyles = (mark: string) => {
|
||||
const m = mark.toLowerCase();
|
||||
if (m.includes('отлично') || m.includes('зачтено')) {
|
||||
return "bg-primary/10 text-primary border-primary/20";
|
||||
}
|
||||
if (m.includes('хорошо')) {
|
||||
return "bg-secondary/10 text-secondary border-secondary/20";
|
||||
}
|
||||
if (m.includes('удовл')) {
|
||||
return "bg-destructive/10 text-destructive border-destructive/20";
|
||||
}
|
||||
return "bg-muted text-muted-foreground border-transparent";
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка успеваемости...</div>;
|
||||
if (loading) return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
|
||||
<div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-sm font-medium">Загрузка оценок...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1 style={{ marginBottom: '24px' }}>Успеваемость</h1>
|
||||
<div className="page-enter max-w-4xl mx-auto space-y-8">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-xl bg-primary/10 text-primary">
|
||||
<Trophy size={24} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Успеваемость</h1>
|
||||
</div>
|
||||
|
||||
{!grades || grades.entries.length === 0 ? (
|
||||
<div className="m3-card">Нет данных об оценках</div>
|
||||
<div className="surface-card text-center py-12 text-muted-foreground">
|
||||
Нет данных об оценках
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
<div className="grid gap-3">
|
||||
{grades.entries.map((grade, idx) => (
|
||||
<div key={idx} className="m3-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
|
||||
<div style={{
|
||||
width: '48px', height: '48px', borderRadius: '24px',
|
||||
backgroundColor: 'var(--md-sys-color-secondary-container)',
|
||||
color: 'var(--md-sys-color-on-secondary-container)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<BookOpen size={24} />
|
||||
<div
|
||||
key={idx}
|
||||
className="surface-card flex items-center gap-4 p-4 hover:bg-card/60 transition-colors"
|
||||
>
|
||||
<div className="hidden sm:flex w-12 h-12 rounded-2xl bg-secondary/10 text-secondary items-center justify-center shrink-0">
|
||||
<BookOpen size={22} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500, fontSize: '16px' }}>{grade.subject}</div>
|
||||
<div style={{ fontSize: '14px', opacity: 0.7 }}>{grade.type} • {grade.semester} семестр</div>
|
||||
{grade.teacher && <div style={{ fontSize: '12px', opacity: 0.6 }}>{grade.teacher}</div>}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-primary opacity-80">
|
||||
{grade.type}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">•</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground uppercase">
|
||||
Семестр {grade.semester}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold truncate">
|
||||
{grade.subject}
|
||||
</h3>
|
||||
{grade.teacher && (
|
||||
<p className="text-xs text-muted-foreground mt-1 truncate">
|
||||
{grade.teacher}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div style={{
|
||||
padding: '8px 16px',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'var(--md-sys-color-surface-variant)',
|
||||
color: getMarkColor(grade.mark),
|
||||
fontWeight: 'bold',
|
||||
fontSize: '14px',
|
||||
border: `1px solid ${getMarkColor(grade.mark)}`
|
||||
}}>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"h-10 px-4 text-sm font-bold rounded-xl border shrink-0 min-w-[100px] flex justify-center shadow-sm",
|
||||
getMarkStyles(grade.mark)
|
||||
)}
|
||||
>
|
||||
{grade.mark}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,8 @@ import { useStore } from '../store/useStore';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import { TextField } from '../components/TextField';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { LogIn } from 'lucide-react';
|
||||
|
||||
export const Login: React.FC = () => {
|
||||
const { apiDomain, apiKey, isMockMode, setApiDomain, setApiKey, setMockMode } = useStore();
|
||||
@@ -55,65 +57,75 @@ export const Login: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '400px', margin: '100px auto', padding: '24px' }}>
|
||||
<h1 style={{ marginBottom: '32px', textAlign: 'center', fontWeight: 400 }}>Bonch Client</h1>
|
||||
<form onSubmit={handleLogin} noValidate>
|
||||
<TextField
|
||||
label="API Домен"
|
||||
value={apiDomain}
|
||||
onChange={(e) => setApiDomain(e.target.value)}
|
||||
disabled={isMockMode}
|
||||
required={!isMockMode}
|
||||
error={domainError}
|
||||
supportingText="Например: http://localhost:3000"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
type="password"
|
||||
label="API Ключ"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
disabled={isMockMode}
|
||||
required={!isMockMode}
|
||||
error={keyError}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '12px', padding: '0 4px' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mockMode"
|
||||
checked={isMockMode}
|
||||
onChange={(e) => {
|
||||
setMockMode(e.target.checked);
|
||||
setDomainError('');
|
||||
setKeyError('');
|
||||
}}
|
||||
style={{ width: '18px', height: '18px', cursor: 'pointer' }}
|
||||
/>
|
||||
<label htmlFor="mockMode" style={{ fontSize: '14px', cursor: 'pointer', userSelect: 'none' }}>
|
||||
Режим отладки (UI Only)
|
||||
</label>
|
||||
<div className="flex items-center justify-center min-h-[80vh] px-4">
|
||||
<div className="surface-card w-full max-w-md p-8 md:p-10 space-y-8">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="inline-flex items-center justify-center p-3 rounded-2xl bg-primary/10 text-primary mb-2">
|
||||
<LogIn size={32} />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Вход в кабинет</h1>
|
||||
<p className="text-muted-foreground text-sm">Введите данные для доступа к API</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p style={{ color: 'var(--md-sys-color-error)', marginBottom: '16px', fontSize: '14px' }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="m3-button m3-button-filled"
|
||||
style={{ width: '100%', height: '48px', marginBottom: '16px' }}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Подключение...' : 'Войти'}
|
||||
</button>
|
||||
<form onSubmit={handleLogin} noValidate className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<TextField
|
||||
label="API Домен"
|
||||
value={apiDomain}
|
||||
onChange={(e) => setApiDomain(e.target.value)}
|
||||
disabled={isMockMode}
|
||||
required={!isMockMode}
|
||||
error={domainError}
|
||||
supportingText="Например: http://localhost:3000"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
type="password"
|
||||
label="API Ключ"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
disabled={isMockMode}
|
||||
required={!isMockMode}
|
||||
error={keyError}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 px-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mockMode"
|
||||
className="h-4 w-4 rounded border-white/10 bg-white/5 text-primary focus:ring-primary/20"
|
||||
checked={isMockMode}
|
||||
onChange={(e) => {
|
||||
setMockMode(e.target.checked);
|
||||
setDomainError('');
|
||||
setKeyError('');
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="mockMode" className="text-sm font-medium cursor-pointer select-none">
|
||||
Режим отладки (Mock Mode)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p style={{ fontSize: '12px', opacity: 0.6, textAlign: 'center' }}>
|
||||
* обязательное поле
|
||||
</p>
|
||||
</form>
|
||||
{error && (
|
||||
<div className="p-3 rounded-xl bg-destructive/10 text-destructive text-sm font-medium border border-destructive/20">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 text-base font-semibold"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Подключение...' : 'Войти'}
|
||||
</Button>
|
||||
|
||||
<p className="text-[11px] text-muted-foreground text-center">
|
||||
* обязательное поле. Все данные сохраняются локально.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { MessageListItem } from '../types/api';
|
||||
import { Mail, Send, Paperclip, ChevronRight } from 'lucide-react';
|
||||
import { Mail, Send, Paperclip, ChevronRight, Inbox, MessageSquareText } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Badge } from '../components/ui/badge';
|
||||
|
||||
export const Messages: React.FC = () => {
|
||||
const [messages, setMessages] = useState<MessageListItem[]>([]);
|
||||
@@ -24,63 +26,87 @@ export const Messages: React.FC = () => {
|
||||
}, [type]);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '24px' }}>
|
||||
<h1>Сообщения</h1>
|
||||
<div className="m3-button-row" style={{ display: 'flex', gap: '8px' }}>
|
||||
<div className="page-enter max-w-4xl mx-auto space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-xl bg-primary/10 text-primary">
|
||||
<MessageSquareText size={24} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Сообщения</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex p-1 rounded-2xl bg-muted/30 border border-white/5 w-fit">
|
||||
<button
|
||||
className={`m3-button ${type === 'in' ? 'm3-button-filled' : 'm3-button-tonal'}`}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
|
||||
type === 'in' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setType('in')}
|
||||
>
|
||||
<Mail size={18} style={{ marginRight: '8px' }} />
|
||||
<Inbox size={16} />
|
||||
Входящие
|
||||
</button>
|
||||
<button
|
||||
className={`m3-button ${type === 'out' ? 'm3-button-filled' : 'm3-button-tonal'}`}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all",
|
||||
type === 'out' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setType('out')}
|
||||
>
|
||||
<Send size={18} style={{ marginRight: '8px' }} />
|
||||
<Send size={16} />
|
||||
Исходящие
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>Загрузка сообщений...</div>
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
|
||||
<div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-sm font-medium">Загрузка сообщений...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="message-list" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
<div className="space-y-3">
|
||||
{messages.length === 0 ? (
|
||||
<div className="m3-card" style={{ textAlign: 'center', padding: '40px' }}>
|
||||
Нет сообщений
|
||||
<div className="surface-card flex flex-col items-center justify-center py-20 text-muted-foreground gap-3">
|
||||
<Mail size={40} className="opacity-20" />
|
||||
<p className="text-sm">Нет сообщений в данной категории</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((msg) => (
|
||||
<div key={msg.id} className="m3-card message-item" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '16px', margin: 0 }}>
|
||||
<div className="message-icon" style={{
|
||||
width: '40px', height: '40px', borderRadius: '20px',
|
||||
backgroundColor: 'var(--md-sys-color-primary-container)',
|
||||
color: 'var(--md-sys-color-on-primary-container)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{type === 'in' ? <Mail size={20} /> : <Send size={20} />}
|
||||
<div
|
||||
key={msg.id}
|
||||
className="surface-card group hover:bg-card/60 cursor-pointer flex items-center gap-4 p-4"
|
||||
>
|
||||
<div className="hidden sm:flex w-12 h-12 rounded-2xl bg-primary/10 text-primary items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
|
||||
{type === 'in' ? <Mail size={22} /> : <Send size={22} />}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
|
||||
<span style={{ fontWeight: 500, fontSize: '14px' }}>{msg.senderOrRecipient}</span>
|
||||
<span style={{ fontSize: '12px', opacity: 0.7 }}>{msg.date}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-primary truncate">
|
||||
{msg.senderOrRecipient}
|
||||
</span>
|
||||
<span className="text-[11px] text-muted-foreground whitespace-nowrap">
|
||||
{msg.date}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontWeight: 500, fontSize: '16px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
<h3 className="text-base font-semibold truncate group-hover:text-primary transition-colors">
|
||||
{msg.subject}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
{msg.hasFiles && (
|
||||
<Badge variant="secondary" className="h-5 text-[10px] px-2 bg-primary/5 text-primary border-primary/10">
|
||||
<Paperclip size={10} className="mr-1" />
|
||||
Вложения
|
||||
</Badge>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground truncate opacity-60">
|
||||
Нажмите, чтобы прочитать полностью...
|
||||
</span>
|
||||
</div>
|
||||
{msg.hasFiles && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginTop: '4px', color: 'var(--md-sys-color-primary)', fontSize: '12px' }}>
|
||||
<Paperclip size={14} />
|
||||
Есть вложения
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight size={20} style={{ opacity: 0.5, flexShrink: 0 }} />
|
||||
<div className="w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
|
||||
<ChevronRight size={18} />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
@@ -2,8 +2,47 @@ import React, { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { Profile as ProfileType } from '../types/api';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import { User, Mail, GraduationCap, Users, Calendar, MessageSquare, Settings, Smartphone } from 'lucide-react';
|
||||
import {
|
||||
UserRound,
|
||||
Mail,
|
||||
School,
|
||||
Users,
|
||||
CalendarDays,
|
||||
GraduationCap,
|
||||
MessageSquareText,
|
||||
Settings2,
|
||||
Smartphone,
|
||||
BadgeCheck,
|
||||
Phone
|
||||
} from 'lucide-react';
|
||||
import { useStore } from '../store/useStore';
|
||||
import { Avatar, AvatarFallback } from '../components/ui/avatar';
|
||||
import { Badge } from '../components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function InfoItem({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ElementType;
|
||||
label: string;
|
||||
value?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="surface-card-muted flex items-start gap-3 rounded-xl p-3">
|
||||
<div className="bg-muted text-muted-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-muted-foreground text-[10px] font-semibold uppercase tracking-wider">{label}</p>
|
||||
<p className={cn("mt-0.5 text-sm font-medium", !value && "text-muted-foreground")}>
|
||||
{value || "Не указано"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const Profile: React.FC = () => {
|
||||
const [profileData, setProfileData] = useState<ProfileType | null>(null);
|
||||
@@ -31,96 +70,117 @@ export const Profile: React.FC = () => {
|
||||
fetchProfile();
|
||||
}, [navigate, setProfile]);
|
||||
|
||||
if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Загрузка профиля...</div>;
|
||||
const getInitials = (name: string) => {
|
||||
return name.split(' ').filter(Boolean).slice(0, 2).map(n => n[0]).join('').toUpperCase();
|
||||
};
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center min-h-[50vh]">Загрузка профиля...</div>;
|
||||
|
||||
if (error) return (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: 'var(--md-sys-color-error)' }}>
|
||||
{error}
|
||||
<br />
|
||||
<button onClick={() => navigate('/login')} className="m3-button m3-button-tonal" style={{ marginTop: '16px' }}>
|
||||
<div className="text-center p-8">
|
||||
<p className="text-destructive mb-4">{error}</p>
|
||||
<button onClick={() => navigate('/login')} className="m3-button m3-button-tonal">
|
||||
Вернуться к входу
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<div style={{ marginBottom: '32px' }}>
|
||||
<h1 style={{ fontWeight: 400 }}>Профиль</h1>
|
||||
<div className="page-enter max-w-5xl mx-auto space-y-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Профиль</h1>
|
||||
</div>
|
||||
|
||||
{profileData && (
|
||||
<div className="profile-content">
|
||||
<section style={{ marginBottom: '24px' }}>
|
||||
<h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
|
||||
ЛИЧНЫЕ ДАННЫЕ
|
||||
</h2>
|
||||
<div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<User size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7 }}>ФИО</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.fullName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<Users size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7 }}>Группа</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.group || '—'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<GraduationCap size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7 }}>Факультет</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.faculty || '—'}</div>
|
||||
<>
|
||||
<section className="surface-hero p-6 md:p-8">
|
||||
<div className="flex flex-wrap items-start gap-6">
|
||||
<Avatar className="h-24 w-24 border-4 border-white/10 shadow-sm">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-2xl font-bold">
|
||||
{getInitials(profileData.fullName)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="min-w-0 flex-1 pt-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight mb-1">
|
||||
{profileData.fullName}
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
{profileData.group ? `Группа ${profileData.group}` : "Группа не указана"}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-2">
|
||||
{profileData.faculty && (
|
||||
<Badge variant="secondary" className="px-3 py-1 text-xs">
|
||||
<School className="mr-2 h-3.5 w-3.5" />
|
||||
{profileData.faculty}
|
||||
</Badge>
|
||||
)}
|
||||
{profileData.studentId && (
|
||||
<Badge variant="outline" className="px-3 py-1 text-xs bg-white/5 border-white/10">
|
||||
<BadgeCheck className="mr-2 h-3.5 w-3.5" />
|
||||
ID {profileData.studentId}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ marginBottom: '24px' }}>
|
||||
<h2 style={{ fontSize: '14px', color: 'var(--md-sys-color-primary)', marginBottom: '16px', fontWeight: 500, letterSpacing: '0.1px' }}>
|
||||
КОНТАКТЫ
|
||||
</h2>
|
||||
<div className="m3-card" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '24px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<Mail size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 500 }}>{profileData.email || '—'}</div>
|
||||
</div>
|
||||
<section className="grid gap-6 md:grid-cols-2">
|
||||
<article className="surface-card space-y-4">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<Smartphone className="h-5 w-5 text-primary" />
|
||||
Контакты
|
||||
</h2>
|
||||
<div className="grid gap-3">
|
||||
<InfoItem icon={Mail} label="Email" value={profileData.email} />
|
||||
<InfoItem icon={Phone} label="Телефон" value="—" />
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<Smartphone size={24} style={{ color: 'var(--md-sys-color-primary)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7 }}>Телефон</div>
|
||||
<div style={{ fontSize: '16px', fontWeight: 500 }}>—</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="surface-card space-y-4">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<GraduationCap className="h-5 w-5 text-primary" />
|
||||
Учебная информация
|
||||
</h2>
|
||||
<div className="grid gap-3">
|
||||
<InfoItem icon={UserRound} label="ID студента" value={profileData.studentId} />
|
||||
<InfoItem icon={Users} label="Группа" value={profileData.group} />
|
||||
<InfoItem icon={School} label="Факультет" value={profileData.faculty} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: '32px' }}>
|
||||
<h2 style={{ fontSize: '18px', marginBottom: '16px', fontWeight: 400 }}>Быстрый доступ</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '16px' }}>
|
||||
<Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
|
||||
<Calendar size={28} />
|
||||
Расписание
|
||||
<div className="pt-4">
|
||||
<h2 className="text-xl font-bold mb-6">Быстрый доступ</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<Link to="/schedule" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
|
||||
<div className="p-3 rounded-2xl bg-primary/10 text-primary">
|
||||
<CalendarDays size={28} />
|
||||
</div>
|
||||
<span className="font-semibold text-sm">Расписание</span>
|
||||
</Link>
|
||||
<Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
|
||||
<GraduationCap size={28} />
|
||||
Успеваемость
|
||||
<Link to="/grades" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
|
||||
<div className="p-3 rounded-2xl bg-primary/10 text-primary">
|
||||
<GraduationCap size={28} />
|
||||
</div>
|
||||
<span className="font-semibold text-sm">Оценки</span>
|
||||
</Link>
|
||||
<Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
|
||||
<MessageSquare size={28} />
|
||||
Сообщения
|
||||
<Link to="/messages" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
|
||||
<div className="p-3 rounded-2xl bg-primary/10 text-primary relative">
|
||||
<MessageSquareText size={28} />
|
||||
<span className="m3-badge">3</span>
|
||||
</div>
|
||||
<span className="font-semibold text-sm">Сообщения</span>
|
||||
</Link>
|
||||
<Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: '100px', flexDirection: 'column', gap: '12px', borderRadius: '16px' }}>
|
||||
<Settings size={28} />
|
||||
Настройки
|
||||
<Link to="/settings" className="surface-card hover:bg-card/60 flex flex-col items-center justify-center gap-3 h-32 p-0 border-transparent hover:border-primary/20 transition-all">
|
||||
<div className="p-3 rounded-2xl bg-primary/10 text-primary">
|
||||
<Settings2 size={28} />
|
||||
</div>
|
||||
<span className="font-semibold text-sm">Настройки</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { Schedule as ScheduleType } from '../types/api';
|
||||
import { Clock, User, MapPin } from 'lucide-react';
|
||||
import { Clock, User, MapPin, CalendarDays } from 'lucide-react';
|
||||
|
||||
export const Schedule: React.FC = () => {
|
||||
const [schedule, setSchedule] = useState<ScheduleType | null>(null);
|
||||
@@ -21,59 +21,83 @@ export const Schedule: React.FC = () => {
|
||||
fetchSchedule();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div style={{ textAlign: 'center', padding: '40px' }}>Загрузка расписания...</div>;
|
||||
if (loading) return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground gap-4">
|
||||
<div className="w-8 h-8 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
|
||||
<p className="text-sm font-medium">Загрузка расписания...</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h1 style={{ marginBottom: '24px' }}>Расписание</h1>
|
||||
<div className="page-enter max-w-4xl mx-auto space-y-8">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-xl bg-primary/10 text-primary">
|
||||
<CalendarDays size={24} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Расписание</h1>
|
||||
</div>
|
||||
|
||||
{!schedule || schedule.days.length === 0 ? (
|
||||
<div className="m3-card">Нет данных о расписании</div>
|
||||
<div className="surface-card text-center py-12 text-muted-foreground">
|
||||
Нет данных о расписании
|
||||
</div>
|
||||
) : (
|
||||
schedule.days.map((day, idx) => (
|
||||
<div key={idx} style={{ marginBottom: '32px' }}>
|
||||
<h2 style={{ fontSize: '16px', fontWeight: 500, color: 'var(--md-sys-color-primary)', marginBottom: '16px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
|
||||
{day.date}
|
||||
</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{day.lessons.map((lesson, lIdx) => (
|
||||
<div key={lIdx} className="m3-card" style={{ margin: 0 }}>
|
||||
<div style={{ display: 'flex', gap: '16px' }}>
|
||||
<div style={{ minWidth: '100px', borderRight: '1px solid var(--md-sys-color-outline-variant)', paddingRight: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontWeight: 500 }}>
|
||||
<div className="space-y-10">
|
||||
{schedule.days.map((day, idx) => (
|
||||
<section key={idx} className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-px flex-1 bg-white/5" />
|
||||
<h2 className="text-[11px] font-bold text-primary uppercase tracking-[0.2em]">
|
||||
{day.date}
|
||||
</h2>
|
||||
<div className="h-px flex-1 bg-white/5" />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{day.lessons.map((lesson, lIdx) => (
|
||||
<div
|
||||
key={lIdx}
|
||||
className="surface-card flex flex-col sm:flex-row gap-4 sm:items-center p-5 hover:bg-card/60 transition-colors"
|
||||
>
|
||||
<div className="flex sm:flex-col items-center sm:items-start gap-3 sm:gap-1 sm:min-w-[110px] border-b sm:border-b-0 sm:border-r border-white/5 pb-3 sm:pb-0 sm:pr-4">
|
||||
<div className="flex items-center gap-2 text-primary font-bold">
|
||||
<Clock size={16} />
|
||||
{lesson.time.split(' - ')[0]}
|
||||
<span className="text-base">{lesson.time.split(' - ')[0]}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', opacity: 0.7, marginTop: '4px' }}>
|
||||
<div className="text-xs text-muted-foreground font-medium sm:ml-6">
|
||||
{lesson.time.split(' - ')[1]}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500, fontSize: '16px', marginBottom: '4px' }}>{lesson.subject}</div>
|
||||
<div style={{ fontSize: '14px', color: 'var(--md-sys-color-secondary)', marginBottom: '8px' }}>
|
||||
{lesson.type}
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-primary uppercase tracking-wider mb-1">
|
||||
{lesson.type || 'Занятие'}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold leading-tight">{lesson.subject}</h3>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', fontSize: '13px', opacity: 0.8 }}>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{lesson.teacher && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<User size={14} />
|
||||
<div className="flex items-center gap-2 text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-lg border border-white/5">
|
||||
<User size={14} className="text-primary/60" />
|
||||
{lesson.teacher}
|
||||
</div>
|
||||
)}
|
||||
{lesson.room && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<MapPin size={14} />
|
||||
Ауд. {lesson.room}
|
||||
<div className="flex items-center gap-2 text-xs font-medium text-muted-foreground bg-muted/30 px-3 py-1.5 rounded-lg border border-white/5">
|
||||
<MapPin size={14} className="text-primary/60" />
|
||||
Аудитория {lesson.room}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useStore } from '../store/useStore';
|
||||
import { Palette, Moon, Sun, Monitor, LogOut } from 'lucide-react';
|
||||
import { Palette, Moon, Sun, Monitor, LogOut, Settings2 } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { TextField } from '../components/TextField';
|
||||
import { Button } from '../components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const presetColors = [
|
||||
{ name: 'Blue', value: '#0061a4' },
|
||||
{ name: 'Red', value: '#ba1a1a' },
|
||||
{ name: 'Green', value: '#006d3a' },
|
||||
{ name: 'Purple', value: '#7c4dff' },
|
||||
{ name: 'Orange', value: '#8b5000' },
|
||||
{ name: 'Синий', value: '#0061a4' },
|
||||
{ name: 'Красный', value: '#ba1a1a' },
|
||||
{ name: 'Зеленый', value: '#006d3a' },
|
||||
{ name: 'Фиолетовый', value: '#7c4dff' },
|
||||
{ name: 'Оранжевый', value: '#8b5000' },
|
||||
];
|
||||
|
||||
export const Settings: React.FC = () => {
|
||||
@@ -30,127 +32,120 @@ export const Settings: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
|
||||
<h1 style={{ marginBottom: '32px' }}>Настройки</h1>
|
||||
|
||||
<section style={{ marginBottom: '40px' }}>
|
||||
<h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center', fontWeight: 500 }}>
|
||||
<Monitor size={20} style={{ marginRight: '12px' }} />
|
||||
Тема оформления
|
||||
</h2>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
|
||||
<button
|
||||
onClick={() => setTheme('light')}
|
||||
className={`m3-button m3-button-tonal ${theme === 'light' ? 'active' : ''}`}
|
||||
style={{
|
||||
border: theme === 'light' ? '2px solid var(--md-sys-color-primary)' : 'none',
|
||||
height: '56px'
|
||||
}}
|
||||
>
|
||||
<Sun size={18} style={{ marginRight: '8px' }} />
|
||||
Светлая
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme('dark')}
|
||||
className={`m3-button m3-button-tonal ${theme === 'dark' ? 'active' : ''}`}
|
||||
style={{
|
||||
border: theme === 'dark' ? '2px solid var(--md-sys-color-primary)' : 'none',
|
||||
height: '56px'
|
||||
}}
|
||||
>
|
||||
<Moon size={18} style={{ marginRight: '8px' }} />
|
||||
Тёмная
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setTheme('system')}
|
||||
className={`m3-button m3-button-tonal ${theme === 'system' ? 'active' : ''}`}
|
||||
style={{
|
||||
border: theme === 'system' ? '2px solid var(--md-sys-color-primary)' : 'none',
|
||||
height: '56px'
|
||||
}}
|
||||
>
|
||||
<Monitor size={18} style={{ marginRight: '8px' }} />
|
||||
Системная
|
||||
</button>
|
||||
<div className="page-enter max-w-3xl mx-auto space-y-8">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-xl bg-primary/10 text-primary">
|
||||
<Settings2 size={24} />
|
||||
</div>
|
||||
</section>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Настройки</h1>
|
||||
</div>
|
||||
|
||||
<section style={{ marginBottom: '40px' }}>
|
||||
<h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center', fontWeight: 500 }}>
|
||||
<Palette size={20} style={{ marginRight: '12px' }} />
|
||||
Акцентный цвет (Dynamic Color)
|
||||
</h2>
|
||||
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '24px' }}>
|
||||
{presetColors.map((c) => (
|
||||
<section className="surface-card space-y-6">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<Monitor size={20} className="text-primary" />
|
||||
Тема оформления
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">Выберите удобный режим отображения</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{[
|
||||
{ id: 'light', label: 'Светлая', icon: Sun },
|
||||
{ id: 'dark', label: 'Тёмная', icon: Moon },
|
||||
{ id: 'system', label: 'Системная', icon: Monitor },
|
||||
].map((item) => (
|
||||
<button
|
||||
key={c.value}
|
||||
onClick={() => handleColorChange(c.value)}
|
||||
style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '24px',
|
||||
backgroundColor: c.value,
|
||||
border: seedColor.toLowerCase() === c.value.toLowerCase() ? '4px solid var(--md-sys-color-on-surface)' : 'none',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s',
|
||||
}}
|
||||
title={c.name}
|
||||
/>
|
||||
key={item.id}
|
||||
onClick={() => setTheme(item.id as any)}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-3 h-14 rounded-2xl border-2 transition-all",
|
||||
theme === item.id
|
||||
? "bg-primary/10 border-primary text-primary font-semibold shadow-sm"
|
||||
: "bg-muted/30 border-transparent text-muted-foreground hover:bg-muted/50"
|
||||
)}
|
||||
>
|
||||
<item.icon size={18} />
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
<div style={{ position: 'relative', width: '48px', height: '48px' }}>
|
||||
<input
|
||||
type="color"
|
||||
value={seedColor}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="surface-card space-y-6">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-lg font-bold flex items-center gap-2">
|
||||
<Palette size={20} className="text-primary" />
|
||||
Акцентный цвет
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-sm">Персонализируйте интерфейс под свой вкус</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{presetColors.map((c) => (
|
||||
<button
|
||||
key={c.value}
|
||||
onClick={() => handleColorChange(c.value)}
|
||||
className={cn(
|
||||
"group relative w-12 h-12 rounded-full transition-transform active:scale-95",
|
||||
seedColor.toLowerCase() === c.value.toLowerCase() && "ring-4 ring-offset-4 ring-offset-background ring-primary"
|
||||
)}
|
||||
style={{ backgroundColor: c.value }}
|
||||
title={c.name}
|
||||
>
|
||||
{seedColor.toLowerCase() === c.value.toLowerCase() && (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-white">
|
||||
<div className="w-2 h-2 rounded-full bg-white shadow-sm" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div className="relative w-12 h-12 rounded-full overflow-hidden border-2 border-dashed border-muted-foreground/30 hover:border-primary/50 transition-colors">
|
||||
<input
|
||||
type="color"
|
||||
value={seedColor}
|
||||
onChange={(e) => handleColorChange(e.target.value)}
|
||||
className="absolute inset-[-50%] w-[200%] h-[200%] cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-xs">
|
||||
<TextField
|
||||
label="HEX код цвета"
|
||||
value={customColor}
|
||||
onChange={(e) => handleColorChange(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: 'none',
|
||||
padding: 0,
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
placeholder="#0061A4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TextField
|
||||
label="HEX код цвета"
|
||||
value={customColor}
|
||||
onChange={(e) => handleColorChange(e.target.value)}
|
||||
placeholder="#0061A4"
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: '16px', padding: '16px', borderRadius: '12px', backgroundColor: 'var(--md-sys-color-surface-variant)' }}>
|
||||
<div style={{ fontSize: '14px', marginBottom: '12px', fontWeight: 500 }}>Превью палитры:</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{['primary', 'primary-container', 'secondary', 'secondary-container', 'tertiary', 'tertiary-container'].map(role => (
|
||||
<div
|
||||
key={role}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: '40px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: `var(--md-sys-color-${role})`,
|
||||
border: '1px solid var(--md-sys-color-outline-variant)'
|
||||
}}
|
||||
title={role}
|
||||
/>
|
||||
))}
|
||||
<div className="p-4 rounded-2xl bg-muted/30 border border-white/5 space-y-3">
|
||||
<div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Превью системы Material You</div>
|
||||
<div className="flex gap-2 h-10">
|
||||
{['primary', 'primary-container', 'secondary', 'secondary-container', 'tertiary', 'tertiary-container'].map(role => (
|
||||
<div
|
||||
key={role}
|
||||
className="flex-1 rounded-lg border border-white/5 shadow-sm"
|
||||
style={{ backgroundColor: `var(--md-sys-color-${role})` }}
|
||||
title={role}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style={{ marginTop: '48px', borderTop: '1px solid var(--md-sys-color-outline-variant)', paddingTop: '24px' }}>
|
||||
<button
|
||||
<section className="pt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleLogout}
|
||||
className="m3-button m3-button-tonal"
|
||||
style={{ color: 'var(--md-sys-color-error)', width: '100%', height: '48px' }}
|
||||
className="w-full h-14 rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive hover:border-destructive/20 border-white/10 bg-white/5"
|
||||
>
|
||||
<LogOut size={18} style={{ marginRight: '12px' }} />
|
||||
Выйти из системы
|
||||
</button>
|
||||
<LogOut size={18} className="mr-3" />
|
||||
Выйти из аккаунта
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user