new_akademy_landing/src/components/Blogs/SingleBlog.jsx

58 lines
1.9 KiB
JavaScript

import React, { useEffect, useState } from "react";
import { Box, Grid, Typography } from "@mui/material";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import ThreeFormFields from "../form/ThreeFormFields";
import { store } from "../redux/store";
import { Provider } from "react-redux";
import style from "./index.module.css";
const Blog = (props) => {
window.scrollTo({ top: 0, behavior: "instant" });
return (
<>
<Provider store={store}>
<ContentWrapper>
<Header color={"#015C9F"} />
<div className={style.flex_box}>
<div className={style.flex_1}>
{props.blog?.title && <h1>{props.blog?.title}</h1>}
<Typography variant="body2" my={0.6}>
Published On: {props.blog?.date} | 5 min Read
</Typography>
{props.blog?.img && (
<img
src={`https://management.beanstalkedu.com/assets/${props.blog?.img}`}
width={"100%"}
style={{ borderRadius: "8px" }}
alt={props.blog?.meta}
/>
)}
{props.blog?.preview_text && (
<Typography my={4}>
<div
dangerouslySetInnerHTML={{
__html: props.blog?.preview_text,
}}
/>
</Typography>
)}
</div>
<div className={style.flex_2}>
<Box sx={{ background: "#DEF0FD", p: 3 }}>
<Typography>Get in Touch</Typography>
<ThreeFormFields formName="Blogs" />
</Box>
</div>
</div>
</ContentWrapper>
<Footer page="INTERAKTO_CODING" />
</Provider>
</>
);
};
export default Blog;