✨ Complete user center

src/pages/index.tsx

@@ -3,7 +3,7 @@ import { Container, Typography } from '@mui/material'
 export default function Home() {
   return (
     <main>
-      <Container sx={{ mt: 5 }}>
+      <Container sx={{ pt: 5 }}>
         <Typography variant="h3" component="h1">
           Welcome to <br />
           the Solsynth Capital.

src/pages/users/me.tsx

@@ -1,10 +1,15 @@
 import { checkAuthenticatedClient, redirectToLogin } from '@/services/auth'
 import { useUserStore } from '@/services/user'
-import { Avatar, Box, Container, Typography } from '@mui/material'
+import { Avatar, Box, Button, Container, Typography } from '@mui/material'
 import { getAttachmentUrl } from '@/services/network'
 import { useEffect } from 'react'
 import Image from 'next/image'
 
+import LogoutIcon from '@mui/icons-material/Logout'
+import LaunchIcon from '@mui/icons-material/Launch'
+import Link from 'next/link'
+import { deleteCookie } from 'cookies-next/client'
+
 export default function UserItself() {
   useEffect(() => {
     if (!checkAuthenticatedClient()) redirectToLogin()
@@ -12,6 +17,12 @@ export default function UserItself() {
 
   const userStore = useUserStore()
 
+  function logout() {
+    deleteCookie('nex_user_atk')
+    deleteCookie('nex_user_rtk')
+    window.location.reload()
+  }
+
   return (
     <>
       {userStore.account?.banner && (
@@ -24,6 +35,29 @@ export default function UserItself() {
         <Typography variant="h5" component="h1">
           Your Solarpass
         </Typography>
+
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
+          <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} lineHeight={1.2}>
+                @{userStore.account?.name}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box sx={{ mt: 3, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+          <Link passHref href="https://sn.solsynth.dev/account" target="_blank">
+            <Button variant="contained" color="primary" startIcon={<LaunchIcon />}>
+              Open in Solian
+            </Button>
+          </Link>
+          <Button variant="contained" color="error" startIcon={<LogoutIcon />} onClick={logout}>
+            Logout
+          </Button>
+        </Box>
       </Container>
     </>
   )