footer, feedback, subscribe

yoga-app/src/components/blog.single.post.component.tsx

@@ -0,0 +1,34 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {YogaBlogPostsComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-posts-component";
+import {YogaBlogPost_Plain} from "@/types/generated-strapi-interfaces/api/yoga-blog-post";
+import {StrapiFile} from "@/types/types";
+import strapiApi from "@/app/api/strapi/strapi-api";
+
+export interface Props {
+    post: YogaBlogPost_Plain & {documentId?: string}
+}
+
+const BlogSinglePostComponent = ({post: {header,teaserImage,tags,documentId} }: Props) => {
+    const teaserFile: StrapiFile = teaserImage as StrapiFile;
+    const tagText = tags?.length ? tags[0].tag : null;
+    return (
+        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+            <div className="blog_posts_image position-relative">
+                <figure className="mb-0">
+                    <YogaImageComponent src={strapiApi.getImageUrl( teaserFile.url )   } alt=""
+                                                             className="img-fluid"/>
+                </figure>
+                <div className="blog_posts_image_content">
+                    <span>{tagText}</span>
+                    <h4>{header}</h4>
+                    <div className="icon_wrapper">
+                        <a href={"/blog/"+documentId} className="text-decoration-none"><i
+                            className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default BlogSinglePostComponent;