81 lines
1.8 KiB
JavaScript
81 lines
1.8 KiB
JavaScript
import { useNavigate } from 'react-router-dom'
|
|
import { Music, User } from 'lucide-react'
|
|
import { hapticFeedback } from '../utils/telegram'
|
|
import './Media.css'
|
|
|
|
// Иконка лисы из Icons8
|
|
const FoxIcon = ({ size = 48 }) => (
|
|
<img
|
|
src="https://img.icons8.com/windows/32/fox.png"
|
|
alt="Fox"
|
|
width={size}
|
|
height={size}
|
|
style={{ objectFit: 'contain' }}
|
|
/>
|
|
)
|
|
|
|
export default function Media({ user }) {
|
|
const navigate = useNavigate()
|
|
|
|
const categories = [
|
|
{
|
|
id: 'furry',
|
|
name: 'Furry',
|
|
icon: FoxIcon,
|
|
color: 'var(--tag-furry)',
|
|
path: '/media/furry'
|
|
},
|
|
{
|
|
id: 'anime',
|
|
name: 'Anime',
|
|
icon: User,
|
|
color: 'var(--tag-anime)',
|
|
path: '/media/anime'
|
|
},
|
|
{
|
|
id: 'music',
|
|
name: 'Music',
|
|
icon: Music,
|
|
color: '#9b59b6',
|
|
path: '/media/music'
|
|
}
|
|
]
|
|
|
|
const handleCategoryClick = (category) => {
|
|
hapticFeedback('light')
|
|
navigate(category.path)
|
|
}
|
|
|
|
return (
|
|
<div className="media-page">
|
|
<div className="media-header">
|
|
<h1>Media</h1>
|
|
</div>
|
|
|
|
<div className="media-grid">
|
|
{categories.map((category) => {
|
|
const Icon = category.icon
|
|
return (
|
|
<button
|
|
key={category.id}
|
|
className="media-card"
|
|
onClick={() => handleCategoryClick(category)}
|
|
style={{ '--category-color': category.color }}
|
|
>
|
|
<div className="media-card-icon">
|
|
{category.id === 'furry' ? (
|
|
<Icon size={48} />
|
|
) : (
|
|
<Icon size={48} strokeWidth={2} />
|
|
)}
|
|
</div>
|
|
<h2 className="media-card-title">{category.name}</h2>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|