add settings layout
This commit is contained in:
smanylov
@@ -0,0 +1,24 @@
|
||||
import PersonalDataSettings from '@/app/ui/settings/personal-data-settings'
|
||||
import NotificationsMonitoringSettings from '@/app/ui/settings/notifications-monitoring-settings';
|
||||
import SafetySetting from '@/app/ui/settings/safety-settings';
|
||||
import SubscriptionSettings from '@/app/ui/settings/subscription-settings';
|
||||
import APISettings from '@/app/ui/settings/api-settings';
|
||||
import LastActivitySettings from '@/app/ui/settings/last-activity-settings';
|
||||
import DangerZone from '@/app/ui/settings/danger-zone';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="page-title">⚙️ Настройки аккаунта</h1>
|
||||
<div className="settings-grid">
|
||||
<PersonalDataSettings />
|
||||
<NotificationsMonitoringSettings/>
|
||||
<SafetySetting/>
|
||||
<SubscriptionSettings/>
|
||||
<APISettings/>
|
||||
<LastActivitySettings/>
|
||||
</div>
|
||||
<DangerZone/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@use './header.scss';
|
||||
@use './dashboard.scss';
|
||||
@use './settings.scss';
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
@@ -26,6 +27,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid #6366f1;
|
||||
color: #6366f1;
|
||||
|
||||
&:hover {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
@@ -48,4 +70,11 @@
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -0,0 +1,281 @@
|
||||
.settings-form {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #1e293b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-bottom: 2px solid #f3f4f6;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
small {
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
|
||||
&:has(.toggle-switch) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked+.toggle-slider {
|
||||
background-color: #6366f1;
|
||||
|
||||
&::before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 24px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
background: #f9fafb;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #6366f1;
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-info {
|
||||
background: #f0fdf4;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 4px solid #10b981;
|
||||
|
||||
.subscription-info-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
p {
|
||||
color: #047857;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-info-title {
|
||||
color: #065f46;
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.subscription-info-main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.subscription-info-item {
|
||||
div {
|
||||
color: #047857;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #065f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subscription-info-footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.api-key-info {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.form-input {
|
||||
font-family: monospace;
|
||||
background: #f9fafb;
|
||||
}
|
||||
}
|
||||
|
||||
.api-key-info-wrapper {
|
||||
.btn-outline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
small {
|
||||
color: #6b7280;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.api-key-info-documentation {
|
||||
background: #f0f9ff;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
|
||||
h4 {
|
||||
color: #1e40af;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1e3a8a;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.last-activiti-wrapper {
|
||||
.no-activiti {
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
||||
border: 2px solid #ef4444;
|
||||
border-radius: 15px;
|
||||
padding: 25px;
|
||||
margin-top: 20px;
|
||||
|
||||
&-remove-account {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.btn {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
border: 2px solid #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
&-reset-settings {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fbbf24;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
|
||||
.btn {
|
||||
background: transparent;
|
||||
color: #f59e0b;
|
||||
border: 2px solid #f59e0b;
|
||||
|
||||
&:hover {
|
||||
background: #f59e0b;
|
||||
color: #fef3c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #dc2626;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #7f1d1d;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
@@ -25,7 +25,7 @@ export default function HeaderPanel() {
|
||||
<Link
|
||||
className="icon-btn"
|
||||
title="Быстрые настройки"
|
||||
href="/pages/dashboard"
|
||||
href="/pages/settings"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
|
||||
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"></path>
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function NotificationsButton() {
|
||||
<p>Нет данных</p>
|
||||
)}
|
||||
<div className="notification-footer">
|
||||
<Link href="/pages/notifications.php" className="notification-link">Посмотреть все</Link>
|
||||
<Link href="/pages/notifications" className="notification-link">Посмотреть все</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -16,7 +16,7 @@ const links = [
|
||||
},
|
||||
{
|
||||
name: 'Настройка',
|
||||
href: '/pages/page2',
|
||||
href: '/pages/settings',
|
||||
img: 'M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'
|
||||
},
|
||||
{
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function RegisterForm() {
|
||||
>
|
||||
Полное имя
|
||||
</label>
|
||||
<input type="readOnly" id="full_name" name="full_name" className={`${styles['form-input']}`} placeholder="Иванов Иван Иванович" />
|
||||
<input type="text" id="full_name" name="full_name" className={`${styles['form-input']}`} placeholder="Иванов Иван Иванович" />
|
||||
{errorMessage?.full_name && (
|
||||
<p className="text-sm text-red-500">{errorMessage!.full_name}</p>
|
||||
)}
|
||||
@@ -48,7 +48,7 @@ export default function RegisterForm() {
|
||||
>
|
||||
Компания
|
||||
</label>
|
||||
<input type="readOnly" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
|
||||
<input type="text" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
|
||||
</div>
|
||||
<div className={`${styles['form-row']}`}>
|
||||
<div className={`${styles['form-group']}`}>
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function APISettings() {
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">🔌 API настройки</h3>
|
||||
<div className="form-group">
|
||||
<label className="form-label">🔑 Ваш API ключ:</label>
|
||||
<div className="api-key-info-wrapper">
|
||||
<div className="api-key-info">
|
||||
<input readOnly className="form-input" value="testkey" id="api-key-input"></input>
|
||||
<button type="button" className="btn btn-outline">
|
||||
📋 Копировать
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
🔄 Обновить ключ
|
||||
</button>
|
||||
<small>
|
||||
⚠️ Используйте этот ключ для доступа к API. Не передавайте его третьим лицам.
|
||||
</small>
|
||||
<div className="api-key-info-documentation">
|
||||
<h4>
|
||||
📚 Документация API
|
||||
</h4>
|
||||
<p>
|
||||
Полная документация API доступна по ссылке:
|
||||
<br />
|
||||
<Link href={'api.no-copy.ru/docs'}>api.no-copy.ru/docs</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
export default function DangerZone() {
|
||||
return (
|
||||
<div className="danger-zone">
|
||||
<h3>⚠️ Опасная зона</h3>
|
||||
<div className="danger-zone-remove-account">
|
||||
<h4>
|
||||
🗑️ Удаление аккаунта
|
||||
</h4>
|
||||
<p>
|
||||
⚠️ Удаление аккаунта приведет к безвозвратной потере всех данных, включая загруженный контент, отчеты и настройки. Это действие нельзя отменить.
|
||||
</p>
|
||||
<button className="btn">🗑️ Удалить аккаунт</button>
|
||||
</div>
|
||||
<div className="danger-zone-reset-settings">
|
||||
<h4>
|
||||
🔄 Сброс всех настроек
|
||||
</h4>
|
||||
<p>
|
||||
🔧 Восстановить все настройки аккаунта к значениям по умолчанию.
|
||||
</p>
|
||||
<button className="btn">🔄 Сбросить настройки</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export default function LastActivitySettings() {
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">🕒 Последняя активность</h3>
|
||||
<div className="last-activiti-wrapper">
|
||||
<div className="no-activiti">
|
||||
📝 Пока нет записей о активности
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState, useState } from 'react';
|
||||
|
||||
export default function NotificationsMonitoringSettings() {
|
||||
const [errorMessage, formAction, isPending] = useActionState(
|
||||
(state: void | undefined, formData: FormData) => {
|
||||
console.log(formData);
|
||||
},
|
||||
undefined
|
||||
);
|
||||
|
||||
const [selectedMonitoringValue, setSelectedMonitoringValue] = useState('weekly');
|
||||
const [selectedWatermarkValue, setSelectedWatermarkValue] = useState('high');
|
||||
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">🔔 Уведомления и мониторинг</h3>
|
||||
<form action={formAction}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<span>📧 Email уведомления</span>
|
||||
<span className="toggle-switch">
|
||||
<input type="checkbox" name="notification_email" />
|
||||
<span className="toggle-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<small>Получать уведомления о нарушениях на email</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<span>📱 SMS уведомления</span>
|
||||
<span className="toggle-switch">
|
||||
<input type="checkbox" name="notification_sms" />
|
||||
<span className="toggle-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<small>Критически важные уведомления по SMS</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">
|
||||
<span>🤖 Автоматический мониторинг</span>
|
||||
<span className="toggle-switch">
|
||||
<input type="checkbox" name="auto_monitoring" />
|
||||
<span className="toggle-slider"></span>
|
||||
</span>
|
||||
</label>
|
||||
<small>Автоматическая проверка контента в интернете</small>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">⏱️ Частота мониторинга:</label>
|
||||
<select
|
||||
name="monitoring_frequency"
|
||||
className="form-input"
|
||||
value={selectedMonitoringValue}
|
||||
onChange={(e) => setSelectedMonitoringValue(e.target.value)}
|
||||
>
|
||||
<option value="daily">
|
||||
Ежедневно
|
||||
</option>
|
||||
<option value="weekly">
|
||||
Еженедельно
|
||||
</option>
|
||||
<option value="monthly">
|
||||
Ежемесячно
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">💧 Интенсивность водяного знака:</label>
|
||||
<select
|
||||
name="watermark_intensity"
|
||||
className="form-input"
|
||||
value={selectedWatermarkValue}
|
||||
onChange={(e) => setSelectedWatermarkValue(e.target.value)}
|
||||
>
|
||||
<option value="low">
|
||||
Низкая (незаметный)
|
||||
</option>
|
||||
<option value="medium">
|
||||
Средняя (рекомендуется)
|
||||
</option>
|
||||
<option value="high">
|
||||
Высокая (максимальная защита)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState, useState } from 'react'
|
||||
|
||||
export default function PersonalDataSettings() {
|
||||
const [errorMessage, formAction, isPending] = useActionState(
|
||||
(state: void | undefined, formData: FormData) => {
|
||||
console.log(formData);
|
||||
},
|
||||
undefined
|
||||
);
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState('male');
|
||||
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">👤 Персональные данные</h3>
|
||||
<form action={formAction}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Полное имя:</label>
|
||||
<input type="text" name="full_name" className="form-input" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Компания:</label>
|
||||
<input type="text" name="company" className="form-input" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Email:</label>
|
||||
<input type="text" name="email" className="form-input" />
|
||||
<small>
|
||||
Email нельзя изменить. Обратитесь в поддержку.
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Телефон:</label>
|
||||
<input type="phone" name="phone" className="form-input" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Пол:</label>
|
||||
<select
|
||||
name="gender"
|
||||
className="form-input"
|
||||
value={selectedValue}
|
||||
onChange={(e) => setSelectedValue(e.target.value)}
|
||||
>
|
||||
<option value="male">Мужской</option>
|
||||
<option value="female">Женский</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">🎂 День рождения:</label>
|
||||
<input type="date" name="birthday" className="form-input" />
|
||||
<small>
|
||||
Используется для отправки поздравления
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Возраст:</label>
|
||||
<input type="text" name="age" className="form-input" />
|
||||
<small>
|
||||
Заполняется автоматически из даты рождения
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
|
||||
</form>
|
||||
</div >
|
||||
</div >
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
'use client'
|
||||
|
||||
import { useActionState, useState } from 'react';
|
||||
|
||||
export default function SafetySetting() {
|
||||
const [errorMessage, formAction, isPending] = useActionState(
|
||||
(state: void | undefined, formData: FormData) => {
|
||||
console.log(formData);
|
||||
},
|
||||
undefined
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">🔐 Безопасность</h3>
|
||||
<form action={formAction}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">🔓 Текущий пароль:</label>
|
||||
<input type="password" name="current_password" className="form-input" />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">🔓 Новый пароль:</label>
|
||||
<input type="password" name="new_password" className="form-input" />
|
||||
<small>Минимум 6 символов</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">✅ Подтвердите пароль:</label>
|
||||
<input type="password" name="confirm_password" className="form-input" />
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary">🔐 Изменить пароль</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
export default function SubscriptionSettings() {
|
||||
return (
|
||||
<div className="settings-form">
|
||||
<div className="form-section">
|
||||
<h3 className="form-section-title">💎 Подписка</h3>
|
||||
<div className="subscription-info">
|
||||
<div className="subscription-info-header">
|
||||
<div>
|
||||
<h4 className="subscription-info-title">🎯 Подписка "ПРОФИ"</h4>
|
||||
<p>📅 Активна до 10.06.2028</p>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div className="subscription-info-title">2,000</div>
|
||||
<p>файлов в месяц</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="subscription-info-main">
|
||||
<div className="subscription-info-item">
|
||||
<div>💾 Хранилище</div>
|
||||
<span>20 ГБ</span>
|
||||
</div>
|
||||
<div className="subscription-info-item">
|
||||
<div>🔌 API доступ</div>
|
||||
<span>Включен</span>
|
||||
</div>
|
||||
<div className="subscription-info-item">
|
||||
<div>🎧 Поддержка</div>
|
||||
<span>24/7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="subscription-info-footer">
|
||||
<button className="btn btn-outline">
|
||||
🚀 СТАРТ
|
||||
</button>
|
||||
<button className="btn btn-outline">
|
||||
⭐ ПРЕМИУМ
|
||||
</button>
|
||||
<button className="btn btn-outline">
|
||||
💼 ПРОФИ
|
||||
</button>
|
||||
<button className="btn btn-outline">
|
||||
🏆 МАКСИМУМ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user