add interface component

web/app/network/page.tsx

@@ -1,15 +1,22 @@
 import { IpMode } from "@/components/ip-mode";
 import { Proxy } from "@/components/proxy";
 import { WebHook } from "@/components/webhook";
+import { Resolver } from "@/components/resolver";
+import { IPInterface } from "@/components/ip-interface";
 
 export default function Network() {
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-between pt-10 max-w-screen-xl">
-			<div className="p-10">
+			<div className="p-5">
 				<div className="flex flex-col max-w-screen-lg gap-5">
 					<IpMode />
 					<Proxy />
 					<WebHook />
+					<Resolver />
+					<IPInterface />
+					<div className="flex justify-center">
+						<button className="flex btn btn-primary">Save</button>
+					</div>
 				</div>
 			</div>
 		</main>

web/components/icons.tsx

@@ -98,6 +98,13 @@ export const MoonFilledIcon = ({
 	</svg>
 );
 
+export const InterfaceIcon = ({
+}) => (
+	<svg className="w-6 h-6 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+		<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 4h4m0 0v4m0-4-5 5M8 20H4m0 0v-4m0 4 5-5" />
+	</svg>
+);
+
 export const SunFilledIcon = ({
 	size = 24,
 	width,

web/components/ip-interface.tsx

@@ -0,0 +1,20 @@
+import { InterfaceIcon } from "./icons";
+
+export const IPInterface = () => {
+	return (
+		<div className="stats shadow bg-primary-content stats-vertical lg:stats-horizontal">
+			<div className="stat gap-2">
+				<div className="stat-title">IP Inerface</div>
+				<div className="flex flex-col gap-3">
+					<div className="flex flex-row items-center justify-start gap-2">
+						<span className="label-text text-slate-500 ">Set the network interface</span>
+						<div className="flex flex-grow justify-end text-secondary">
+							<InterfaceIcon />
+						</div>
+					</div>
+					<input type="text" className="input input-primary w-full input-disabled" placeholder="Input DNS resolver: e.g. 8.8.8.8" />
+				</div>
+			</div>
+		</div>
+	)
+}

web/components/ip-mode.tsx

@@ -20,9 +20,6 @@ export const IpMode = () => {
 				<div className="stat-title">URLs</div>
 				<div className="flex flex-col gap-2">
 					<textarea className="textarea textarea-primary w-96 h-28 " placeholder="Input urls for fetching the online IP"></textarea>
-					<div className="flex justify-end">
-						<button className="flex justify-end btn btn-sm btn-primary">Save</button>
-					</div>
 				</div>
 			</div>
 		</div>

web/components/proxy.tsx

@@ -16,9 +16,6 @@ export const Proxy = () => {
 					</div>
 
 					<input type="text" className="input input-primary w-full input-disabled" placeholder="Input Proxy: e.g. 127.0.0.1:8080"></input>
-					<div className="flex justify-end">
-						<button className="flex justify-end btn btn-sm btn-primary">Save</button>
-					</div>
 				</div>
 			</div>
 		</div>

web/components/resolver.tsx

@@ -0,0 +1,20 @@
+import { DBIcon } from "./icons";
+
+export const Resolver = () => {
+	return (
+		<div className="stats shadow bg-primary-content stats-vertical lg:stats-horizontal">
+			<div className="stat gap-2">
+				<div className="stat-title">Resolver</div>
+				<div className="flex flex-col gap-3">
+					<div className="flex flex-row items-center justify-start gap-2">
+						<span className="label-text text-slate-500 ">Set the DNS resolver</span>
+						<div className="flex flex-grow justify-end text-secondary">
+							<DBIcon />
+						</div>
+					</div>
+					<input type="text" className="input input-primary w-full input-disabled" placeholder="Input DNS resolver: e.g. 8.8.8.8" />
+				</div>
+			</div>
+		</div>
+	)
+}

web/components/webhook.tsx

@@ -13,9 +13,6 @@ export const WebHook = () => {
 						</div>
 					</div>
 					<textarea className="textarea textarea-primary w-full h-28" placeholder="Input request body"></textarea>
-					<div className="flex justify-end">
-						<button className="flex justify-end btn btn-sm btn-primary">Save</button>
-					</div>
 				</div>
 			</div>
 		</div>