add style for proxy list

zhanglun · May 23, 2024 · beb4273 · beb4273
1 parent 0915252
commit beb4273
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/src/layout/Setting/Proxy/index.tsx b/src/layout/Setting/Proxy/index.tsx
@@ -1,11 +1,29 @@
-import { Button, Switch } from "@radix-ui/themes";
+import { Button, IconButton, Switch } from "@radix-ui/themes";
 import { Panel, PanelSection } from "../Panel";
-import { PlusCircle } from "lucide-react";
+import { Edit, Trash2 } from "lucide-react";
 import { ProxyModal } from "./ProxyModal";
 import { useEffect, useState } from "react";
 import { request } from "@/helpers/request";
 import { useModal } from "@/components/Modal/useModal";
 
+export const ProxyItem = ({ proxy }) => {
+  return (
+    <div className="flex justify-between items-center p-4 border my-2 rounded hover:bg-[var(--gray-2)]">
+      <div>
+        {proxy.protocol || "sock5"}://{proxy.server}:{proxy.port}
+      </div>
+      <div className="flex items-center flex-row gap-3">
+        <IconButton size="2" variant="ghost" color="gray" className="text-[var(--gray-12)]">
+          <Edit size="16" strokeWidth={1.5} />
+        </IconButton>
+        <IconButton size="2" variant="ghost" color="gray" className="text-[var(--gray-12)]">
+          <Trash2 size="16" strokeWidth={1.5} />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
+
 export const ProxySetting = () => {
   const [proxyModalStatus, setProxyModalStatus] = useModal();
   const [proxyList, setProxyList] = useState<LocalProxy[]>([]);
@@ -23,23 +41,8 @@ export const ProxySetting = () => {
 
   return (
     <Panel title="Proxy Settings">
-      <PanelSection title="Proxy" subTitle="d">
+      <PanelSection title="Proxy" subTitle="">
         <Switch />
-        <div>
-          <Button variant="ghost">
-            <PlusCircle />
-            Add Proxy
-          </Button>
-        </div>
-        <div>
-          {proxyList.map((proxy) => {
-            return (
-              <div>
-                {proxy.protocol}://{proxy.server}:{proxy.port}
-              </div>
-            );
-          })}
-        </div>
       </PanelSection>
       <div>
         <ProxyModal
@@ -49,7 +52,11 @@ export const ProxySetting = () => {
           afterCancel={() => {}}
         />
       </div>
-      <div>TODO</div>
+      <div>
+        {proxyList.map((proxy) => {
+          return <ProxyItem proxy={proxy} />;
+        })}
+      </div>
     </Panel>
   );
 };