37 lines
1 KiB
TypeScript
37 lines
1 KiB
TypeScript
import { useParams } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useState, useEffect } from 'react';
|
|
import LoadingSpinner from '../components/LoadingSpinner';
|
|
|
|
export default function Article() {
|
|
const { articleId } = useParams();
|
|
const { i18n } = useTranslation();
|
|
const [article, setArticle] = useState<{
|
|
content: string;
|
|
metadata: any;
|
|
} | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
// In a real application, we would fetch the article content here
|
|
// based on the articleId and current language
|
|
console.log(`Fetching article ${articleId} in ${i18n.language}`);
|
|
setLoading(false);
|
|
}, [articleId, i18n.language]);
|
|
|
|
if (loading) {
|
|
return <LoadingSpinner />;
|
|
}
|
|
|
|
if (!article) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<article className="max-w-4xl mx-auto">
|
|
<div className="prose dark:prose-invert max-w-none">
|
|
<div dangerouslySetInnerHTML={{ __html: article.content }} />
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|