From 05a5d41574d70c29421681dcc52642e3a8fa9c33 Mon Sep 17 00:00:00 2001
From: MattLeo <matt.leo@outlook.com>
Date: Tue, 25 Nov 2025 14:13:33 -0600
Subject: [PATCH] Added the Article Detail component

---
 client/kb-frontend/src/App.jsx                |  3 +-
 .../src/components/ArticleDetail.css          | 35 +++++++++++++++++++
 .../src/components/ArticleDetail.jsx          | 31 ++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 client/kb-frontend/src/components/ArticleDetail.css

diff --git a/client/kb-frontend/src/App.jsx b/client/kb-frontend/src/App.jsx
index 245f9b3..d9d58ec 100644
--- a/client/kb-frontend/src/App.jsx
+++ b/client/kb-frontend/src/App.jsx
@@ -3,6 +3,7 @@ import './App.css'
 import Header from './components/Header'
 import SearchBar from './components/SearchBar'
 import ArticleList from './components/ArticleList'
+import ArticleDetail from './components/ArticleDetail'
 
 function App() {
   const [currentView, setCurrentView] = useState('list');
@@ -49,7 +50,7 @@ function App() {
         </>
       ) : (
         <>
-          {/*<ArticleDetail article={selectedArticle} onBack={handleBack} />*/}
+          <ArticleDetail article={selectedArticle} onBack={handleBack} />
         </>
       )}
     </div>
diff --git a/client/kb-frontend/src/components/ArticleDetail.css b/client/kb-frontend/src/components/ArticleDetail.css
new file mode 100644
index 0000000..a620795
--- /dev/null
+++ b/client/kb-frontend/src/components/ArticleDetail.css
@@ -0,0 +1,35 @@
+.article-detail {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.back-button {
+  background: none;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  margin-bottom: 1rem;
+}
+
+.back-button:hover {
+  background-color: #f0f0f0;
+}
+
+.ka-number {
+  background-color: #3498db;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.article-meta {
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.article-content {
+  margin-top: 2rem;
+  line-height: 1.6;
+}
\ No newline at end of file
diff --git a/client/kb-frontend/src/components/ArticleDetail.jsx b/client/kb-frontend/src/components/ArticleDetail.jsx
index e69de29..0273e77 100644
--- a/client/kb-frontend/src/components/ArticleDetail.jsx
+++ b/client/kb-frontend/src/components/ArticleDetail.jsx
@@ -0,0 +1,31 @@
+import './ArticleDetail.css'
+
+function ArticleDetail({ article, onBack }) {
+    if (!article) {
+        return <div>No article selected</div>
+    }
+
+    return (
+        <div className='article-detail'>
+            <button className='back-button' onClick={onBack}>
+                ← Back
+            </button>
+
+            <div className='article-header'>
+                <span className='ka-number'>{article.ka_number}</span>
+                <h1>{article.title}</h1>
+                <p className='article-meta'>
+                    Created: {new Date(article.created_at).toLocaleDateString()}
+                    {article.updated_at && ` | Updated: ${new Date(article.updated_at).toLocaleDateString()}`}
+                </p>
+            </div>
+
+            <div
+                className='article-content'
+                dangerouslySetInnerHTML={{ __html: article.content }}
+            />
+        </div>
+    );
+}
+
+export default ArticleDetail
\ No newline at end of file