feat: init repo

src/components/UpdateDetail.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ChevronLeft } from 'lucide-react';
+import { Update } from '../utils/updates';
+
+interface UpdateDetailProps {
+  update: Update;
+  content?: string;
+}
+
+const UpdateDetail: React.FC<UpdateDetailProps> = ({ update, content }) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  
+  return (
+    <div className="max-w-4xl mx-auto px-6">
+      <button
+        onClick={() => navigate('/updates')}
+        className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-8 transition-colors"
+      >
+        <ChevronLeft className="w-4 h-4" />
+        <span>{t('updates.back_to_list')}</span>
+      </button>
+      
+      <article className="prose prose-lg dark:prose-invert max-w-none">
+        <header className="mb-8">
+          <div className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 mb-2">
+            <time dateTime={update.date}>{update.date}</time>
+            <span>•</span>
+            <div className="flex space-x-2">
+              {update.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+                >
+                  {t(`updates.tags.${tag}`)}
+                </span>
+              ))}
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+            {update.title}
+          </h1>
+        </header>
+        
+        {content ? (
+          <div dangerouslySetInnerHTML={{ __html: content }} />
+        ) : (
+          <p className="text-gray-600 dark:text-gray-300 text-lg">
+            {update.summary}
+          </p>
+        )}
+      </article>
+    </div>
+  );
+};
+
+export default UpdateDetail;