frontend/src/pages/user-pages/NewsPage.js

import {Container, Row, Col} from "react-bootstrap";
import BasicTemplate from "../../templates/BasicTemplate";
import { useSearchParams } from 'react-router-dom';
import CacheStorage from "../../organisms/CacheStorage";

export default function NewsPage() {
    
    
    const [searchParams] = useSearchParams();
    const newsId = Number(searchParams.get('id')); 
    
    const feedDetail = Array.from(JSON.parse(CacheStorage.get('feeds'))).filter((item) => item.id === newsId);

    const newsTitle = feedDetail[0].title;
    const newsContent = feedDetail[0].description;
    const newsImageSrc = feedDetail[0].image_url;
    
    return (
        <BasicTemplate content={
            (<Container id="about-us" className="my-5">
                <h1 className="mb-5 text-center">{newsTitle}
                </h1>
        
                <Row className="align-items-center">
                    <Col xs={12} md={6}>
                    <img className="img-fluid" src={newsImageSrc} alt="" style={{width: "100%", height: "auto"}}></img>
                    </Col>
        
                    <Col xs={12} md={6} className="d-flex justify-content-center align-items-center">
                    {newsContent}
                    </Col>
                </Row>
            </Container>)
        }/>
    )
}