66 lines
1.5 KiB
React
66 lines
1.5 KiB
React
|
import { useNavigate } from 'react-router-dom'
|
||
|
|
import { Image, Music, Palette } from 'lucide-react'
|
||
|
|
import { hapticFeedback } from '../utils/telegram'
|
||
|
|
import './Media.css'
|
||
|
|
|
||
|
|
export default function Media({ user }) {
|
||
|
|
const navigate = useNavigate()
|
||
|
|
|
||
|
|
const categories = [
|
||
|
|
{
|
||
|
|
id: 'furry',
|
||
|
|
name: 'Furry',
|
||
|
|
icon: Image,
|
||
|
|
color: 'var(--tag-furry)',
|
||
|
|
path: '/media/furry'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'anime',
|
||
|
|
name: 'Anime',
|
||
|
|
icon: Palette,
|
||
|
|
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">
|
||
|
|
<Icon size={48} strokeWidth={2} />
|
||
|
|
</div>
|
||
|
|
<h2 className="media-card-title">{category.name}</h2>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|