code split and removes a silly mistake

src/pages/[serverId]/index.tsx

@@ -9,10 +9,10 @@ import useSWRMutation from "swr/mutation";
 import { useRouter } from "next/router";
 import { MiddleEllipsis } from "@ui/MiddleEllipsis";
 import StatusBadge from "@ui/StatusBadge";
-import { SmartModalRef } from "@ui/Modal/SmartModal";
+import { SmartModalRef } from "@ui/modal/SmartModal";
-import CreateClientModal from "@ui/Modal/CreateClientModal";
+import CreateClientModal from "@ui/modal/CreateClientModal";
 import { twMerge } from "tailwind-merge";
-import QRCodeModal from "@ui/Modal/QRCodeModal";
+import QRCodeModal from "@ui/modal/QRCodeModal";
 import { getPeerConf } from "@lib/wireguard-utils";
 import EditableText from "@ui/EditableText";
 import { RLS_NAME_INPUT } from "@lib/form-rules";

src/pages/index.tsx

@@ -3,19 +3,18 @@ import { Button, Card, List } from "antd";
 import BasePage from "@ui/pages/BasePage";
 import { APIResponse, WgServer } from "@lib/typings";
 import { PlusOutlined } from "@ant-design/icons";
-import Image, { ImageProps } from "next/image";
 import Link from "next/link";
 import PageRouter from "@ui/pages/PageRouter";
 import useSWR from "swr";
-import { SmartModalRef } from "@ui/Modal/SmartModal";
+import { SmartModalRef } from "@ui/modal/SmartModal";
-import { twMerge } from "tailwind-merge";
+import CreateServerModal from "@ui/modal/CreateServerModal";
-import CreateServerModal from "@ui/Modal/CreateServerModal";
 import StatusBadge from "@ui/StatusBadge";
 import EditableText from "@ui/EditableText";
 import useSWRMutation from "swr/mutation";
 import { UPDATE_SERVER } from "@lib/swr-fetch";
 import { RLS_NAME_INPUT } from "@lib/form-rules";
 import CopiableWrapper from "@ui/CopiableWrapper";
+import ServerIcon from "@ui/icons/ServerIcon";
 
 export default function Home() {
   const { data, error, isLoading, mutate } = useSWR(
@@ -133,47 +132,3 @@ function ServerListItem(props: ServerListItemProps) {
   )
 }
 
-type ServerIconProps = {
-  type: WgServer['type']
-  className?: string
-}
-
-function ServerIcon(props: ServerIconProps) {
-  return (
-     <div className={twMerge('flex items-start', props.className)}>
-       <div className={'w-fit h-full relative'}>
-         <Image
-            src={'/vps.29373866.svg'}
-            alt={'VPS'}
-            width={40}
-            height={40}
-         />
-         {props.type !== 'direct' && (
-            <div className={'absolute -bottom-1 -right-2 rounded-full bg-white'}>
-              {props.type === 'tor' && (
-                 <Image
-                    src={'/tor-onion.svg'}
-                    alt={'Tor'}
-                    width={20}
-                    height={20}
-                 />
-              )}
-            </div>
-         )}
-       </div>
-     </div>
-  )
-}
-
-export function TorOnion(props: Omit<ImageProps, 'src' | 'alt'>) {
-  return (
-     <Image
-        width={20}
-        height={20}
-        {...props}
-        alt={'Tor'}
-        className={twMerge('inline-block', props.className)}
-        src={'/tor-onion.svg'}
-     />
-  )
-}

src/ui/icons/ServerIcon.tsx

@@ -0,0 +1,36 @@
+import { WgServer } from "@lib/typings";
+import { twMerge } from "tailwind-merge";
+import Image from "next/image";
+import React from "react";
+
+export interface ServerIconProps {
+  type: WgServer['type']
+  className?: string
+}
+
+export default function ServerIcon(props: ServerIconProps) {
+  return (
+     <div className={twMerge('flex items-start', props.className)}>
+       <div className={'w-fit h-full relative'}>
+         <Image
+            src={'/vps.29373866.svg'}
+            alt={'VPS'}
+            width={40}
+            height={40}
+         />
+         {props.type !== 'direct' && (
+            <div className={'absolute -bottom-1 -right-2 rounded-full bg-white'}>
+              {props.type === 'tor' && (
+                 <Image
+                    src={'/tor-onion.svg'}
+                    alt={'Tor'}
+                    width={20}
+                    height={20}
+                 />
+              )}
+            </div>
+         )}
+       </div>
+     </div>
+  )
+}

src/ui/icons/TorOnionIcon.tsx

@@ -0,0 +1,16 @@
+import Image, { ImageProps } from "next/image";
+import { twMerge } from "tailwind-merge";
+import React from "react";
+
+export default function TorOnion(props: Omit<ImageProps, 'src' | 'alt'>) {
+  return (
+     <Image
+        width={20}
+        height={20}
+        {...props}
+        alt={'Tor'}
+        className={twMerge('inline-block', props.className)}
+        src={'/tor-onion.svg'}
+     />
+  )
+}

src/ui/modal/CreateClientModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SmartModal, { SmartModalRef } from "@ui/Modal/SmartModal";
+import SmartModal, { SmartModalRef } from "@ui/modal/SmartModal";
 import { Button, Form, Input, notification } from "antd";
 import { z } from "zod";
 import { APIResponse } from "@lib/typings";
@@ -50,11 +50,7 @@ const CreateClientModal = React.forwardRef<
          props.refreshTrigger()
          notificationApi.success({
            message: 'Success',
-           description: (
+           description: 'Client has been created!'
-              <div>
-                hi
-              </div>
-           )
          })
          innerRef.current?.close()
          form?.resetFields()

src/ui/modal/CreateServerModal.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import SmartModal, { SmartModalRef } from "@ui/Modal/SmartModal";
+import SmartModal, { SmartModalRef } from "@ui/modal/SmartModal";
 import { Button, Form, Input, notification, Segmented } from "antd";
-import { TorOnion } from "@/pages";
 import { z } from "zod";
 import { APIResponse } from "@lib/typings";
 import useSWRMutation from "swr/mutation";
 import { isPrivateIP } from "@lib/utils";
 import { AddressSchema, DnsSchema, MtuSchema, NameSchema, PortSchema, TypeSchema } from "@lib/schemas/WireGuard";
 import { zodErrorMessage } from "@lib/zod";
+import TorOnion from "@ui/icons/TorOnionIcon";
 
 type CreateServerModalProps = {
   refreshTrigger: () => void
@@ -51,11 +51,7 @@ const CreateServerModal = React.forwardRef<
        onSuccess: () => {
          notificationApi.success({
            message: 'Success',
-           description: (
+           description: 'Server has been created!'
-              <div>
-                hi
-              </div>
-           )
          })
          innerRef.current?.close()
          form?.resetFields()

src/ui/modal/QRCodeModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SmartModal, { SmartModalRef } from "@ui/Modal/SmartModal";
+import SmartModal, { SmartModalRef } from "@ui/modal/SmartModal";
 import { QRCodeCanvas } from "qrcode.react";
 import { SHA1 } from "crypto-js";
 

src/ui/pages/PageHeader.tsx

@@ -24,7 +24,7 @@ export default function PageHeader(props: PageHeaderProps) {
               title={'Giv me a star on Github'}
            >
              <img
-                src={'https://img.shields.io/github/stars/shahradelahi/tsetmc-client.svg?style=social&label=Star'}
+                src={'https://img.shields.io/github/stars/shahradelahi/wireadmin.svg?style=social&label=Star'}
                 alt={'Giv me a star on Github'}
              />
            </Link>