Combined head and body to html component
This commit is contained in:
parent
1c3f2565c7
commit
89ac48df4c
3 changed files with 41 additions and 20 deletions
13
fwt/components/HTML/HTML.sass
Normal file
13
fwt/components/HTML/HTML.sass
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
@use '/src/styles/variables.sass' as vars
|
||||||
|
@use '/src/styles/fonts.sass' as fonts
|
||||||
|
|
||||||
|
.body
|
||||||
|
color: vars.$textColor
|
||||||
|
|
||||||
|
.inter
|
||||||
|
@extend .body
|
||||||
|
font-family: fonts.$Inter
|
||||||
|
|
||||||
|
.roboto
|
||||||
|
@extend .body
|
||||||
|
font-family: fonts.$Roboto
|
||||||
28
fwt/components/HTML/HTML.tsx
Normal file
28
fwt/components/HTML/HTML.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import './HTML.sass'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
children: any
|
||||||
|
font?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default (props: Props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||||||
|
<meta name="name" content={props.name} />
|
||||||
|
<meta name="description" content={props.description} />
|
||||||
|
<title>{props.title}</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class={props.font}>{props.children}</body>
|
||||||
|
</html>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
interface Props {
|
|
||||||
title: string
|
|
||||||
name: string
|
|
||||||
description: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props: Props) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
|
||||||
<meta name="name" content={props.name} />
|
|
||||||
<meta name="description" content={props.description} />
|
|
||||||
<title>{props.title}</title>
|
|
||||||
</head>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue