article update

src/components/Html/index.tsx

@@ -1,7 +1,16 @@
+import { createElement } from 'react'
+
 export type HtmlProps = {
+    className?: string
+    as?: keyof HTMLElementTagNameMap
     html: string
 }
 
-export const Html: React.FC<HtmlProps> = props => (
-    <div dangerouslySetInnerHTML={{ __html: props.html }} />
-)
+export const Html: React.FC<HtmlProps> = ({ as = 'div', ...props }) => {
+    return createElement(as, {
+        className: props.className,
+        dangerouslySetInnerHTML: {
+            __html: props.html,
+        }
+    })
+}

src/components/Page/index.tsx

@@ -1,3 +1,5 @@
+import './styles.css'
+
 import { Share } from '../Share'
 import { Html } from '../Html'
 import { PageMeta } from '../PageMeta'
@@ -11,19 +13,12 @@ export type PageProps = {
 }
 
 export const Page: React.FC<PageProps> = props => (
-    <div className={'Article'} style={props.style}>
-        <style jsx>{`
-            hr {
-                border: 1px solid black;
-                margin-top: var(--size-m);
-                margin-bottom: var(--size-m);
-            }
-        `}</style>
-        <div className={'Article-Body'}>
-            <Html
-                html={props.children}
-            />
-        </div>
+    <div className={'page'} style={props.style}>
+        <Html
+            as={'article'}
+            className={'article'}
+            html={props.children}
+        />
 
         <hr />
         <Share />

src/components/Page/styles.css

@@ -0,0 +1,5 @@
+.page hr {
+    border: 1px solid black;
+    margin-top: var(--size-m);
+    margin-bottom: var(--size-m);
+}