110 lines
2.8 KiB
TypeScript
110 lines
2.8 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import {
|
|
DeviceType,
|
|
useDeviceType,
|
|
} from '@/app/_components/client-utils/useDeviceType';
|
|
import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
|
|
import { Theme } from '@/app/_components/ui/theme/theme';
|
|
import { FileContent } from '@/app/_server-utils/get-posts';
|
|
|
|
const StyledContainer = styled.div<{ devicetype: string }>`
|
|
width: ${({ devicetype }) =>
|
|
devicetype === DeviceType.TABLET
|
|
? '70%'
|
|
: devicetype === DeviceType.DESKTOP
|
|
? '60%'
|
|
: '100%'};
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
font-family: ${Theme.font.family};
|
|
border-bottom: 1px solid ${Theme.background.transparent.medium};
|
|
`;
|
|
|
|
const StyledWrapper = styled.div`
|
|
width: 79.3%;
|
|
padding: ${Theme.spacing(10)} 0px ${Theme.spacing(20)} 0px;
|
|
`;
|
|
|
|
const StyledHeader = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${Theme.spacing(8)};
|
|
`;
|
|
|
|
const StyledHeading = styled.div`
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
`;
|
|
|
|
const StyledHeaderInfoSection = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${Theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledHeaderInfoSectionTitle = styled.div`
|
|
font-size: ${Theme.font.size.sm};
|
|
padding: ${Theme.spacing(2)} 0px;
|
|
color: ${Theme.text.color.secondary};
|
|
font-weight: ${Theme.font.weight.medium};
|
|
`;
|
|
|
|
const StyledHeaderInfoSectionSub = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${Theme.spacing(4)};
|
|
color: ${Theme.text.color.tertiary};
|
|
font-family: ${Theme.font.family};
|
|
`;
|
|
|
|
const StyledRectangle = styled.div`
|
|
width: 100%;
|
|
height: 1px;
|
|
background: ${Theme.background.transparent.medium};
|
|
`;
|
|
|
|
export default function UserGuideContent({ item }: { item: FileContent }) {
|
|
const BREADCRUMB_ITEMS = [
|
|
{
|
|
uri: '/user-guide',
|
|
label: 'User Guide',
|
|
},
|
|
];
|
|
const deviceType = useDeviceType();
|
|
return (
|
|
<StyledContainer devicetype={deviceType}>
|
|
<StyledWrapper>
|
|
<StyledHeader>
|
|
<Breadcrumbs
|
|
items={BREADCRUMB_ITEMS}
|
|
activePage={item.itemInfo.title}
|
|
separator="/"
|
|
/>
|
|
<StyledHeading>{item.itemInfo.title}</StyledHeading>
|
|
{item.itemInfo.image && (
|
|
<img
|
|
id={`img-${item.itemInfo.title}`}
|
|
src={item.itemInfo.image}
|
|
alt={item.itemInfo.title}
|
|
/>
|
|
)}
|
|
<StyledHeaderInfoSection>
|
|
<StyledHeaderInfoSectionTitle>
|
|
In this article
|
|
</StyledHeaderInfoSectionTitle>
|
|
<StyledHeaderInfoSectionSub>
|
|
{item.itemInfo.info}
|
|
</StyledHeaderInfoSectionSub>
|
|
</StyledHeaderInfoSection>
|
|
<StyledRectangle />
|
|
</StyledHeader>
|
|
<div>{item.content}</div>
|
|
</StyledWrapper>
|
|
</StyledContainer>
|
|
);
|
|
}
|