feat: main Added chakra ui and thing time animation on start screen

Browse Source
This commit is contained in:
Nikolaj Frey 2023-06-26 22:08:05 +10:00
parent a6dee3080c
commit f805c66508
6 changed files with 1618 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/.eslintrc.js
View File

@ -1,3 +1,6 @@
module.exports = { module.exports = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"], extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node']
}; // rules: {
// 'max-len': [2, { code: 70 }]
// }
}

34
app/app/root.tsx
View File

@ -1,4 +1,5 @@
import type { MetaFunction } from "@vercel/remix"; import { ChakraProvider } from "@chakra-ui/react"
import type { MetaFunction } from "@vercel/remix"
import { import {
Links, Links,
LiveReload, LiveReload,
@ -6,29 +7,46 @@ import {
Outlet, Outlet,
Scripts, Scripts,
ScrollRestoration, ScrollRestoration,
} from "@remix-run/react"; } from "@remix-run/react"
import { Analytics } from "@vercel/analytics/react"; import { Analytics } from "@vercel/analytics/react"
export const meta: MetaFunction = () => ({ export const meta: MetaFunction = () => ({
charset: "utf-8", charset: "utf-8",
title: "New Remix App", title: "New Remix App",
viewport: "width=device-width,initial-scale=1", viewport: "width=device-width,initial-scale=1",
}); })
export default function App() { function Document({
children,
title = "App title",
}: {
children: React.ReactNode
title?: string
}) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<Meta /> <Meta />
<title>{title}</title>
<Links /> <Links />
</head> </head>
<body> <body>
<Outlet /> {children}
<ScrollRestoration /> <ScrollRestoration />
<Scripts /> <Scripts />
{/* <LiveReload /> */} <LiveReload />
<Analytics /> <Analytics />
</body> </body>
</html> </html>
); )
}
export default function App() {
return (
<Document>
<ChakraProvider>
<Outlet />
</ChakraProvider>
</Document>
)
} }

63
app/app/routes/index.tsx
View File

@ -1,13 +1,60 @@
import { Box, Flex, Text } from '@chakra-ui/react'
import React from 'react'
export default function Index () { export default function Index () {
const [titleText, setTitleText] = React.useState('tt')
const [started, setStarted] = React.useState(false)
const mainText = 'Thing Time'
// const mainText = "Thingtime"
// const mainText = "thingtime"
React.useEffect(() => {
const interval = setInterval(() => {
if (titleText === 'tt') {
setTitleText('tt.')
} else if (titleText === 'tt.') {
setTitleText('tt..')
} else if (titleText === 'tt..') {
setTitleText('tt...')
} else if (titleText === 'tt...') {
setTitleText(mainText)
} else if (titleText === mainText) {
if (!started) {
setStarted(true)
setTimeout(() => {
setTitleText('tt')
setStarted(false)
}, 15000)
}
}
}, 2000)
return () => clearInterval(interval)
}, [titleText, started])
return ( return (
<> <>
<div>Thing Time</div> <Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
<div style={{ display: 'flex', flexDirection: 'row' }}> <Text
<div> as='h1'
What's up? fontSize='6xl'
</div> fontWeight='bold'
<input style={{ marginLeft: "8px" }}></input> backgroundClip={'text'}
</div> color='transparent'
bgGradient='linear-gradient(to right, #f34a4a, #ffbc48, #58ca70, #47b5e6, #a555e8, #f34a4a);'
backgroundSize='200%'
sx={{
'@keyframes moving-rainbow': {
'0%': { backgroundPosition: '0 0' },
'100%': { backgroundPosition: '200% 0' }
},
animation: 'moving-rainbow 5s infinite linear'
}}
>
{titleText}
</Text>
</Flex>
</> </>
); )
} }

1
app/package.json
View File

@ -6,6 +6,7 @@
"dev": "remix dev" "dev": "remix dev"
}, },
"dependencies": { "dependencies": {
"@chakra-ui/react": "^2.7.1",
"@remix-run/node": "^1.15.0", "@remix-run/node": "^1.15.0",
"@remix-run/react": "^1.15.0", "@remix-run/react": "^1.15.0",
"@remix-run/serve": "^1.15.0", "@remix-run/serve": "^1.15.0",

1557
app/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

10
app/remix.config.js
View File

@ -2,11 +2,11 @@
* @type {import('@remix-run/dev').AppConfig} * @type {import('@remix-run/dev').AppConfig}
*/ */
module.exports = { module.exports = {
ignoredRouteFiles: ['**/.*'], ignoredRouteFiles: ['**/.*']
future: { // future: {
unstable_dev: true, // unstable_dev: true
appServerPort: 3999 // appServerPort: 3999
} // }
// appDirectory: "app", // appDirectory: "app",
// assetsBuildDirectory: "public/build", // assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js", // serverBuildPath: "build/index.js",