add basic structure to web apps
This commit is contained in:
Pavel Prichodko
parent
4f676c117d
commit
cfbd3a5fa0
|
|
@ -20,10 +20,10 @@ const plugins = [
|
||||||
// withImages,
|
// withImages,
|
||||||
withTamagui({
|
withTamagui({
|
||||||
config: './tamagui.config.ts',
|
config: './tamagui.config.ts',
|
||||||
components: [],
|
components: ['@status-im/components'],
|
||||||
importsWhitelist: ['constants.js', 'colors.js'],
|
importsWhitelist: ['constants.js', 'colors.js'],
|
||||||
logTimings: true,
|
logTimings: true,
|
||||||
disableExtraction,
|
disableExtraction: true,
|
||||||
|
|
||||||
// experiment - reduced bundle size react-native-web
|
// experiment - reduced bundle size react-native-web
|
||||||
useReactNativeWebLite: false,
|
useReactNativeWebLite: false,
|
||||||
|
|
@ -33,11 +33,11 @@ const plugins = [
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
excludeReactNativeWebExports: [
|
excludeReactNativeWebExports: [
|
||||||
'Switch',
|
// 'Switch',
|
||||||
'ProgressBar',
|
// 'ProgressBar',
|
||||||
'Picker',
|
// 'Picker',
|
||||||
'CheckBox',
|
// 'CheckBox',
|
||||||
'Touchable',
|
// 'Touchable'
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
|
|
@ -53,7 +53,7 @@ module.exports = function () {
|
||||||
},
|
},
|
||||||
transpilePackages: [
|
transpilePackages: [
|
||||||
// 'solito',
|
// 'solito',
|
||||||
// 'react-native-web',
|
'react-native-web',
|
||||||
// 'expo-linking',
|
// 'expo-linking',
|
||||||
// 'expo-constants',
|
// 'expo-constants',
|
||||||
// 'expo-modules-core'
|
// 'expo-modules-core'
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,12 @@
|
||||||
"@tamagui/core": "^1.0.8",
|
"@tamagui/core": "^1.0.8",
|
||||||
"@tamagui/next-theme": "1.0.8",
|
"@tamagui/next-theme": "1.0.8",
|
||||||
"next": "^13.0.6",
|
"next": "^13.0.6",
|
||||||
"raf": "^3.4.1",
|
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-native-web": "^0.18.6"
|
"react-native-web": "^0.18.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tamagui/next-plugin": "1.0.8",
|
"@tamagui/next-plugin": "^1.0.8",
|
||||||
"@types/node": "^18.6.4",
|
"@types/node": "^18.6.4",
|
||||||
"@types/react": "^18.0.26",
|
"@types/react": "^18.0.26",
|
||||||
"@types/react-dom": "^18.0.9",
|
"@types/react-dom": "^18.0.9",
|
||||||
|
|
|
||||||
|
|
@ -2,26 +2,30 @@ import '@tamagui/core/reset.css'
|
||||||
import '@tamagui/font-inter/css/400.css'
|
import '@tamagui/font-inter/css/400.css'
|
||||||
import '@tamagui/font-inter/css/700.css'
|
import '@tamagui/font-inter/css/700.css'
|
||||||
|
|
||||||
import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
|
import '../styles/reset.css'
|
||||||
// import { Provider } from 'app/provider'
|
import '../styles/app.css'
|
||||||
|
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
import React, { useMemo } from 'react'
|
import React from 'react'
|
||||||
// import type { SolitoAppProps } from 'solito'
|
|
||||||
|
|
||||||
import tamaguiConfig from '../tamagui.config'
|
import tamaguiConfig from '../tamagui.config'
|
||||||
|
|
||||||
import 'raf/polyfill'
|
|
||||||
import { AppProps } from 'next/app'
|
import { AppProps } from 'next/app'
|
||||||
import { TamaguiProvider } from '@tamagui/core'
|
import { TamaguiProvider } from '@tamagui/core'
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
// import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
|
||||||
|
// import { Provider } from 'app/provider'
|
||||||
|
// import type { SolitoAppProps } from 'solito'
|
||||||
|
|
||||||
|
function App({ Component, pageProps }: AppProps) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Tamagui Example App</title>
|
<title>Status</title>
|
||||||
<meta name="description" content="Tamagui, Solito, Expo & Next.js" />
|
<meta name="description" content="Tamagui, Solito, Expo & Next.js" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<TamaguiProvider config={tamaguiConfig}>
|
<TamaguiProvider config={tamaguiConfig}>
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
</TamaguiProvider>
|
</TamaguiProvider>
|
||||||
|
|
@ -41,4 +45,4 @@ function MyApp({ Component, pageProps }: AppProps) {
|
||||||
// )
|
// )
|
||||||
// }
|
// }
|
||||||
|
|
||||||
export default MyApp
|
export default App
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,47 @@
|
||||||
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
|
import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
|
||||||
import { Children } from 'react'
|
import { Children } from 'react'
|
||||||
// import { AppRegistry } from 'react-native'
|
import { AppRegistry } from 'react-native'
|
||||||
|
|
||||||
import Tamagui from '../tamagui.config'
|
import Tamagui from '../tamagui.config'
|
||||||
|
|
||||||
|
// TODO: the recommended approach breaks HMR when Tmaagui.getCSS() is called in the getInitialProps method.
|
||||||
export default class Document extends NextDocument {
|
export default class Document extends NextDocument {
|
||||||
static async getInitialProps({ renderPage }: any) {
|
// static async getInitialProps({ renderPage }: any) {
|
||||||
// AppRegistry.registerComponent('Main', () => Main)
|
// AppRegistry.registerComponent('Main', () => Main)
|
||||||
|
// const page = await renderPage()
|
||||||
|
|
||||||
|
// // @ts-ignore
|
||||||
|
// const { getStyleElement } = AppRegistry.getApplication('Main')
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * Note: be sure to keep tamagui styles after react-native-web styles like it is here!
|
||||||
|
// * So Tamagui styles can override the react-native-web styles.
|
||||||
|
// */
|
||||||
|
// const styles = [
|
||||||
|
// getStyleElement(),
|
||||||
|
// <style
|
||||||
|
// key="tamagui-css"
|
||||||
|
// dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||||
|
// />,
|
||||||
|
// ]
|
||||||
|
|
||||||
|
// return { ...page, styles: Children.toArray(styles) }
|
||||||
|
// }
|
||||||
|
|
||||||
|
static async getInitialProps({ renderPage }) {
|
||||||
|
AppRegistry.registerComponent('app', () => Main)
|
||||||
|
// @ts-ignore
|
||||||
|
const { getStyleElement } = AppRegistry.getApplication('app')
|
||||||
|
|
||||||
const page = await renderPage()
|
const page = await renderPage()
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
// const { getStyleElement } = AppRegistry.getApplication('Main')
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Note: be sure to keep tamagui styles after react-native-web styles like it is here!
|
|
||||||
* So Tamagui styles can override the react-native-web styles.
|
|
||||||
*/
|
|
||||||
const styles = [
|
const styles = [
|
||||||
// getStyleElement(),
|
// <style dangerouslySetInnerHTML={{ __html: normalizeNextElements }} />,
|
||||||
<style
|
getStyleElement(),
|
||||||
key="tamagui-css"
|
// <style
|
||||||
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
// key="tamagui-css"
|
||||||
/>
|
// dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||||
|
// />,
|
||||||
]
|
]
|
||||||
|
|
||||||
return { ...page, styles: Children.toArray(styles) }
|
return { ...page, styles: Children.toArray(styles) }
|
||||||
|
|
@ -29,9 +49,13 @@ export default class Document extends NextDocument {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Html>
|
<Html lang="en">
|
||||||
<Head>
|
<Head>
|
||||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<style
|
||||||
|
id="stitches"
|
||||||
|
dangerouslySetInnerHTML={{ __html: Tamagui.getCSS() }}
|
||||||
|
/>
|
||||||
</Head>
|
</Head>
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,22 @@
|
||||||
import { Circle } from '../components/circle'
|
// import { Circle } from '../components/circle'
|
||||||
import { Shape } from '@status-im/components'
|
import { Shape, Button, Sidebar, Image, Input } from '@status-im/components'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div id="app">
|
||||||
<div>
|
<div id="sidebar">
|
||||||
<h1>Next.js</h1>
|
<Sidebar
|
||||||
<Circle />
|
name="Rarible"
|
||||||
</div>
|
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||||
<div>
|
membersCount={123}
|
||||||
<h1>UI</h1>
|
/>
|
||||||
<Shape />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
<div>topbar</div>
|
||||||
|
<div>content</div>
|
||||||
|
<div>composer</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#__next {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 352px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 56px 1fr 100px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
/*
|
||||||
|
1. Use a more-intuitive box-sizing model.
|
||||||
|
*/
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
2. Remove default margin
|
||||||
|
*/
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
3. Allow percentage-based heights in the application
|
||||||
|
*/
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typographic tweaks!
|
||||||
|
4. Add accessible line-height
|
||||||
|
5. Improve text rendering
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
6. Improve media defaults
|
||||||
|
*/
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
7. Remove built-in form typography styles
|
||||||
|
*/
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
8. Avoid text overflows
|
||||||
|
*/
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
9. Create a root stacking context
|
||||||
|
*/
|
||||||
|
#root,
|
||||||
|
#__next {
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
@ -2,9 +2,8 @@
|
||||||
"name": "vite-app",
|
"name": "vite-app",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "TAMAGUI_TARGET='web' vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
#root {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.react:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
a:nth-of-type(2) .logo {
|
|
||||||
animation: logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,14 @@
|
||||||
import './app.css'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import React, { useState } from 'react'
|
import {
|
||||||
|
Button,
|
||||||
import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
|
Code,
|
||||||
|
Heading,
|
||||||
|
Label,
|
||||||
|
Paragraph,
|
||||||
|
Shape,
|
||||||
|
Sidebar,
|
||||||
|
} from '@status-im/components'
|
||||||
import { Stack, TamaguiProvider } from '@tamagui/core'
|
import { Stack, TamaguiProvider } from '@tamagui/core'
|
||||||
|
|
||||||
import tamaguiConfig from '../tamagui.config'
|
import tamaguiConfig from '../tamagui.config'
|
||||||
|
|
@ -13,32 +19,52 @@ function App() {
|
||||||
const [theme, setTheme] = useState<ThemeVars>('light')
|
const [theme, setTheme] = useState<ThemeVars>('light')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TamaguiProvider config={tamaguiConfig} defaultTheme={theme}>
|
<TamaguiProvider config={tamaguiConfig}>
|
||||||
<Stack width="100%" height="100%" backgroundColor="$background">
|
<div id="app">
|
||||||
<Stack
|
<div id="sidebar">
|
||||||
flexDirection="column"
|
<Sidebar
|
||||||
justifyContent="center"
|
name="Rarible"
|
||||||
alignItems="center"
|
description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
|
||||||
height="100%"
|
membersCount={123}
|
||||||
width="100%"
|
/>
|
||||||
>
|
</div>
|
||||||
<Heading marginBottom={12}>This is an Heading 1</Heading>
|
|
||||||
<Heading marginBottom={12} heading="h2">
|
<main id="main">
|
||||||
This is an Heading 2
|
<div>topbar</div>
|
||||||
</Heading>
|
<div>
|
||||||
<Paragraph weight="semibold" uppercase marginBottom={12}>
|
<Stack width="100%" height="100%" backgroundColor="$background">
|
||||||
This is a paragraph
|
<Stack
|
||||||
</Paragraph>
|
flexDirection="column"
|
||||||
<Label marginBottom={12}>This is a label</Label>
|
justifyContent="center"
|
||||||
<Code marginBottom={12}>This is a code</Code>
|
alignItems="center"
|
||||||
<Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
|
height="100%"
|
||||||
<Paragraph marginVertical={20}>Theme selected - {theme} </Paragraph>
|
width="100%"
|
||||||
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
|
>
|
||||||
Toogle theme
|
<Heading marginBottom={12}>This is an Heading 1</Heading>
|
||||||
</button>
|
<Heading marginBottom={12} heading="h2">
|
||||||
<Shape marginTop={20} />
|
This is an Heading 2
|
||||||
</Stack>
|
</Heading>
|
||||||
</Stack>
|
<Paragraph weight="semibold" uppercase marginBottom={12}>
|
||||||
|
This is a paragraph
|
||||||
|
</Paragraph>
|
||||||
|
<Label marginBottom={12}>This is a label</Label>
|
||||||
|
<Code marginBottom={12}>This is a code</Code>
|
||||||
|
<Paragraph>0x213abc190 ... 121ah4a9e</Paragraph>
|
||||||
|
<Paragraph marginVertical={20}>
|
||||||
|
Theme selected - {theme}{' '}
|
||||||
|
</Paragraph>
|
||||||
|
<button
|
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||||
|
>
|
||||||
|
Toogle theme
|
||||||
|
</button>
|
||||||
|
<Shape marginTop={20} />
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
<div>composer</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</TamaguiProvider>
|
</TamaguiProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
:root {
|
|
||||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
import './index.css'
|
import '../styles/reset.css'
|
||||||
|
import '../styles/app.css'
|
||||||
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
import ReactDOM from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
|
|
||||||
import App from './app'
|
import App from './app'
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
const root = document.getElementById('root') as HTMLElement
|
||||||
|
|
||||||
|
createRoot(root).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
height: 100%;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 352px 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 56px 1fr 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar,
|
||||||
|
#main,
|
||||||
|
#main > div {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
/*
|
||||||
|
1. Use a more-intuitive box-sizing model.
|
||||||
|
*/
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
2. Remove default margin
|
||||||
|
*/
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
3. Allow percentage-based heights in the application
|
||||||
|
*/
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typographic tweaks!
|
||||||
|
4. Add accessible line-height
|
||||||
|
5. Improve text rendering
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
6. Improve media defaults
|
||||||
|
*/
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
video,
|
||||||
|
canvas,
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
7. Remove built-in form typography styles
|
||||||
|
*/
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
8. Avoid text overflows
|
||||||
|
*/
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
9. Create a root stacking context
|
||||||
|
*/
|
||||||
|
#root,
|
||||||
|
#__next {
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue