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-22 19:01:09 +05:00
parent 5bb4525f63
commit d4394a7597
5 changed files with 145 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/src/components/home/Reviews.astro
View file

@ -1,21 +1,42 @@
---
import { reviewsData } from '@data/reviewsData';
import ReviewCard from '@components/reviews/ReviewCard.astro';
// Берём 6 последних отзывов
const latestReviews = [...reviewsData]
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, 6);
interface ReviewRecord {
id: string;
name: string;
surname?: string;
profession?: string;
text: string;
rating: number;
votesCount: number;
created: string;
}
// Для эффекта бесконечности клонируем элементы
const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
const POCKETBASE_URL = import.meta.env.POCKETBASE_URL || 'http://127.0.0.1:8090';
let reviews: ReviewRecord[] = [];
try {
const filter = 'status = "published"';
const response = await fetch(
`${POCKETBASE_URL}/api/collections/reviews/records?filter=${encodeURIComponent(filter)}&sort=-created&perPage=10`
);
if (response.ok) {
const data = await response.json();
reviews = data.items || [];
}
} catch (e) {
console.error('[ReviewsSlider] Error:', e);
}
const displayReviews = reviews.length >= 3
? [...reviews, ...reviews, ...reviews]
: [...reviews, ...reviews];
// Функция для получения инициала из имени
const getInitial = (name: string) => name.charAt(0).toUpperCase();
// Функция для получения цвета аватара (циклически из набора)
const colors = ['#eac26e', '#22c55e', '#3b82f6', '#ef4444', '#8b5cf6', '#f59e0b'];
const getColor = (index: number) => colors[index % colors.length];
const colors = ['bg-gradient-1', 'bg-gradient-2', 'bg-gradient-3', 'bg-gradient-4', 'bg-gradient-5', 'bg-gradient-6'];
---
<!-- КРИТИЧНО: Скрипт скрывает элементы ДО рендера -->
@ -49,25 +70,29 @@ const getColor = (index: number) => colors[index % colors.length];
<!-- Окно просмотра -->
<div id="sliderContainer" class="overflow-x-hidden scroll-smooth">
<div id="sliderTrack" class="flex gap-6 py-4 items-stretch">
{displayReviews.map((review, index) => (
{displayReviews.map((review, index) => {
const fullName = `${review.name} ${review.surname || ''}`.trim();
const colorIndex = index % 6;
return (
<div
class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] select-none animate-on-scroll"
data-animation="scale-up"
data-delay={index * 100 + 300}
class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] select-none animate-on-scroll"
data-animation="scale-up"
data-delay={index * 100 + 300}
>
<ReviewCard
name={review.name}
car={review.car}
text={review.text}
rating={review.rating}
date={review.date}
votesCount={review.votesCount || 0}
isHelpful={review.isHelpful || false}
initial={getInitial(review.name)}
color={getColor(index)}
name={fullName}
profession={review.profession || 'Клиент'}
text={review.text}
rating={review.rating}
initial={getInitial(review.name)}
color={colors[colorIndex]}
date={review.created}
reviewId={review.id}
initialLikes={review.votesCount || 0}
/>
</div>
))}
);
})}
</div>
</div>