forked from minzeyaphyo/burmddit
125 lines
4.6 KiB
TypeScript
125 lines
4.6 KiB
TypeScript
import { sql } from '@vercel/postgres'
|
|
import ArticleCard from '@/components/ArticleCard'
|
|
import TrendingSection from '@/components/TrendingSection'
|
|
import CategoryNav from '@/components/CategoryNav'
|
|
|
|
async function getRecentArticles() {
|
|
try {
|
|
const { rows } = await sql`
|
|
SELECT * FROM published_articles
|
|
ORDER BY published_at DESC
|
|
LIMIT 20
|
|
`
|
|
return rows
|
|
} catch (error) {
|
|
console.error('Error fetching articles:', error)
|
|
return []
|
|
}
|
|
}
|
|
|
|
async function getTrendingArticles() {
|
|
try {
|
|
const { rows } = await sql`SELECT * FROM get_trending_articles(10)`
|
|
return rows
|
|
} catch (error) {
|
|
console.error('Error fetching trending:', error)
|
|
return []
|
|
}
|
|
}
|
|
|
|
export default async function Home() {
|
|
const [articles, trending] = await Promise.all([
|
|
getRecentArticles(),
|
|
getTrendingArticles()
|
|
])
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Hero Section */}
|
|
<section className="mb-12 text-center">
|
|
<h1 className="text-5xl font-bold text-gray-900 mb-4 font-burmese">
|
|
Burmddit
|
|
</h1>
|
|
<p className="text-xl text-gray-600 font-burmese">
|
|
AI သတင်းများ၊ သင်ခန်းစာများနှင့် အကြံပြုချက်များ
|
|
</p>
|
|
<p className="text-lg text-gray-500 mt-2">
|
|
Daily AI News, Tutorials & Tips in Burmese
|
|
</p>
|
|
</section>
|
|
|
|
{/* Category Navigation */}
|
|
<CategoryNav />
|
|
|
|
{/* Main Content Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
|
|
{/* Main Articles (Left 2/3) */}
|
|
<div className="lg:col-span-2">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6 font-burmese">
|
|
နောက်ဆုံးရ သတင်းများ
|
|
</h2>
|
|
|
|
{articles.length === 0 ? (
|
|
<div className="text-center py-12 bg-white rounded-lg shadow">
|
|
<p className="text-gray-500 font-burmese">
|
|
သတင်းမရှိသေးပါ။ မကြာမီ ထပ်စစ်ကြည့်ပါ။
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{articles.map((article) => (
|
|
<ArticleCard key={article.id} article={article} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar (Right 1/3) */}
|
|
<aside className="space-y-8">
|
|
{/* Trending Articles */}
|
|
<TrendingSection articles={trending} />
|
|
|
|
{/* Categories Card */}
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-4 font-burmese">
|
|
အမျိုးအစားများ
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<a href="/category/ai-news" className="text-primary-600 hover:text-primary-700 font-burmese">
|
|
AI သတင်းများ
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/category/tutorials" className="text-primary-600 hover:text-primary-700 font-burmese">
|
|
သင်ခန်းစာများ
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/category/tips-tricks" className="text-primary-600 hover:text-primary-700 font-burmese">
|
|
အကြံပြုချက်များ
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/category/upcoming" className="text-primary-600 hover:text-primary-700 font-burmese">
|
|
လာမည့်အရာများ
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* About Card */}
|
|
<div className="bg-gradient-to-br from-primary-50 to-primary-100 rounded-lg shadow p-6">
|
|
<h3 className="text-lg font-bold text-gray-900 mb-3 font-burmese">
|
|
Burmddit အကြောင်း
|
|
</h3>
|
|
<p className="text-gray-700 text-sm leading-relaxed font-burmese">
|
|
Burmddit သည် AI နှင့် ပတ်သက်သော နောက်ဆုံးရ သတင်းများ၊ သင်ခန်းစာများနှင့် အကြံပြုချက်များကို မြန်မာဘာသာဖြင့် နေ့စဉ် ထုတ်ပြန်ပေးသော ပလက်ဖောင်း ဖြစ်ပါသည်။
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|