update: setup layouts and basic ui

.eslintrc.json

@@ -24,6 +24,13 @@
     "prefer-spread": "error",
     "prefer-template": "error",
     "radix": ["error", "always"],
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    "@typescript-eslint/no-confusing-void-expression":"off"
   }
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "tauri-nextjs-template",
-  "version": "0.1.0",
+  "name": "cstb-next",
+  "version": "0.0.1",
   "private": true,
   "author": {
-    "name": "Your Name Here",
-    "email": "your-email-here@example.com"
+    "name": "Purp1e",
+    "email": "zx8244@qq.com"
   },
   "scripts": {
     "next-start": "cross-env BROWSER=none next dev",
@@ -27,7 +27,6 @@
     "@tauri-apps/plugin-os": "2.0.0-rc.1",
     "@tauri-apps/plugin-process": "2.0.0-rc.1",
     "@tauri-apps/plugin-shell": "2.0.0-rc.1",
-    "clsx": "^2.1.1",
     "next": "^14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -46,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.6.0",
     "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
     "eslint": "^8.57.1",
@@ -55,11 +55,16 @@
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.12",
     "typescript": "^5.6.2"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

pnpm-lock.yaml

@@ -41,9 +41,6 @@ importers:
       '@tauri-apps/plugin-shell':
         specifier: 2.0.0-rc.1
         version: 2.0.0-rc.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
       next:
         specifier: ^14.2.13
         version: 14.2.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -93,6 +90,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
@@ -120,6 +120,9 @@ importers:
       postcss-nesting:
         specifier: ^13.0.0
         version: 13.0.0(postcss@8.4.47)
+      tailwind-merge:
+        specifier: ^2.5.2
+        version: 2.5.2
       tailwindcss:
         specifier: ^3.4.12
         version: 3.4.12
@@ -174,28 +177,24 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@biomejs/cli-linux-arm64@1.9.2':
     resolution: {integrity: sha512-T8TJuSxuBDeQCQzxZu2o3OU4eyLumTofhCxxFd3+aH2AEWVMnH7Z/c3QP1lHI5RRMBP9xIJeMORqDQ5j+gVZzw==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@biomejs/cli-linux-x64-musl@1.9.2':
     resolution: {integrity: sha512-CjPM6jT1miV5pry9C7qv8YJk0FIZvZd86QRD3atvDgfgeh9WQU0k2Aoo0xUcPdTnoz0WNwRtDicHxwik63MmSg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@biomejs/cli-linux-x64@1.9.2':
     resolution: {integrity: sha512-T0cPk3C3Jr2pVlsuQVTBqk2qPjTm8cYcTD9p/wmR9MeVqui1C/xTVfOIwd3miRODFMrJaVQ8MYSXnVIhV9jTjg==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@biomejs/cli-win32-arm64@1.9.2':
     resolution: {integrity: sha512-2x7gSty75bNIeD23ZRPXyox6Z/V0M71ObeJtvQBhi1fgrvPdtkEuw7/0wEHg6buNCubzOFuN9WYJm6FKoUHfhg==}
@@ -316,28 +315,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@14.2.13':
     resolution: {integrity: sha512-v5jZ/FV/eHGoWhMKYrsAweQ7CWb8xsWGM/8m1mwwZQ/sutJjoFaXchwK4pX8NqwImILEvQmZWyb8pPTcP7htWg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-linux-x64-gnu@14.2.13':
     resolution: {integrity: sha512-aVc7m4YL7ViiRv7SOXK3RplXzOEe/qQzRA5R2vpXboHABs3w8vtFslGTz+5tKiQzWUmTmBNVW0UQdhkKRORmGA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@next/swc-linux-x64-musl@14.2.13':
     resolution: {integrity: sha512-4wWY7/OsSaJOOKvMsu1Teylku7vKyTuocvDLTZQq0TYv9OjiYYWt63PiE1nTuZnqQ4RPvME7Xai+9enoiN0Wrg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@14.2.13':
     resolution: {integrity: sha512-uP1XkqCqV2NVH9+g2sC7qIw+w2tRbcMiXFEbMihkQ8B1+V6m28sshBwAB0SDmOe0u44ne1vFU66+gx/28RsBVQ==}
@@ -418,28 +413,24 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tauri-apps/cli-linux-arm64-musl@2.0.0-rc.16':
     resolution: {integrity: sha512-SNEDcB+sWOls/B0a+UpUHVa/oegvlXXKYWsTxuXtgWIr5VbWG7rXLZ3fZpLLP3SpRVGTGTnABcyqshFbWSqqKQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tauri-apps/cli-linux-x64-gnu@2.0.0-rc.16':
     resolution: {integrity: sha512-Zsq29MM1ooeH1+chQBa7ffDFnzAZebBBFdsvs4e05tS1H8gn4oKE+PSMn9p/okzVXykEk9ri2/n7BG1XFeifMA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tauri-apps/cli-linux-x64-musl@2.0.0-rc.16':
     resolution: {integrity: sha512-g+pwSuis2YMxhJJ/pJYwp/Nps5CWvlv/5MV5UfDvClkCkeAyzIqVX+HbBLPcs5S0CePUQNeP0j4d4jBWUqZZQg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tauri-apps/cli-win32-arm64-msvc@2.0.0-rc.16':
     resolution: {integrity: sha512-PpPqdMTwJSDAK4KnNjvh77ShSkY+7pih1f6e50EtXar8bjC17e3XcEqFhDNne5mxEVTLYhibs6p1JLPad0ZjRA==}
@@ -2349,6 +2340,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwind-merge@2.5.2:
+    resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==}
+
   tailwindcss@3.4.12:
     resolution: {integrity: sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==}
     engines: {node: '>=14.0.0'}
@@ -4901,6 +4895,8 @@ snapshots:
       csso: 5.0.5
       picocolors: 1.1.0
 
+  tailwind-merge@2.5.2: {}
+
   tailwindcss@3.4.12:
     dependencies:
       '@alloc/quick-lru': 5.2.0

src/app/(main)/console/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Console</div>;
+}

src/app/(main)/gear/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Gear</div>;
+}

src/app/(main)/home/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import Notice from "@/components/cstb/Notice";
+
+const Home = () => {
+  return (
+    <section>
+      <Notice />
+    </section>
+  );
+};
+
+export default Home;

src/app/(main)/layout.tsx

@@ -0,0 +1,25 @@
+import Header from "@/components/window/Header";
+import Nav from "@/components/window/Nav";
+import SideBar from "@/components/window/SideBar";
+
+export default function BaseLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="bg-[#f1f0f2] h-screen w-full">
+      <Nav />
+
+      <div className="flex flex-col w-full h-full">
+        <SideBar />
+
+        <main className="pb-5 pr-5 ml-20">
+          <Header />
+
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

src/app/(main)/movie/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Movie</div>;
+}

src/app/(main)/preference/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Preference</div>;
+}

src/app/(main)/tool/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Tool</div>;
+}

src/app/globals.css

@@ -6,6 +6,8 @@ html,
 body {
   padding: 0;
   margin: 0;
+  width: 100%;
+  height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
     Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background: transparent;

src/app/layout.tsx

@@ -0,0 +1,19 @@
+export const metadata = {
+  title: "CS工具箱",
+  description: "Generated by Next.js",
+  icons: ["/favicon.ico"],
+};
+
+import "./globals.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+const Home = () => {
+  const router = useRouter();
+  return (
+    <main className="bg-[#f1f0f2] h-screen w-full flex flex-col gap-6 items-center justify-center">
+      <h1 className="text-4xl font-bold text-zinc-800">CS 工具箱</h1>
+      <button
+        onClick={() => router.push("/home")}
+        className="px-4 py-1 rounded bg-zinc-200"
+      >
+        进入
+      </button>
+    </main>
+  );
+};
+
+export default Home;

src/app/test/page.tsx

@@ -1,39 +1,30 @@
-import { Card } from "@/components/Card"
-import { CardButton } from "@/components/CardButton"
-import { useGlobalShortcut } from "@/hooks/tauri/shortcuts"
-import { invoke } from "@tauri-apps/api/core"
-import type { NextPage } from "next"
-import Head from "next/head"
-import Image from "next/image"
-import { useCallback, useState } from "react"
+"use client"
+import { CardButton } from "@/components/test/CardButton";
+import { useGlobalShortcut } from "@/hooks/tauri/shortcuts";
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useState } from "react";
 
-const Home: NextPage = () => {
+export default function Page() {
   const [buttonDesc, setButtonDesc] = useState<string>(
-    "Waiting to be clicked. This calls 'on_button_clicked' from Rust.",
-  )
+    "Waiting to be clicked. This calls 'on_button_clicked' from Rust."
+  );
   const onButtonClick = () => {
     invoke<string>("on_button_clicked")
       .then((value) => {
-        setButtonDesc(value)
+        setButtonDesc(value);
       })
       .catch(() => {
-        setButtonDesc("Failed to invoke Rust command 'on_button_clicked'")
-      })
-  }
+        setButtonDesc("Failed to invoke Rust command 'on_button_clicked'");
+      });
+  };
 
   const shortcutHandler = useCallback(() => {
-    console.log("Ctrl+P was pressed!")
-  }, [])
-  useGlobalShortcut("CommandOrControl+P", shortcutHandler)
+    console.log("Ctrl+P was pressed!");
+  }, []);
+  useGlobalShortcut("CommandOrControl+P", shortcutHandler);
 
   return (
-    <div className="flex flex-col ">
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
+    <div className="flex flex-col">
       <main className="flex flex-col items-center justify-center flex-1 py-8">
         <h1 className="m-0 text-6xl text-center">
           Welcome to{" "}
@@ -62,10 +53,6 @@ const Home: NextPage = () => {
           />
         </div>
       </main>
-
-      
     </div>
-  )
+  );
 }
-
-export default Home

src/components/cstb/CommonDir.tsx

@@ -0,0 +1,5 @@
+const CommonDir = () => {
+  return <div>CommonDir</div>;
+};
+
+export default CommonDir;

src/components/cstb/FastLaunch.tsx

@@ -0,0 +1,5 @@
+const FastLaunch = () => {
+  return <div>FastLaunch</div>;
+};
+
+export default FastLaunch;

src/components/cstb/LaunchOption.tsx

@@ -0,0 +1,5 @@
+const LaunchOption = () => {
+  return <div>LaunchOption</div>;
+};
+
+export default LaunchOption;

src/components/cstb/Notice.tsx

@@ -0,0 +1,26 @@
+import { VolumeNotice } from "@icon-park/react";
+import {
+  CardHeader,
+  CardIcon,
+  CardTool,
+  CardBody,
+  Card,
+} from "@/components/window/Card";
+
+const Notice = () => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardIcon>
+          <VolumeNotice /> 公告
+        </CardIcon>
+        <CardTool>
+          <p>2021年10月16日</p>
+        </CardTool>
+      </CardHeader>
+      <CardBody>不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl</CardBody>
+    </Card>
+  );
+};
+
+export default Notice;

src/components/cstb/PowerPlan.tsx

@@ -0,0 +1,5 @@
+const PowerPlan = () => {
+  return <div>PowerPlan</div>;
+};
+
+export default PowerPlan;

src/components/cstb/SmartTranser.tsx

@@ -0,0 +1,5 @@
+const SmartTransfer = () => {
+  return <div>SmartTransfer</div>;
+};
+
+export default SmartTransfer;

src/components/test/Card.tsx

@@ -13,7 +13,7 @@ export const Card: React.FC<CardProps> = ({
     href={url}
     target="_blank"
     rel="noopener noreferrer"
-    className="m-4 max-w-xs rounded-xl border border-gray-200 p-6 text-left text-inherit transition-colors hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
+    className="max-w-xs p-6 m-4 text-left transition-colors border border-gray-200 rounded-xl text-inherit hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
   >
     <h2 className="mb-4 text-2xl">{title} &rarr;</h2>
     <p className="m-0 text-xl">{description}</p>

src/components/window/Card.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+}
+
+const Card = ({ children }: CardProps) => {
+  return (
+    <div
+      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
+      data-tauri-drag-region
+    >
+      {children}
+    </div>
+  );
+};
+
+const CardHeader = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+  );
+};
+
+const CardIcon = ({ children }: CardProps) => {
+  return (
+    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
+  );
+};
+
+const CardTool = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center justify-end flex-grow gap-2">
+      {children}
+    </div>
+  );
+};
+
+const CardBody = ({ children }: CardProps) => {
+  return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
+};
+
+export { Card, CardHeader, CardIcon, CardTool, CardBody };

src/components/window/Header.tsx

@@ -0,0 +1,14 @@
+const Header = () => {
+  return (
+    <div className="pt-6 select-none pb-9" data-tauri-drag-region>
+      <h1 className="text-xl font-medium tracking-wide w-fit">
+        Faze.Rop紫本人
+      </h1>
+      <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
+        本周使用CSGO工具箱 62小时
+      </p>
+    </div>
+  );
+};
+
+export default Header;

src/components/window/Nav.tsx

@@ -0,0 +1,67 @@
+"use client"
+import { RocketOne, Minus, Close, Square } from "@icon-park/react";
+import { relaunch, exit } from "@tauri-apps/plugin-process";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+// import { invoke } from "@tauri-apps/api/core";
+
+const Nav = () => {
+  const close = async () => {
+    // (await window.hideOnClose) ? getCurrent().hide() : exit();
+    await exit();
+  };
+
+  const minimize = () => {
+    getCurrentWindow()
+      .minimize()
+      .then(() => {
+        console.log("minimized");
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+      });
+  };
+
+  const toggleMaximize = async () => {
+    const current = getCurrentWindow()
+    const maximized = await current.isMaximized()
+    maximized ? current.unmaximize() : current.maximize()
+  }
+
+  const reset = async () => {
+    await relaunch();
+  };
+
+  return (
+    <nav
+      className="absolute top-0 right-0 flex flex-row h-16 gap-0.5 p-4"
+      data-tauri-drag-region
+    >
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={reset}
+      >
+        <RocketOne size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={minimize}
+      >
+        <Minus size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={toggleMaximize}
+      >
+        <Square size={16} />
+      </button>
+      <button
+        className="px-2 py-0 transition rounded hover:bg-zinc-200/80 active:scale-95"
+        onClick={close}
+      >
+        <Close size={16} />
+      </button>
+    </nav>
+  );
+};
+
+export default Nav;

src/components/window/SideBar.tsx

@@ -0,0 +1,90 @@
+"use client"
+import { ReactNode } from "react";
+import clsx from "clsx";
+import {
+  Home,
+  MonitorOne,
+  Movie,
+  Setting,
+  Terminal,
+  Toolkit,
+} from "@icon-park/react";
+import { useRouter } from "next/navigation";
+
+interface SideButtonProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      className={clsx(
+        className,
+        "p-2.5 hover:bg-black/5 rounded-lg transition"
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+const Avatar = () => {
+  const router = useRouter();
+
+  return (
+    <div onClick={() => router.push('/test')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
+      <img src="favicon.ico" alt="avatar" draggable={false} />
+    </div>
+  );
+};
+
+const SideBar = () => {
+  const router = useRouter();
+
+  return (
+    <div
+      className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
+      data-tauri-drag-region
+    >
+      <section className="mx-auto">
+        <Avatar />
+      </section>
+
+      <section
+        className="flex flex-col items-center justify-center h-full gap-5"
+        data-tauri-drag-region
+      >
+        <SideButton onClick={() => router.push("/home")}>
+          <Home size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/tool")}>
+          <Toolkit size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/console")}>
+          <Terminal size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/gear")}>
+          <MonitorOne size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/movie")}>
+          <Movie size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/preference")}>
+          <Setting size={24} />
+        </SideButton>
+      </section>
+
+      <div
+        className="mx-auto text-sm text-center text-zinc-500"
+        data-tauri-drag-region
+      >
+        <p>版本号</p>
+        <p>0.0.1</p>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,9 +20,25 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
-    }
+      "@/*": [
+        "src/*"
+      ]
     },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "*.js"],
-  "exclude": ["node_modules", "src-tauri"]
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "*.js",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "src-tauri"
+  ]
 }