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

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

@ -1,13 +1,60 @@
export default function Index() {
import { Box, Flex, Text } from '@chakra-ui/react'
import React from 'react'
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 (
<>
<div>Thing Time</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div>
What's up?
</div>
<input style={{ marginLeft: "8px" }}></input>
</div>
<Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
<Text
as='h1'
fontSize='6xl'
fontWeight='bold'
backgroundClip={'text'}
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"
},
"dependencies": {
"@chakra-ui/react": "^2.7.1",
"@remix-run/node": "^1.15.0",
"@remix-run/react": "^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}
*/
module.exports = {
ignoredRouteFiles: ['**/.*'],
future: {
unstable_dev: true,
appServerPort: 3999
}
ignoredRouteFiles: ['**/.*']
// future: {
// unstable_dev: true
// appServerPort: 3999
// }
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",