55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { FC } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import useSystemTheme from 'react-use-system-theme'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
|
|
import { tomorrowNightEighties, tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
|
|
|
|
import useFileContent from '../../utils/fetchOnMount'
|
|
import { getLanguageByFileName } from '../../utils/getPreviewType'
|
|
import FourOhFour from '../FourOhFour'
|
|
import Loading from '../Loading'
|
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
|
|
|
const CodePreview: FC<{ file: any }> = ({ file }) => {
|
|
const { asPath } = useRouter()
|
|
const { response: content, error, validating } = useFileContent(`/api/raw/?path=${asPath}`, asPath)
|
|
|
|
const theme = useSystemTheme('dark')
|
|
const { t } = useTranslation()
|
|
|
|
if (error) {
|
|
return (
|
|
<PreviewContainer>
|
|
<FourOhFour errorMsg={error} />
|
|
</PreviewContainer>
|
|
)
|
|
}
|
|
if (validating) {
|
|
return (
|
|
<PreviewContainer>
|
|
<Loading loadingText={t('Loading file content...')} />
|
|
</PreviewContainer>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PreviewContainer>
|
|
<SyntaxHighlighter
|
|
language={getLanguageByFileName(file.name)}
|
|
style={theme === 'dark' ? tomorrowNightEighties : tomorrow}
|
|
>
|
|
{content}
|
|
</SyntaxHighlighter>
|
|
</PreviewContainer>
|
|
<DownloadBtnContainer>
|
|
<DownloadButtonGroup />
|
|
</DownloadBtnContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CodePreview
|