|
|
import { Link } from 'react-router-dom'; |
|
|
import { APPS } from '../config/apps'; |
|
|
|
|
|
const categoryEmojis: { [key: string]: string } = { |
|
|
videos: '📺', |
|
|
speechsounds: '🗣️', |
|
|
all: '🎮', |
|
|
}; |
|
|
|
|
|
const categoryColors: { [key: string]: string } = { |
|
|
videos: 'pink', |
|
|
speechsounds: 'purple', |
|
|
}; |
|
|
|
|
|
const colorMap: { [key: string]: string } = { |
|
|
pink: 'bg-pink-100 hover:bg-pink-200', |
|
|
purple: 'bg-purple-100 hover:bg-purple-200', |
|
|
blue: 'bg-blue-100 hover:bg-blue-200', |
|
|
green: 'bg-green-100 hover:bg-green-200', |
|
|
indigo: 'bg-indigo-100 hover:bg-indigo-200', |
|
|
amber: 'bg-amber-100 hover:bg-amber-200', |
|
|
}; |
|
|
|
|
|
export function LandingPage() { |
|
|
return ( |
|
|
<div className="bg-background"> |
|
|
<section className="px-4 py-8"> |
|
|
<div className="max-w-5xl mx-auto"> |
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> |
|
|
{APPS.map(app => { |
|
|
const color = categoryColors[app.id] || 'pink'; |
|
|
const emoji = categoryEmojis[app.id] || '🎮'; |
|
|
|
|
|
return ( |
|
|
<Link |
|
|
key={app.id} |
|
|
to={app.disabled ? '#' : app.link} |
|
|
className={`${colorMap[color]} w-full p-6 rounded-3xl font-semibold text-foreground transition-all active:scale-95 hover:shadow-lg flex flex-col items-center text-center ${ |
|
|
app.disabled ? 'opacity-50 cursor-not-allowed' : '' |
|
|
}`} |
|
|
onClick={(e) => { |
|
|
if (app.disabled) { |
|
|
e.preventDefault(); |
|
|
} |
|
|
}} |
|
|
> |
|
|
<div className="mb-3 text-5xl">{emoji}</div> |
|
|
<h3 className="text-xl font-bold mb-1">{app.name}</h3> |
|
|
<p className="text-sm opacity-75">{app.description}</p> |
|
|
</Link> |
|
|
); |
|
|
})} |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
|
