refactor ui

2026-01-27 05:12:08 +00:00 · 2024-08-15 14:05:51 +02:00
parent 57c5998435
commit 0ebef3657f
32 changed files with 899 additions and 248 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,9 +1,12 @@
 import "../styles/globals.css"

-import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import type { AppType } from "next/dist/shared/lib/utils"

-import { AuthRedirect } from "@/components"
+import { AuthRedirect, Button } from "@/components"
+import { ModeToggle } from "@/components/mode-toggle"
+import { ThemeProvider } from "@/components/theme-provider"
+import { useLogoutMutation } from "@/services"

 const queryClient = new QueryClient()

@@ -11,10 +14,36 @@ const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <AuthRedirect>
-        <Component {...pageProps} />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          <Component {...pageProps} />
+        </ThemeProvider>
      </AuthRedirect>
    </QueryClientProvider>
  )
 }

+function Header() {
+  const { mutate: logout } = useLogoutMutation()
+  const handleLogout = () => {
+    logout()
+  }
+  return (
+    <header className={"flex justify-between items-center p-4"}>
+      <h1 className={"text-3xl"}>Tasks</h1>
+      <div className={"flex gap-4"}>
+        <ModeToggle />
+        <Button onClick={handleLogout} variant={"outline"}>
+          Logout
+        </Button>
+      </div>
+    </header>
+  )
+}
+
 export default MyApp
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Head, Html, Main, NextScript } from "next/document"
+
+export default function Document() {
+  return (
+    <Html lang="en" className={"bg-zinc-950 h-screen"}>
+      <Head />
+      <body className={"h-full grid grid-rows-[auto_1fr] overflow-hidden"}>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,25 +1,17 @@
-import type { ChangeEvent, FormEvent } from "react"
+import { type ChangeEvent, type FormEvent, useMemo } from "react"
 import { useState } from "react"

 import type { NextPage } from "next"
 import Head from "next/head"

-import { Todolist, Button, FullscreenLoader, Input } from "@/components"
-import {
-  useCreateTodolistMutation,
-  useLogoutMutation,
-  useTodolistsQuery,
-} from "@/services"
+import { Button, FullscreenLoader, Input, Todolist } from "@/components"
+import { useCreateTodolistMutation, useTodolistsQuery } from "@/services"
+import { Plus } from "lucide-react"

 const Home: NextPage = () => {
  const [newTodolistTitle, setNewTodolistTitle] = useState("")
-  const { mutate: logout } = useLogoutMutation()
  const { data: todolists, isLoading: isTodolistsLoading } = useTodolistsQuery()

-  const handleLogout = () => {
-    logout()
-  }
-
  const { mutate: createTodolist } = useCreateTodolistMutation()

  const handleAddTodolist = (e: FormEvent<HTMLFormElement>) => {
@@ -32,6 +24,12 @@ const Home: NextPage = () => {
    setNewTodolistTitle(e.target.value)
  }

+  const renderTodolists = useMemo(() => {
+    return todolists?.map((todolist) => {
+      return <Todolist todolist={todolist} key={todolist.id} />
+    })
+  }, [todolists])
+
  if (isTodolistsLoading) return <FullscreenLoader />

  return (
@@ -41,26 +39,19 @@ const Home: NextPage = () => {
        <meta name="description" content="Incubator todolist" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
-      <header className={"flex justify-between p-4"}>
-        <h1 className={"text-3xl"}>Todolist</h1>
-        <Button onClick={handleLogout}>Logout</Button>
-      </header>
      <main className={"flex flex-col gap-4 p-4"}>
        <form onSubmit={handleAddTodolist} className={"flex items-end gap-2.5"}>
-          <label className={"flex w-52 flex-col gap-0.5"}>
-            new todolist
-            <Input
-              value={newTodolistTitle}
-              onChange={handleNewTodolistTitleChange}
-            />
-          </label>
-          <Button type={"submit"}>+</Button>
+          <Input
+            className={"w-52"}
+            label={"New list"}
+            value={newTodolistTitle}
+            onChange={handleNewTodolistTitleChange}
+          />
+          <Button type={"submit"} variant={"outline"} size={"icon"}>
+            <Plus size={16} />
+          </Button>
        </form>
-        <div className={"flex flex-wrap gap-4"}>
-          {todolists?.map((todolist) => {
-            return <Todolist todolist={todolist} key={todolist.id} />
-          })}
-        </div>
+        <div className={"flex flex-wrap gap-4"}>{renderTodolists}</div>
      </main>
    </>
  )
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react"
 import type { NextPage } from "next"

 import { Button, Input } from "@/components"
+import { Label } from "@/components/ui/label"
 import { useLoginMutation } from "@/services"

 const Login: NextPage = () => {
@@ -34,30 +35,30 @@ const Login: NextPage = () => {
  }

  return (
-    <div className={"flex h-screen items-center justify-center"}>
+    <div className={"flex h-full items-center justify-center"}>
      <div className={"flex w-52 flex-col gap-3"}>
-        <label className={"flex flex-col gap-1"}>
-          Email
-          <Input value={email} onChange={handleEmailChange} type="email" />
-        </label>
+        <Input
+          value={email}
+          onChange={handleEmailChange}
+          type="email"
+          label={"Email"}
+        />

-        <label className={"flex flex-col gap-1"}>
-          Password
-          <Input
-            type="password"
-            value={password}
-            onChange={handlePasswordChange}
-          />
-        </label>
+        <Input
+          type="password"
+          label={"Password"}
+          value={password}
+          onChange={handlePasswordChange}
+        />

-        <label className={"flex items-center gap-2"}>
+        <Label className={"flex items-center gap-2"}>
          <input
            type={"checkbox"}
            checked={remember}
            onChange={handleRememberChange}
          />
          Remember me
-        </label>
+        </Label>
        <Button className={"w-full"} onClick={handleSubmit}>
          Login
        </Button>