feat: Rename image and data files

- Add PostCard component
    - Add WysiwygEditor component
    - Use 'front-matter' to parse front matter in markdown files for metadata instead of using redundant data objects

src/pages/Dashboard.jsx

@@ -1,13 +1,13 @@
 // DashboardPage.jsx
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { loadPosts } from '../data/blog-post-data';
 import { Button } from '@progress/kendo-react-buttons';
+import { Card, CardImage, CardBody, GridLayout } from '@progress/kendo-react-layout'; 
+import PostCard from '../components/Cards/PostCard'; 
 
 const Dashboard = React.forwardRef((props, ref) => {
-    // State to hold posts loaded asynchronously
     const [blogPosts, setBlogPosts] = useState([]);
 
-    // Load posts on component mount
     useEffect(() => {
         const fetchPosts = async () => {
             const postsData = await loadPosts();
@@ -16,7 +16,6 @@ const Dashboard = React.forwardRef((props, ref) => {
         fetchPosts();
     }, []);
 
-    // Separate published and draft posts (no changes here)
     const publishedPosts = blogPosts.filter(post => post.published);
     const draftPosts = blogPosts.filter(post => !post.published);
 
@@ -28,20 +27,23 @@ const Dashboard = React.forwardRef((props, ref) => {
         <div style={{ textAlign: 'center' }} ref={ref}>
             <h1>Dashboard</h1>
 
-            <section style={{ textAlign: 'center' }}>
+            <section style={{ textAlign: 'center', maxWidth: '1200px', margin: '0 auto' }}> 
                 <h2>Published Posts</h2>
                 {publishedPosts.length ? (
-                    <ul>
+                    <GridLayout 
+                        cols={[{ width: "1fr" }, { width: "1fr" }, { width: "1fr" }]} 
+                        gap={{ rows: 30, cols: 10 }} 
+                        style={{ width: '900px' }}
+                    >
                         {publishedPosts.map(post => (
-                            <li key={post.slug}>
-                                <a className="k-link" href={post.canonical_url} target="_blank" rel="noreferrer">
-                                    {post.title}
-                                </a>{' '}
-                                <span style={{ marginLeft: '30px', padding: '0 20px' }}>{post.date}</span>{' '}
-                                <Button style={{ marginLeft: '30px', padding: '0 20px' }} onClick={() => handleEdit(post.slug)}>Edit</Button>
-                            </li>
+                            // The PostCard automatically becomes a grid item (cell)
+                            <PostCard 
+                                key={post.slug} 
+                                post={post} 
+                                onEdit={handleEdit} 
+                            />
                         ))}
-                    </ul>
+                    </GridLayout>
                 ) : (
                     <p>No published posts.</p>
                 )}