Ojakoo
83 lines
1.9 KiB
TypeScript
83 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import Image from "next/legacy/image";
|
|
import styled from "styled-components";
|
|
import rehypeRaw from "rehype-raw";
|
|
import rehypeSanitize from "rehype-sanitize";
|
|
import colors from "@theme/colors";
|
|
import Post from "@models/Feed";
|
|
import { TextSection, ChangeLanguageButton } from "@components/index";
|
|
import MarkdownStyles from "@views/common/MarkdownStyles";
|
|
import LoadingView from "@views/common/LoadingView";
|
|
import { useTranslation } from "../../i18n";
|
|
|
|
interface FeedPageViewProps {
|
|
post?: Post;
|
|
}
|
|
|
|
const StyledTextSection = styled(TextSection)`
|
|
align-items: center;
|
|
|
|
& > h1 {
|
|
color: ${colors.darkBlue};
|
|
|
|
p {
|
|
color: ${colors.orange1};
|
|
}
|
|
}
|
|
|
|
& > div {
|
|
margin: auto;
|
|
}
|
|
`;
|
|
|
|
const Content = styled(MarkdownStyles)`
|
|
margin-top: 1.5rem;
|
|
`;
|
|
|
|
const LngButton = styled(ChangeLanguageButton)`
|
|
align-self: flex-end;
|
|
margin-right: 1rem;
|
|
`;
|
|
|
|
const FeedPageView: React.FC<FeedPageViewProps> = ({ post }) => {
|
|
const { i18n } = useTranslation();
|
|
if (!post) return <LoadingView />;
|
|
const { language } = i18n;
|
|
const isFi = language === "fi";
|
|
const {
|
|
title, description, content,
|
|
} = {
|
|
title: isFi ? post.title_fi : post.title_en,
|
|
description: isFi ? post.description_fi : post.description_en,
|
|
content: isFi ? post.content_fi : post.content_en,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<LngButton />
|
|
<StyledTextSection>
|
|
<h1>
|
|
{title}
|
|
<p>
|
|
{description}
|
|
</p>
|
|
{post.image && (
|
|
<Image
|
|
src={post.image}
|
|
alt={title}
|
|
objectFit="scale-down"
|
|
layout="responsive"
|
|
width={16}
|
|
height={9}
|
|
/>
|
|
)}
|
|
</h1>
|
|
<div>
|
|
<Content rehypePlugins={[rehypeRaw, rehypeSanitize]}>{content}</Content>
|
|
</div>
|
|
</StyledTextSection>
|
|
</>
|
|
);
|
|
};
|
|
export default FeedPageView;
|