⚡ Add optimization for nextjs
This commit is contained in:
parent
799fa2e475
commit
4c5236de41
@ -9,10 +9,13 @@
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/cache": "^11.14.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/server": "^11.11.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.3.0",
|
||||
"@mui/material": "^6.3.0",
|
||||
"@mui/material-nextjs": "^6.3.1",
|
||||
"@mui/x-charts": "^7.23.2",
|
||||
"axios": "^1.7.9",
|
||||
"axios-case-converter": "^1.1.1",
|
||||
|
||||
@ -1,17 +1,59 @@
|
||||
import { useUserStore } from '@/services/user'
|
||||
import { AppBar, Avatar, Box, IconButton, Toolbar, Typography, useTheme } from '@mui/material'
|
||||
import {
|
||||
AppBar,
|
||||
AppBarProps,
|
||||
Avatar,
|
||||
createTheme,
|
||||
IconButton,
|
||||
ThemeProvider,
|
||||
Toolbar,
|
||||
Typography,
|
||||
useScrollTrigger,
|
||||
useTheme,
|
||||
} from '@mui/material'
|
||||
import { getAttachmentUrl } from '@/services/network'
|
||||
import MenuIcon from '@mui/icons-material/Menu'
|
||||
import AccountCircle from '@mui/icons-material/AccountCircle'
|
||||
import Link from 'next/link'
|
||||
import { getAttachmentUrl } from '@/services/network'
|
||||
import React from 'react'
|
||||
|
||||
interface ElevationAppBarProps {
|
||||
elevation?: number
|
||||
color?: any
|
||||
children?: React.ReactElement<{ elevation?: number } & AppBarProps>
|
||||
}
|
||||
|
||||
function ElevationScroll(props: ElevationAppBarProps) {
|
||||
if (typeof window === 'undefined') return props.children
|
||||
|
||||
const trigger = useScrollTrigger({
|
||||
disableHysteresis: true,
|
||||
threshold: 0,
|
||||
target: window,
|
||||
})
|
||||
|
||||
const commonStyle = {
|
||||
transition: 'all',
|
||||
transitionDuration: '300ms',
|
||||
}
|
||||
|
||||
return props.children
|
||||
? React.cloneElement(props.children, {
|
||||
elevation: trigger ? props.elevation : 0,
|
||||
sx: trigger
|
||||
? { backgroundColor: props.color, ...commonStyle }
|
||||
: { backgroundColor: 'transparent', ...commonStyle },
|
||||
})
|
||||
: null
|
||||
}
|
||||
|
||||
export function CapAppBar() {
|
||||
const userStore = useUserStore()
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<AppBar position="absolute" elevation={0} color={'transparent'}>
|
||||
<ElevationScroll elevation={2} color="white">
|
||||
<AppBar position="sticky" elevation={0} color="transparent">
|
||||
<Toolbar>
|
||||
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
|
||||
<MenuIcon />
|
||||
@ -41,6 +83,6 @@ export function CapAppBar() {
|
||||
</Link>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</Box>
|
||||
</ElevationScroll>
|
||||
)
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ const fontRoboto = Roboto({
|
||||
})
|
||||
|
||||
const siteTheme = createTheme({
|
||||
cssVariables: true,
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
@ -43,7 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
|
||||
<CssBaseline />
|
||||
|
||||
<CapAppBar />
|
||||
<Box sx={{ height: '100vh' }}>
|
||||
<Box sx={{ height: 'calc(100vh - 64px)' }}>
|
||||
<Component {...pageProps} />
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
import { Html, Head, Main, NextScript } from 'next/document'
|
||||
import {
|
||||
AppCacheProvider,
|
||||
DocumentHeadTags,
|
||||
DocumentHeadTagsProps,
|
||||
documentGetInitialProps,
|
||||
} from '@mui/material-nextjs/v15-pagesRouter'
|
||||
import { Html, Head, Main, NextScript, DocumentContext, DocumentProps } from 'next/document'
|
||||
|
||||
export default function Document() {
|
||||
export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="antialiased">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
<AppCacheProvider {...props}>
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<DocumentHeadTags {...props} />
|
||||
</Head>
|
||||
<body className="antialiased">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
</AppCacheProvider>
|
||||
)
|
||||
}
|
||||
|
||||
Document.getInitialProps = async (ctx: DocumentContext) => {
|
||||
const finalProps = await documentGetInitialProps(ctx)
|
||||
return finalProps
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { Container, Typography } from '@mui/material'
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Container sx={{ mt: 12 }}>
|
||||
<Container sx={{ mt: 5 }}>
|
||||
<Typography variant="h3" component="h1">
|
||||
Welcome to <br />
|
||||
the Solsynth Capital.
|
||||
|
||||
@ -98,25 +98,27 @@ export default function UserProfile({ user, checkIn }: InferGetServerSidePropsTy
|
||||
order={{ xs: -1, sm: -1, md: 1 }}
|
||||
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
|
||||
>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Badges
|
||||
</Typography>
|
||||
{user.badges && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Badges
|
||||
</Typography>
|
||||
|
||||
<Box display="flex" flexDirection="column" gap={0.5}>
|
||||
{user.badges.map((b) => (
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'start' }}>
|
||||
{SnAccountBadgeMapping[b.type].icon}
|
||||
<Box>
|
||||
<Typography variant="body2">{SnAccountBadgeMapping[b.type].name}</Typography>
|
||||
{b.metadata.title && <Typography variant="subtitle2">{b.metadata.title}</Typography>}
|
||||
<Box display="flex" flexDirection="column" gap={0.5}>
|
||||
{user.badges.map((b) => (
|
||||
<Box sx={{ display: 'flex', gap: 2, alignItems: 'start' }}>
|
||||
{SnAccountBadgeMapping[b.type].icon}
|
||||
<Box>
|
||||
<Typography variant="body2">{SnAccountBadgeMapping[b.type].name}</Typography>
|
||||
{b.metadata.title && <Typography variant="subtitle2">{b.metadata.title}</Typography>}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
|
||||
@ -14,26 +14,16 @@ export default function UserItself() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{userStore.account && (
|
||||
{userStore.account?.banner && (
|
||||
<Box sx={{ aspectRatio: 16 / 5, position: 'relative' }}>
|
||||
<Image src={getAttachmentUrl(userStore.account!.banner)} alt="account banner" objectFit="cover" fill />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Container sx={{ mt: 5 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
{userStore.account && <Avatar src={getAttachmentUrl(userStore.account!.avatar)} />}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography fontWeight="bold">{userStore.account?.nick}</Typography>
|
||||
<Typography fontFamily="monospace" fontSize={13}>
|
||||
@{userStore.account?.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 5 }}></Box>
|
||||
<Container sx={{ mt: 4, px: 2 }}>
|
||||
<Typography variant="h5" component="h1">
|
||||
Your Solarpass
|
||||
</Typography>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user