redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новые правки в компоенты

Browse source
This commit is contained in:
Web-serfer 2026-04-26 18:09:40 +05:00
parent 107b7f461f
commit a14c18542e
15 changed files with 417 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

113
frontend/src/components/blog/comments/CommentLock.tsx
View file

@ -3,6 +3,8 @@ import { createSignal, onMount } from "solid-js";
export default function CommentLock() {
const [currentPath, setCurrentPath] = createSignal("/auth/sign-in");
const commentsSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`;
onMount(() => {
const path = window.location.pathname;
const hash = window.location.hash;
@ -11,51 +13,82 @@ export default function CommentLock() {
});
return (
<div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-gray-200">
<div class="flex items-center gap-3 mb-8">
<h3 class="text-2xl font-bold text-gray-900">Комментарии</h3>
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
0
</span>
</div>
<div
class="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 md:p-12 border border-gray-200 text-center"
style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);"
>
<div
class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center"
style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);"
>
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
<>
<div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-gray-200">
<div class="flex items-center justify-center gap-3 mb-8">
<span class="comment-icon" innerHTML={commentsSvg} />
<h3 class="text-2xl font-bold text-gray-900">Комментарии</h3>
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
0
</span>
</div>
<h4 class="text-xl font-semibold text-gray-900 mb-3">
Комментарии доступны только авторизованным пользователям
</h4>
<a
href={currentPath()}
class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer px-6 py-3 text-lg"
style="background: linear-gradient(to bottom, #2563eb, #1e40af); color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);"
<div
class="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 border border-gray-200 text-center"
style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);"
>
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
</svg>
Войти в аккаунт
</a>
<p class="mt-4 text-sm text-gray-600">
Нет аккаунта?{" "}
<a
href={`/auth/sign-up?redirect=${encodeURIComponent(window.location.pathname)}`}
class="font-medium hover:underline"
style="color: #2563eb;"
<div
class="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center"
style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);"
>
Зарегистрироваться
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h4 class="text-lg font-semibold text-gray-900 mb-3">
Нужна авторизация для комментариев
</h4>
<a
href={currentPath()}
class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer px-5 py-2.5 text-base"
style="background: linear-gradient(to bottom, #2563eb, #1e40af); color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);"
>
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
</svg>
Войти в аккаунт
</a>
</p>
<p class="mt-3 text-sm text-gray-600">
Нет аккаунта?{" "}
<a
href={`/auth/sign-up?redirect=${encodeURIComponent(window.location.pathname)}`}
class="font-medium hover:underline"
style="color: #2563eb;"
>
Зарегистрироваться
</a>
</p>
</div>
</div>
</div>
<style>{`
.comment-icon {
width: 1.75rem;
height: 1.75rem;
color: #2563eb;
}
.comment-icon svg {
width: 100%;
height: 100%;
}
@media (max-width: 768px) {
.max-w-4xl { max-width: 100% !important; }
.max-w-4xl .text-2xl { font-size: 1.25rem !important; }
.max-w-4xl .bg-blue-100 { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
.max-w-4xl .rounded-2xl { padding: 1.5rem 1rem !important; margin-left: 0.5rem; margin-right: 0.5rem; }
.max-w-4xl .w-16 { width: 2.5rem !important; height: 2.5rem !important; }
.max-w-4xl .w-8 { width: 1.25rem !important; height: 1.25rem !important; }
.max-w-4xl .text-lg { font-size: 0.95rem !important; margin-bottom: 0.5rem !important; }
.max-w-4xl .text-base { font-size: 0.85rem !important; padding: 0.5rem 1rem !important; }
.max-w-4xl .w-4 { width: 0.875rem !important; height: 0.875rem !important; }
.max-w-4xl .text-sm { font-size: 0.75rem !important; }
.max-w-4xl .mt-3 { margin-top: 0.75rem !important; }
.max-w-4xl .mb-5 { margin-bottom: 1rem !important; }
.max-w-4xl .mb-8 { margin-bottom: 1.5rem !important; padding-top: 1.5rem !important; }
.max-w-4xl .pt-8 { padding-top: 2rem !important; }
.comment-icon { width: 1.25rem !important; height: 1.25rem !important; }
}
`}</style>
</>
);
}

42
frontend/src/components/blog/comments/Comments.tsx
View file

@ -1,38 +1,17 @@
import { createSignal, For, Show, onMount } from "solid-js";
import CommentLock from "./CommentLock";
import CommentForm from "./CommentForm";
import type { CommentWithReplies } from "../../../types/comments";
interface CommentsProps {
postSlug: string;
}
interface ApiComment {
id: string;
post_slug: string;
user: string;
content: string;
parent?: string | null;
is_verified: boolean;
status: "pending" | "published" | "spam";
created: string;
updated: string;
expand?: {
user?: {
id: string;
firstName?: string;
name?: string;
email: string;
avatar?: string;
};
};
}
import type { CommentWithReplies, CommentRecord } from "../../../types/comments";
interface ToastMessage {
type: "success" | "error";
message: string;
}
interface CommentsProps {
postSlug: string;
}
export default function Comments(props: CommentsProps) {
const [isAuthenticated, setIsAuthenticated] = createSignal(false);
const [currentUser, setCurrentUser] = createSignal<{
@ -95,7 +74,7 @@ export default function Comments(props: CommentsProps) {
const data = await response.json();
const commentsWithReplies: CommentWithReplies[] = await Promise.all(
data.items.map(async (comment: ApiComment) => {
data.items.map(async (comment: CommentRecord) => {
const repliesResponse = await fetch(
`/api/comments?post_slug=${encodeURIComponent(props.postSlug)}&parent=${comment.id}`,
{
@ -289,6 +268,15 @@ export default function Comments(props: CommentsProps) {
return (
<>
<style>{`
@media (max-width: 768px) {
.comments-wrapper { padding: 0 0.75rem; }
.comments-wrapper h3 { font-size: 1.5rem !important; }
.comment-card { padding: 1rem !important; }
.comment-avatar { width: 40px !important; height: 40px !important; }
.reply-form { margin-left: 0 !important; padding-left: 1rem !important; }
}
`}</style>
<Show when={toast()}>
{(t) => (
<div