43 lines
2 KiB
TypeScript
43 lines
2 KiB
TypeScript
|
import ShiftBy from "@components/shift-by"
|
||
|
|
import { Spacer, Tabs, Card, Textarea, Text } from "@geist-ui/core"
|
||
|
|
import Image from 'next/image'
|
||
|
|
import styles from './home.module.css'
|
||
|
|
import markdownStyles from '@components/preview/preview.module.css'
|
||
|
|
const Home = ({ introTitle, introContent, rendered }: {
|
||
|
|
introTitle: string
|
||
|
|
introContent: string
|
||
|
|
rendered: string
|
||
|
|
}) => {
|
||
|
|
return (<><div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
|
||
|
|
<ShiftBy y={-2}><Image src={'/assets/logo-optimized.svg'} width={'48px'} height={'48px'} alt="" /></ShiftBy>
|
||
|
|
<Spacer />
|
||
|
|
<Text style={{ display: 'inline' }} h1>{introTitle}</Text>
|
||
|
|
</div>
|
||
|
|
<Card>
|
||
|
|
<Tabs initialValue={'preview'} hideDivider leftSpace={0}>
|
||
|
|
<Tabs.Item label={"Raw"} value="edit">
|
||
|
|
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
|
||
|
|
<div style={{ marginTop: 'var(--gap-half)', display: 'flex', flexDirection: 'column' }}>
|
||
|
|
<Textarea
|
||
|
|
readOnly
|
||
|
|
value={introContent}
|
||
|
|
width="100%"
|
||
|
|
// TODO: Textarea should grow to fill parent if height == 100%
|
||
|
|
style={{ flex: 1, minHeight: 350 }}
|
||
|
|
resize="vertical"
|
||
|
|
className={styles.textarea}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Tabs.Item>
|
||
|
|
<Tabs.Item label="Preview" value="preview">
|
||
|
|
<div style={{ marginTop: 'var(--gap-half)', }}>
|
||
|
|
<article className={markdownStyles.markdownPreview} dangerouslySetInnerHTML={{ __html: rendered }} style={{
|
||
|
|
height: "100%"
|
||
|
|
}} />
|
||
|
|
</div>
|
||
|
|
</Tabs.Item>
|
||
|
|
</Tabs>
|
||
|
|
</Card></>)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Home
|