51 lines
2.5 KiB
JavaScript
51 lines
2.5 KiB
JavaScript
import './PopularSection.css'
|
||
|
||
const MOVIES = [
|
||
{ title: 'Дети перемен', rating: '8.4', badge: 'Подписка', color: 'linear-gradient(160deg,#1a3a5c,#0d6e8c)' },
|
||
{ title: 'Чёрное солнце', rating: '9.4', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1c0a36,#4a1a7a)' },
|
||
{ title: 'Трофей', rating: '6.7', badge: 'Подписка', color: 'linear-gradient(160deg,#3d1a00,#8b4000)' },
|
||
{ title: 'Реализация', rating: '8.9', badge: 'Бесплатно', color: 'linear-gradient(160deg,#0a2e1a,#0d6e40)' },
|
||
{ title: 'Чебурашка 2', rating: '8.5', badge: 'Подписка', color: 'linear-gradient(160deg,#1a1a3d,#3d3d8c)' },
|
||
{ title: 'Склиф', rating: '7.7', badge: 'Подписка', color: 'linear-gradient(160deg,#2e0a0a,#8c1a1a)' },
|
||
{ title: 'Простая просьба', rating: '8.2', badge: 'Подписка', color: 'linear-gradient(160deg,#0a1a2e,#1a4a6e)' },
|
||
{ title: 'Рикошет', rating: '8.7', badge: 'Бесплатно', color: 'linear-gradient(160deg,#1a2e0a,#4a7a1a)' },
|
||
]
|
||
|
||
export default function PopularSection() {
|
||
return (
|
||
<section className="popular">
|
||
<div className="popular-inner">
|
||
<div className="section-header">
|
||
<h2 className="section-title">Популярно сейчас</h2>
|
||
<button className="section-arrow" aria-label="Показать все">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||
<polyline points="9 18 15 12 9 6"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div className="cards-scroll">
|
||
<div className="cards-track">
|
||
{MOVIES.map((m) => (
|
||
<div key={m.title} className="movie-card">
|
||
<div className="movie-poster" style={{ background: m.color }}>
|
||
<span className="movie-poster-text">{m.title}</span>
|
||
<div className={`movie-badge ${m.badge === 'Бесплатно' ? 'badge-free' : 'badge-sub'}`}>
|
||
{m.badge}
|
||
</div>
|
||
</div>
|
||
<div className="movie-info">
|
||
<p className="movie-title">{m.title}</p>
|
||
<div className="movie-meta">
|
||
<span className="movie-k">К</span>
|
||
<span className="movie-rating">{m.rating}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|