38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
import BlogEntryCard from "./components/BlogEntryCard.tsx";
|
|
|
|
export default function App() {
|
|
// A mock of what the data from the getBlogEntries JSON return would look like
|
|
const blogEntries = [
|
|
{
|
|
blogImage:
|
|
"https://git.cspark.dev/avatars/1c230bfe7494b1a62932d94ed8558dc61189437b1b6e0cecdb0c45c3d899bea4?size=512",
|
|
blogTitle: "Test Blog Entry 1",
|
|
blogDatePosted: "12/04/2024 4PM", // In reality this would probably be an actual correct format/standardised timestamp
|
|
blogDescription: "This is a first blog entry test", // If no description, we'd want to get a small snippet of the intro of the blog
|
|
},
|
|
{
|
|
blogImage:
|
|
"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
|
|
blogTitle: "Test Blog Entry 2",
|
|
blogDatePosted: "8/04/2024 6PM", // In reality this would probably be an actual correct format/standardised timestamp
|
|
blogDescription: "This is a test blog entry number 2", // If no description, we'd want to get a small snippet of the intro of the blog
|
|
},
|
|
];
|
|
|
|
return (
|
|
<main>
|
|
{blogEntries.map((item, index) => (
|
|
<BlogEntryCard
|
|
key={index}
|
|
blogImage={item["blogImage"]}
|
|
blogTitle={item["blogTitle"]}
|
|
blogDatePosted={item["blogDatePosted"]}
|
|
blogDescription={item["blogDescription"]}
|
|
className="col"
|
|
></BlogEntryCard>
|
|
))}
|
|
</main>
|
|
);
|
|
}
|