Migrate blog card to typescript and rename to PostCard

ssss-sfu · Nov 26, 2023 · 3371499 · 3371499
1 parent 00d0eec
commit 3371499
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/components/Card.jsx → components/PostCard.tsx b/components/Card.jsx → components/PostCard.tsx
@@ -1,21 +1,33 @@
 import Image from "next/image";
-
-import { urlForImage } from "../pages/api/sanity.image";
+import { urlForImage } from "@lib/sanity.image";
 import { formatDate } from "utils/index";
 import clock from "@images/blog-page/clock.svg";
 import Link from "next/link";
+import { type Post } from "@lib/sanity.queries";
+
+interface PostCardProps {
+  post: Post;
+}
 
-export default function Card({ post }) {
+export const PostCard: React.FC<PostCardProps> = ({ post }) => {
   return (
     <div className="post">
       <Link as={`/blog/${post.slug.current}`} href="/blog/[slug]">
         <article className="post">
           <div className="thumbnail">
-            <Image
-              src={urlForImage(post.mainImage).width(500).height(300).url()}
-              alt="thumbnail"
-              layout="fill"
-            />
+            {post.mainImage ? (
+              <Image
+                src={urlForImage(post!.mainImage)!
+                  .width(500)!
+                  .height(300)!
+                  .url()}
+                alt="thumbnail"
+                layout="fill"
+              />
+            ) : (
+              <div className="post__cover--none" />
+            )}
+
             <div className="overlay"></div>
           </div>
           <div className="text">
@@ -30,4 +42,4 @@ export default function Card({ post }) {
       </Link>
     </div>
   );
-}
+};
diff --git a/components/index.ts b/components/index.ts
@@ -9,3 +9,4 @@ export { Dropdown } from "./Dropdown";
 export { EventsCalendar } from "./EventsCalendar";
 export { ProfileCard } from "./ProfileCard";
 export { SocialIcon } from "./SocialIcon";
+export { PostCard } from "./PostCard";
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
@@ -1,10 +1,9 @@
 import { useLiveQuery } from "next-sanity/preview";
 import type { GetStaticProps, InferGetStaticPropsType } from "next";
-import Card from "components/Card";
 import { readToken } from "@lib/sanity.api";
 import { getClient } from "@lib/sanity.client";
 import { getPosts, type Post, postsQuery } from "@lib/sanity.queries";
-import { Helmet } from "@components";
+import { Helmet, PostCard } from "@components";
 import { useRouter } from "next/router";
 
 export const getStaticProps: GetStaticProps<{
@@ -42,7 +41,7 @@ export default function BlogPage(
               <h3 className="category-title">Featured</h3>
               <div className="posts-list featured">
                 {posts.map((post) => (
-                  <Card key={post._id} post={post} />
+                  <PostCard key={post._id} post={post} />
                 ))}
               </div>
             </div>