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