233 lines
8.6 KiB
TypeScript
233 lines
8.6 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { useState } from 'react'
|
|
import Layout from '../components/Layout'
|
|
import '../App.css'
|
|
|
|
interface FriendLink {
|
|
id: number
|
|
name: string
|
|
description: string
|
|
url: string
|
|
avatar?: string
|
|
category: string
|
|
}
|
|
|
|
function Friends() {
|
|
const { t } = useTranslation()
|
|
const [selectedCategory, setSelectedCategory] = useState<string>('All')
|
|
|
|
// Mock friend links data
|
|
const friendLinks: FriendLink[] = [
|
|
{
|
|
id: 1,
|
|
name: "Steam Profile",
|
|
description: "Follow my gaming journey, see what I'm playing, and connect with me on Steam",
|
|
url: "https://steamcommunity.com/profiles/76561198281616762",
|
|
category: "Admin"
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "VRChat",
|
|
description: "Join me in virtual reality! Explore worlds, hang out, and experience VR together",
|
|
url: "https://vrchat.com/home/user/usr_621802be-d8eb-4e82-bea0-97463c0d1a57",
|
|
category: "Admin"
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "GitHub",
|
|
description: "Check out my code repositories, open source projects, and development work",
|
|
url: "https://github.com/moemoequte",
|
|
category: "Admin"
|
|
}
|
|
]
|
|
|
|
const categories = [...new Set(friendLinks.map(link => link.category))]
|
|
|
|
// Filter friends based on selected category
|
|
const filteredFriends = selectedCategory === 'All'
|
|
? friendLinks
|
|
: friendLinks.filter(link => link.category === selectedCategory)
|
|
|
|
return (
|
|
<Layout currentPage="friends">
|
|
{/* Friends Page Content */}
|
|
<section className="friends-section" style={{ padding: '120px 2rem 80px', maxWidth: '1200px', margin: '0 auto' }}>
|
|
<div className="friends-header" style={{ textAlign: 'center', marginBottom: '3rem' }}>
|
|
<h1 className="section-title" style={{ fontSize: '3rem', marginBottom: '1rem' }}>
|
|
{t('friends.title')}
|
|
</h1>
|
|
<p style={{ fontSize: '1.2rem', color: 'var(--text-secondary)', maxWidth: '600px', margin: '0 auto' }}>
|
|
{t('friends.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<div className="friends-categories" style={{ display: 'flex', justifyContent: 'center', gap: '1rem', marginBottom: '3rem', flexWrap: 'wrap' }}>
|
|
<button
|
|
className={`category-btn ${selectedCategory === 'All' ? 'active' : ''}`}
|
|
onClick={() => setSelectedCategory('All')}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
border: `1px solid ${selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--border-color)'}`,
|
|
background: selectedCategory === 'All' ? 'var(--accent-color)' : 'var(--bg-card)',
|
|
color: selectedCategory === 'All' ? 'white' : 'var(--text-primary)',
|
|
borderRadius: '20px',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
>
|
|
{t('friends.allCategories')}
|
|
</button>
|
|
{categories.map(category => (
|
|
<button
|
|
key={category}
|
|
className={`category-btn ${selectedCategory === category ? 'active' : ''}`}
|
|
onClick={() => setSelectedCategory(category)}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
border: `1px solid ${selectedCategory === category ? 'var(--accent-color)' : 'var(--border-color)'}`,
|
|
background: selectedCategory === category ? 'var(--accent-color)' : 'var(--bg-card)',
|
|
color: selectedCategory === category ? 'white' : 'var(--text-primary)',
|
|
borderRadius: '20px',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Friends Grid */}
|
|
<div className="friends-grid" style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
gap: '2rem'
|
|
}}>
|
|
{filteredFriends.map(friend => (
|
|
<div key={friend.id} className="friend-card" style={{
|
|
background: 'var(--bg-card)',
|
|
border: '1px solid var(--border-color)',
|
|
borderRadius: '12px',
|
|
padding: '2rem',
|
|
transition: 'all 0.3s ease',
|
|
cursor: 'pointer'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = 'translateY(-5px)'
|
|
e.currentTarget.style.boxShadow = '0 10px 30px var(--accent-shadow)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = 'translateY(0)'
|
|
e.currentTarget.style.boxShadow = 'none'
|
|
}}
|
|
>
|
|
<div className="friend-header" style={{ display: 'flex', alignItems: 'center', marginBottom: '1rem' }}>
|
|
<div className="friend-avatar" style={{
|
|
width: '50px',
|
|
height: '50px',
|
|
background: 'var(--accent-color)',
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '1.5rem',
|
|
marginRight: '1rem',
|
|
color: 'white'
|
|
}}>
|
|
{friend.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3 style={{ margin: '0 0 0.5rem 0', color: 'var(--text-primary)' }}>{friend.name}</h3>
|
|
<span style={{
|
|
background: 'var(--accent-color)',
|
|
color: 'white',
|
|
padding: '0.25rem 0.75rem',
|
|
borderRadius: '12px',
|
|
fontSize: '0.8rem',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{friend.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem', lineHeight: '1.6' }}>
|
|
{friend.description}
|
|
</p>
|
|
<a
|
|
href={friend.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="friend-link"
|
|
style={{
|
|
display: 'inline-block',
|
|
background: 'transparent',
|
|
color: 'var(--accent-color)',
|
|
border: '2px solid var(--accent-color)',
|
|
padding: '0.75rem 1.5rem',
|
|
borderRadius: '6px',
|
|
textDecoration: 'none',
|
|
fontWeight: 'bold',
|
|
transition: 'all 0.3s ease',
|
|
width: '100%',
|
|
textAlign: 'center'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.background = 'var(--accent-color)'
|
|
e.currentTarget.style.color = 'white'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.background = 'transparent'
|
|
e.currentTarget.style.color = 'var(--accent-color)'
|
|
}}
|
|
>
|
|
{t('friends.visitSite')}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Call to Action */}
|
|
<div className="friends-cta" style={{
|
|
textAlign: 'center',
|
|
marginTop: '4rem',
|
|
padding: '3rem',
|
|
background: 'var(--bg-card)',
|
|
borderRadius: '12px',
|
|
border: '1px solid var(--border-color)'
|
|
}}>
|
|
<h2 style={{ color: 'var(--text-primary)', marginBottom: '1rem' }}>
|
|
{t('friends.wantToJoin')}
|
|
</h2>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '2rem', maxWidth: '600px', margin: '0 auto 2rem' }}>
|
|
{t('friends.joinDescription')}
|
|
</p>
|
|
<a
|
|
href="mailto:admin@cialloo.com?subject=Friend Link Request"
|
|
style={{
|
|
display: 'inline-block',
|
|
background: 'var(--accent-color)',
|
|
color: 'white',
|
|
padding: '1rem 2rem',
|
|
borderRadius: '8px',
|
|
textDecoration: 'none',
|
|
fontWeight: 'bold',
|
|
fontSize: '1.1rem',
|
|
transition: 'transform 0.3s ease'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = 'translateY(-2px)'
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = 'translateY(0)'
|
|
}}
|
|
>
|
|
{t('friends.contactUs')}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default Friends |