Mike/post

src/components/Mainpage.tsx

@@ -1,21 +1,14 @@
-import Willray from "../assets/Will.png";
-import Mikelat from "../assets/Mike.png";
-import Chrisf from "../assets/Chris.png";
-import { PostPreview } from "./PostPreview";
-
-const postOneImage =
-  "https://bucket.material-tailwind.com/magic-ai/06b38f84f9669f766048c469ce861b81880378273a11ae9badaedfc32868ef44.jpg";
-const postTwoImage =
-  "https://bucket.material-tailwind.com/magic-ai/e7aa235a7bc5f504db1c66e27ece08f8118b1da6b21c013500391afcd572cf7d.jpg";
-const postThreeImage =
-  "https://bucket.material-tailwind.com/magic-ai/dc74a867f21afc734166a6d37c08beaba4ff040664ba8ccce918e054264ad68d.jpg";
+// import { PostPreview } from "./PostPreview";
+import { data } from "../content/content";
+import { Post } from "./Post";
 
 export function Mainpage() {
   return (
     <main className="container m-0 flex h-[calc(100vh_-_12.5rem)] flex-col overflow-scroll bg-white p-4">
-      <PostPreview postImage={postOneImage} authorImage={Willray} />
-      <PostPreview postImage={postTwoImage} authorImage={Mikelat} />
-      <PostPreview postImage={postThreeImage} authorImage={Chrisf} />
+      {/* {data.map((post) => {
+        return <PostPreview post={post} />;
+      })} */}
+      <Post post={data[0]} />
     </main>
   );
 }

src/components/Post.tsx

@@ -0,0 +1,59 @@
+import type { PostData } from "../content/content";
+
+type PostProps = { post: PostData };
+
+
+/**
+ * Renders a single blog post with its content and author information.
+ * @param post - The data of the blog post to be displayed.
+ * @returns The JSX element representing the blog post.
+ */
+export function Post({ post }: PostProps) {
+  return (
+    <div className="text-black">
+      {/* Container for the blog post */}
+      <section className="bg-white dark:bg-gray-900">
+        <div className="container px-6 py-10 mx-auto">
+          <h1 className="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">From the blog</h1>
+
+          <div className="mt-8 lg:-mx-6 lg:flex lg:items-center">
+            {/* Image of the blog post */}
+            <img
+              className="object-cover w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96"
+              src={post.postImage}
+              alt=""
+            />
+
+            <div className="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6">
+              {/* Date of the blog post */}
+              <p className="text-sm text-gray-500 dark:text-gray-300">
+                {post.publishedDate.toLocaleDateString()}
+              </p>
+
+              {/* Title of the blog post */}
+              <p className="text-xl font-semibold text-gray-800 dark:text-white">{post.title}</p>
+
+              {/* Content of the blog post */}
+              <p className="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
+                {post.content}
+              </p>
+
+              {/* Author information */}
+              <div className="flex items-center mt-6">
+                <img
+                  className="object-cover object-center w-10 h-10 rounded-full"
+                  src={post.authorImage}
+                  alt=""
+                />
+
+                <div className="mx-4">
+                  <h1 className="text-sm text-gray-700 dark:text-gray-200">{post.author}</h1>                  
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/components/PostPreview.tsx

@@ -1,10 +1,12 @@
-export function PostPreview({
-  postImage,
-  authorImage,
-}: {
-  postImage: string;
-  authorImage: string;
-}) {
+import { type PostData } from "../content/content";
+
+type PostPreviewProps = {
+  post: PostData;
+};
+
+export function PostPreview(props: PostPreviewProps) {
+  const { postImage, authorImage, content, title, author, publishedDate } =
+    props.post;
   return (
     <div className="flex flex-col text-gray-700">
       <div className="relative m-0 overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg">
@@ -22,22 +24,22 @@ export function PostPreview({
           href="#"
           className="text-blue-gray-900 mb-2 block font-sans text-xl font-semibold normal-case leading-snug tracking-normal antialiased transition-colors hover:text-gray-700"
         >
-          Revolutionizing Our Production Process
+          {title}
         </a>
         <p className="mb-8 block font-sans text-base font-normal leading-relaxed !text-gray-500 text-inherit antialiased">
-          Learn how our recent investment in new technology has revolutionized
-          our production process, leading to improved efficiency and product
-          quality.
+          {content}
         </p>
         <div className="flex items-center gap-4">
           <img
             src={authorImage}
             className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
           />
           <div>
-            <p className="text-blue-gray-900 mb-0.5 block font-sans text-base font-light leading-relaxed antialiased"></p>
+            <p className="text-blue-gray-900 mb-0.5 block font-sans text-base font-light leading-relaxed antialiased">
+              {author}
+            </p>
             <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
-              2022-08-15
+              {publishedDate.toDateString()}
             </p>
           </div>
         </div>

src/content/content.ts

@@ -0,0 +1,49 @@
+import Willray from "../assets/Will.png";
+import Mikelat from "../assets/Mike.png";
+import Chrisf from "../assets/Chris.png";
+
+export type PostData = {
+  postImage: string;
+  authorImage: string;
+  content: string;
+  title: string;
+  author: string;
+  publishedDate: Date;
+};
+
+const postOneImage =
+  "https://bucket.material-tailwind.com/magic-ai/06b38f84f9669f766048c469ce861b81880378273a11ae9badaedfc32868ef44.jpg";
+const postTwoImage =
+  "https://bucket.material-tailwind.com/magic-ai/e7aa235a7bc5f504db1c66e27ece08f8118b1da6b21c013500391afcd572cf7d.jpg";
+const postThreeImage =
+  "https://bucket.material-tailwind.com/magic-ai/dc74a867f21afc734166a6d37c08beaba4ff040664ba8ccce918e054264ad68d.jpg";
+
+export const data: PostData[] = [
+  {
+    postImage: postOneImage,
+    authorImage: Willray,
+    content:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitiamolestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed oditfugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem. Veritatisobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquamnihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdamrecusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum luptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maximedoloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantiummodi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga.",
+    title: "First post",
+    author: "William Ray",
+    publishedDate: new Date(),
+  },
+  {
+    postImage: postTwoImage,
+    authorImage: Mikelat,
+    content:
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitiamolestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed oditfugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem. Veritatisobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquamnihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdamrecusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum luptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maximedoloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantiummodi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga.",
+    title: "Second post",
+    author: "Mike Latimore",
+    publishedDate: new Date(),
+  },
+  {
+    postImage: postThreeImage,
+    authorImage: Chrisf,
+    content:
+    "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitiamolestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed oditfugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem. Veritatisobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquamnihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdamrecusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum luptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maximedoloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantiummodi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga.",
+    title: "Third post",
+    author: "Chris Forti",
+    publishedDate: new Date(),
+  },
+];