fix(style): 调整布局

besscroft · Apr 3, 2024 · ccf101a · ccf101a
1 parent 40b6707
commit ccf101a
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 31 deletions.
diff --git a/app/api/login/route.ts b/app/api/login/route.ts
@@ -0,0 +1,8 @@
+import 'server-only'
+import { NextRequest } from 'next/server'
+
+export async function POST(request: NextRequest) {
+    const res = await request.json()
+    console.log(res)
+    return Response.json(res)
+}
diff --git a/app/api/route.ts b/app/api/route.ts
@@ -1,4 +1,6 @@
+import 'server-only'
+
 export async function GET() {
 
-    return Response.json('666')
+    return Response.json('hello')
 }
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -5,8 +5,12 @@ import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, Navba
 import { IconSvgProps } from '~/types';
 import { ThemeSwitch } from '~/components/DarkToggle';
 import VaulDrawer from '~/components/VaulDrawer';
+import Logo from '~/components/Logo';
+import { useBreakpoints } from '~/utils/useBreakpoints';
 
 export default function Header() {
+    const { smAndLarger } = useBreakpoints();
+
     const GithubIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
         return (
             <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
@@ -22,7 +26,7 @@ export default function Header() {
     return (
         <Navbar>
             <NavbarBrand>
-
+                <Logo />
             </NavbarBrand>
             <NavbarContent className="hidden sm:flex gap-4 select-none" justify="center">
                 <NavbarItem>
@@ -48,10 +52,8 @@ export default function Header() {
                     </Link>
                 </NavbarItem>
                 <NavbarItem className="flex h-full items-center">
-                    <ThemeSwitch/>
-                    {/*<div className="md:invisible">*/}
-                    {/*    <VaulDrawer/>*/}
-                    {/*</div>*/}
+                    { smAndLarger && <ThemeSwitch/> }
+                    { !smAndLarger && <VaulDrawer/> }
                 </NavbarItem>
             </NavbarContent>
         </Navbar>

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -0,0 +1,13 @@
+import Image from 'next/image'
+import favicon from '~/public/favicon.svg'
+
+export default function Logo() {
+    return (
+        <Image
+            src={favicon}
+            alt="Picture of the author"
+            width={36}
+            height={36}
+        />
+    );
+}
diff --git a/components/VaulDrawer.tsx b/components/VaulDrawer.tsx
@@ -3,12 +3,42 @@ import { Drawer } from 'vaul';
 export default function VaulDrawer() {
     return (
         <Drawer.Root>
-            <Drawer.Trigger>Open</Drawer.Trigger>
+            <Drawer.Trigger>菜单</Drawer.Trigger>
             <Drawer.Portal>
-                <Drawer.Content>
-                    <p>Content</p>
+                <Drawer.Overlay className="fixed inset-0 bg-black/40" />
+                <Drawer.Content className="bg-zinc-100 flex flex-col rounded-t-[10px] h-[88%] mt-24 fixed bottom-0 left-0 right-0">
+                    <div className="p-4 bg-white rounded-t-[10px] flex-1">
+                        <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-zinc-300 mb-8" />
+                        内容
+                    </div>
+                    <div className="p-4 bg-zinc-100 border-t border-zinc-200 mt-auto">
+                        <div className="flex gap-6 justify-end max-w-md mx-auto">
+                            <a
+                                className="text-xs text-zinc-600 flex items-center gap-0.25"
+                                href="https://github.com/besscroft"
+                                target="_blank"
+                            >
+                                GitHub
+                                <svg
+                                    fill="none"
+                                    height="16"
+                                    stroke="currentColor"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    viewBox="0 0 24 24"
+                                    width="16"
+                                    aria-hidden="true"
+                                    className="w-3 h-3 ml-1"
+                                >
+                                    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
+                                    <path d="M15 3h6v6"></path>
+                                    <path d="M10 14L21 3"></path>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
                 </Drawer.Content>
-                <Drawer.Overlay />
             </Drawer.Portal>
         </Drawer.Root>
     );

diff --git a/constants/index.ts b/constants/index.ts
diff --git a/constants/photos.json b/constants/photos.json
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
     "next-themes": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive": "^10.0.0",
     "server-only": "^0.0.1",
+    "swr": "^2.2.5",
     "vaul": "^0.9.0"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml