From a56f098413131366ccf89db1b6c4f14fb376fbfc Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Fri, 3 Jan 2025 22:34:04 +0800
Subject: [PATCH] :sparkles: Complete user center

---
 src/pages/index.tsx    |  2 +-
 src/pages/users/me.tsx | 36 +++++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ec0ce73..50424bf 100644
--- a/src/pages/index.tsx
+++ b/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.
diff --git a/src/pages/users/me.tsx b/src/pages/users/me.tsx
index ef517c4..93e2ef5 100644
--- a/src/pages/users/me.tsx
+++ b/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>
     </>
   )