438 lines
10 KiB
Text
438 lines
10 KiB
Text
---
|
||
import AuthLockBlock from '@components/base/AuthLockBlock.astro';
|
||
|
||
interface Props {
|
||
postId: string;
|
||
isAuthorized?: boolean;
|
||
}
|
||
|
||
const { postId, isAuthorized = false } = Astro.props;
|
||
---
|
||
|
||
<section class="comment-section" data-post-id={postId}>
|
||
<h3 class="comment-title">Комментарии</h3>
|
||
|
||
{isAuthorized ? (
|
||
<form class="comment-form" id="comment-form" data-post-id={postId}>
|
||
<div class="form-group">
|
||
<label for="comment-text" class="form-label">Ваш комментарий *</label>
|
||
<textarea
|
||
id="comment-text"
|
||
name="comment"
|
||
class="form-textarea"
|
||
placeholder="Напишите ваш комментарий..."
|
||
rows="4"
|
||
required
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="submit-btn">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="btn-icon">
|
||
<path d="m22 2-7 20-4-9-9-4Z"></path>
|
||
<path d="M22 2 11 13"></path>
|
||
</svg>
|
||
Отправить комментарий
|
||
</button>
|
||
</div>
|
||
</form>
|
||
) : (
|
||
<AuthLockBlock
|
||
title="Авторизуйтесь, чтобы оставить комментарий"
|
||
description=""
|
||
buttonText="Войти в кабинет"
|
||
buttonHref="/auth/sign-in"
|
||
/>
|
||
)}
|
||
|
||
<!-- Список комментариев -->
|
||
<div class="comments-list" id="comments-list">
|
||
<!-- Пример комментарителя (заглушка для демонстрации) -->
|
||
<div class="comment-item">
|
||
<div class="comment-header">
|
||
<div class="comment-author">
|
||
<div class="author-avatar">А</div>
|
||
<div class="author-info">
|
||
<span class="author-name">Алексей Петров</span>
|
||
<span class="comment-date">2 апреля 2024</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-content">
|
||
<p>Спасибо за полезную статью! Столкнулся с похожей ситуацией, теперь знаю куда обращаться за помощью.</p>
|
||
</div>
|
||
<button class="comment-reply-btn">Ответить</button>
|
||
|
||
<!-- Ответ на комментарий -->
|
||
<div class="comment-reply">
|
||
<div class="comment-header">
|
||
<div class="comment-author">
|
||
<div class="author-avatar reply-avatar">Ю</div>
|
||
<div class="author-info">
|
||
<span class="author-name">Юрист АВ</span>
|
||
<span class="comment-date">3 апреля 2024</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-content">
|
||
<p>Алексей, спасибо за ваш комментарий! Обращайтесь — мы всегда готовы помочь в решении автоспоров.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ещё один комментарий -->
|
||
<div class="comment-item">
|
||
<div class="comment-header">
|
||
<div class="comment-author">
|
||
<div class="author-avatar" style="background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);">М</div>
|
||
<div class="author-info">
|
||
<span class="author-name">Мария Иванова</span>
|
||
<span class="comment-date">5 апреля 2024</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment-content">
|
||
<p>Очень подробная инструкция! Подскажите, а если ДТП произошло без пострадавших, можно ли обойтись без вызова ГИБДД?</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.comment-section {
|
||
margin-top: 3rem;
|
||
padding-top: 2rem;
|
||
border-top: 2px solid #f1f5f9;
|
||
}
|
||
|
||
.comment-title {
|
||
color: #1e293b;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
margin: 0 0 1.5rem;
|
||
}
|
||
|
||
.comment-form {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.form-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.form-textarea {
|
||
padding: 1rem;
|
||
border: 2px solid #e2e8f0;
|
||
border-radius: 0.75rem;
|
||
font-size: 1rem;
|
||
font-family: inherit;
|
||
resize: vertical;
|
||
min-height: 120px;
|
||
outline: none;
|
||
background: #f8fafc;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.form-textarea:focus {
|
||
border-color: #d4af37;
|
||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
|
||
background: #ffffff;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.submit-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
||
color: #1e293b;
|
||
border: none;
|
||
padding: 0.875rem 1.75rem;
|
||
border-radius: 0.75rem;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.btn-icon {
|
||
width: 1.125rem;
|
||
height: 1.125rem;
|
||
}
|
||
|
||
.submit-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
|
||
}
|
||
|
||
/* Auth Lock Card - на всю ширину */
|
||
.comment-section :global(.auth-lock-card) {
|
||
max-width: 100% !important;
|
||
padding: 2rem 1.5rem !important;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.comment-section :global(.lock-icon-container) {
|
||
width: 3rem !important;
|
||
height: 3rem !important;
|
||
margin-bottom: 1rem !important;
|
||
}
|
||
|
||
.comment-section :global(.lock-icon) {
|
||
width: 1.25rem !important;
|
||
height: 1.25rem !important;
|
||
}
|
||
|
||
.comment-section :global(.lock-title) {
|
||
font-size: 1.1rem !important;
|
||
margin-bottom: 0.75rem !important;
|
||
}
|
||
|
||
.comment-section :global(.lock-text) {
|
||
display: none !important;
|
||
}
|
||
|
||
.comment-section :global(.auth-button) {
|
||
padding: 0.6rem 1.5rem !important;
|
||
font-size: 0.9rem !important;
|
||
}
|
||
|
||
/* Comments List */
|
||
.comments-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.comment-item {
|
||
background: #ffffff;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 0.75rem;
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.comment-header {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.comment-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.author-avatar {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
||
color: #1e293b;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.reply-avatar {
|
||
background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%) !important;
|
||
}
|
||
|
||
.author-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.author-name {
|
||
color: #1e293b;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.comment-date {
|
||
color: #94a3b8;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.comment-content {
|
||
color: #475569;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.comment-content p {
|
||
margin: 0;
|
||
}
|
||
|
||
.comment-reply-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #d4af37;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
padding: 0.5rem 0;
|
||
margin-top: 0.5rem;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.comment-reply-btn:hover {
|
||
color: #b8942e;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Ответ на комментарий */
|
||
.comment-reply {
|
||
margin-top: 1rem;
|
||
margin-left: 2rem;
|
||
padding: 1rem 1.25rem;
|
||
background: #f8fafc;
|
||
border-radius: 0.75rem;
|
||
border: 1px solid #e2e8f0;
|
||
border-left: 3px solid #d4af37;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.comment-title {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.comment-reply {
|
||
margin-left: 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.comment-form {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.comment-title {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.form-input {
|
||
padding: 0.5rem 0.65rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.form-input::placeholder {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.form-textarea {
|
||
padding: 0.5rem 0.65rem;
|
||
font-size: 0.85rem;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.form-textarea::placeholder {
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.submit-btn {
|
||
padding: 0.6rem 1rem;
|
||
font-size: 0.9rem;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.comment-reply {
|
||
margin-left: 0.5rem;
|
||
padding-left: 0.75rem;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.form-actions {
|
||
gap: 0.5rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 375px) {
|
||
.comment-form {
|
||
padding: 0.75rem;
|
||
}
|
||
|
||
.comment-title {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.form-input,
|
||
.form-textarea {
|
||
padding: 0.45rem 0.55rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.submit-btn {
|
||
padding: 0.55rem 0.85rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.comment-form {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.form-input,
|
||
.form-textarea {
|
||
padding: 0.4rem 0.5rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.submit-btn {
|
||
padding: 0.5rem 0.75rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const setupCommentForm = () => {
|
||
const form = document.getElementById('comment-form') as HTMLFormElement;
|
||
if (form) {
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const formData = new FormData(form);
|
||
const comment = formData.get('comment');
|
||
|
||
if (comment) {
|
||
console.log('Новый комментарий:', comment);
|
||
alert('Спасибо! Ваш комментарий добавлен.');
|
||
form.reset();
|
||
|
||
// Здесь можно добавить логику для добавления комментарителя в список
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
setupCommentForm();
|
||
document.addEventListener('astro:page-load', setupCommentForm);
|
||
</script>
|