feat(login): update layout

kunish · kunish · commit 952b1c987873 · 2023-10-25T21:44:02.000+08:00
diff --git a/src/apis/gql/gql.ts b/src/apis/gql/gql.ts
@@ -93,8 +93,6 @@ const documents = {
     types.DnSsDocument,
   '\n          query User {\n            user {\n              username\n              name\n              avatar\n            }\n          }\n        ':
     types.UserDocument,
-  '\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      ':
-    types.UserDocument,
   '\n      query JsonStorage($paths: [String!]) {\n        jsonStorage(paths: $paths)\n      }\n    ':
     types.JsonStorageDocument,
   '\n      query NumberUsers {\n        numberUsers\n      }\n    ': types.NumberUsersDocument,
@@ -370,12 +368,6 @@ export function graphql(
 export function graphql(
   source: '\n          query User {\n            user {\n              username\n              name\n              avatar\n            }\n          }\n        '
 ): (typeof documents)['\n          query User {\n            user {\n              username\n              name\n              avatar\n            }\n          }\n        ']
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(
-  source: '\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      '
-): (typeof documents)['\n        query User {\n          user {\n            username\n            name\n            avatar\n          }\n        }\n      ']
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -22,7 +22,7 @@ export default function LoginPage() {
   })
 
   return (
-    <div className="mx-auto flex w-full max-w-screen-xl flex-col items-center gap-4 px-4 pt-4 sm:flex-row sm:pt-64">
+    <div className="absolute left-1/2 top-1/2 flex w-full max-w-screen-xl -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-4 px-4 sm:flex-row">
       <div className="flex w-full flex-col items-center sm:w-2/5">
         <div className="overflow-hidden rounded-lg">
           <RiveComponent src="/809-1634-rocket-demo.riv" className="h-64 w-64" />
diff --git a/src/app/(protected)/page.tsx b/src/app/(protected)/page.tsx
@@ -1,29 +1,9 @@
 'use client'
 
-import RiveComponent from '@rive-app/react-canvas'
-import { useQuery } from '@tanstack/react-query'
-import { gql } from 'graphql-request'
 import { useState } from 'react'
-import { UserQuery } from '~/apis/gql/graphql'
 import { Editor } from '~/components/Editor'
-import { useGraphqlClient } from '~/contexts'
 
 export default function HomePage() {
-  const graphqlClient = useGraphqlClient()
-  const userQuery = useQuery<UserQuery>({
-    queryKey: ['user'],
-    queryFn: () =>
-      graphqlClient.request(gql`
-        query User {
-          user {
-            username
-            name
-            avatar
-          }
-        }
-      `)
-  })
-
   const [editorValue, setEditorValue] = useState(
     `
 # Hello world
@@ -34,14 +14,6 @@ this is a test message
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center justify-center gap-2">
-        <RiveComponent src="/3890-8146-moon-scan.riv" className="h-80 w-80" />
-        <RiveComponent src="/569-6666-blue-planet.riv" className="h-80 w-80" />
-      </div>
-
-      <p>Name: {userQuery.data?.user.name}</p>
-      <p>Username: {userQuery.data?.user.username}</p>
-
       <Editor height="20vh" language="markdown" value={editorValue} onChange={(value) => setEditorValue(value || '')} />
     </div>
   )
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -51,7 +51,9 @@ export default async function RootLayout({ children }: { children: ReactNode })
       <body>
         <Providers>
           <Bootstrap>
-            <main className="min-w-sm mx-auto flex h-screen w-full max-w-screen-xl flex-1 flex-col">{children}</main>
+            <main className="min-w-sm relative mx-auto flex h-screen w-full max-w-screen-xl flex-1 flex-col">
+              {children}
+            </main>
           </Bootstrap>
         </Providers>
       </body>
